SVGツールまとめ

SVGを制作できるツールの簡易まとめ

TeX2img

TeX2img配布サイト

■ ベクター画像形式
●EPS ファイル(フォントをアウトライン化)
●PDF ファイル(フォントをアウトライン化 または テキストを保持)
●SVG ファイル(フォントをアウトライン化 かつ テキスト保持も可能)
●SMIL を利用したSVGによるベクターグラフィックスアニメーション(フォントをアウトライン化) → [サンプル1:連成振動] [サンプル2:☃による素因数分解の可視化]
●SVGZ ファイル(圧縮SVG形式)
●EMF ファイル(フォントをアウトライン化)
■ ラスター(ビットマップ)画像形式
●PNG ファイル(透過・非透過)
●JPEG ファイル
●GIF ファイル(透過・非透過,アニメーションGIF生成にも対応)
●TIFF ファイル(透過・非透過,マルチページTIFF生成にも対応)
●BMP ファイル

引用元: TeX2img配布サイト

SVGによる書き出し

授業を動画コンテンツにする場合は4Kでないと厳しい

●授業動画、プレゼンテーション動画では、文字の高精細感が、動画の見やすさに直結する。

●「元画像が4Kで、それをフルHDにダウンコンバートした映像」は「ふつうにフルHDで収録した映像」よりも解像感が高く、見やすい。

●しかし、文字情報こそ4Kにしなければ、細部が潰れて見づらくなる。

●授業コンテンツにおいて表示する「文字・画像」の元データをつくる場合、JPGやPNGなどのラスターデータでつくると、高画素映像への対応ができない。

●「文字・画像」の元データは、4Kや8Kに引き伸ばしてもガタが出ない「SVGで出力したデータ」を使う必要がある。

●SVGデータの主流はIllustrator CC〔Adobe〕である。 しかしAdobe CCはサブスクリプション契約なので、費用がかさむ。

●Inkscape〔フリーウェア〕はIllustrator CC〔Adobe〕の代用になる。 けれどもInkscapeはプロフェッショナル向きの専門性の高いベクターデータエディターである。

●プレゼンテーションをするための簡便なSVG出力もできるエディターを探す必要がある。

できあがっているSVGデータに動きを与える専門のフリーウェア

Sozi でぐいぐい動くプレゼンテーション(前編) - interprism’s blog

SVGプレゼン

SVG Morpheus - Morph SVG icons
LaTeX の数式を PNG と SVG に変換する - akihiko’s tech note
SVGを制作できるアプリ,お絵描きソフトを徹底的に調べました! 114個 - 聴く耳を持たない(片方しか)
=^.^=
=^.^=
=^.^=
ZorroSVG - Put a Mask on it
SVG Loaders - Sam Herbert
実戦で使える本格的なSVGアニメーションを作る - The future starts today
SVGによるテキストの描画サンプル
Web上で使えるSVGエディタまとめ | hifive開発者ブログ
線や塗りなど描画が美しいSVGアニメーションの作り方 | TIPS | BOEL Inc. ボエル
Boxy SVG Editor
こいつ動くぞ!商用利用無料、シンプルにデザインされたフォントもSVGも揃ったフリーのアイコン素材 -Box Icons | コリス
実装が非常に簡単!アニメーションに対応したSVGアイコンと埋め込みコードがセットになったライブラリ -Titanic | コリス
線を引くSVGアニメーションの作り方 -文字や図形を一筆書きのように線・ラインで描く | コリス
便利なツールが登場!ハンバーガーをXに変形させるのも簡単、SVGアイコンをアニメーション化できる無料ツール | コリス
SVG 要素リファレンス | MDN
Freestyle SVG Exporter — Blender Manual
【旧版】SVG入門 (全14回) - プログラミングならドットインストール
ノンプログラマーにもオススメ!滑らかなSVGアニメーションを驚くほど簡単に作成できるMac用ソフト「Keyshape」の使い方を解説|ferret [フェレット]
画像フォーマット「SVG」を使いこなすために知っておきたいこと|ferret [フェレット]
見えないペンで描いてるみたい!SVGアニメーションを作る方法|ferret [フェレット]
GitHub - SVG-Edit/svgedit: Powerful SVG-Editor for your browser
GitHub - alexjlockwood/ShapeShifter: SVG icon animation tool for Android, iOS, and the web
GitHub - riccardoscalco/textures: Textures.js is a JavaScript library for creating SVG patterns
CSSだけでSVGをアニメーションさせる | ハックノート
ブラウザから SVGO で SVG ファイルを最適化できる 「SVGOMG」 | WWW WATCH
UI改善にキラリと役立つ! SVGアニメーションの作り方まとめ - ICS MEDIA
SVG Editor - Visual Studio Marketplace
無料で使えるSVGエディタを比較してみた | なるほど。
コード不要で手描き風のSVGアニメーションを自動作成できるエディタ「Vivus Instant」の使い方大公開! - paiza開発日誌
Free SVG Converter
SVG アニメーションツール Shape Shifter の使い方 - Qiita
VSCodeでSVGを編集できるやつ2.0(SVG Editor) - Qiita
説明つきの画面キャプチャー図をSVGでつくる - Qiita
SVGアニメーションが5分で作れる!jQuery DrawSVGの使い方
アニメーション付きSVGで実装する滑らかで自然なアニメーション | スターフィールド株式会社
インラインSVGを使った、テキストを変えられるアイコン | スターフィールド株式会社
Blenderで3DモデルをSVGとして書き出す方法 | Stocker.jp / diary
SVG PORN
SVGでハンドライティングアニメーションを実装する | UNORTHODOX WORKBOOK | Blog
Animated Text Fills - SVG text with animated dashed stroke pattern
svg 編集 - Google 検索
意外に簡単!滑らかSVGアニメーションをつくってみよう! | サイドスリーブログ | 株式会社サイドスリー
SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。
HTML5 と SVG で考える、これからの画像アクセシビリティ
SVG MANIAX Ver.2 - Mars vanilla
SVG MANIAX - CSS Nite After dark7
Vecteezy Editor - Free Online SVG Editor - Download Free Vector Art, Stock Graphics & Images
アニメーションやグラフ等、SVGを使ったJavaScript&jQueryプラグイン11 | Webクリエイターボックス
SVGモーフィングで、図形を徐々に変化させてみよう | Webクリエイターボックス
SVGを使いこなすための便利ツールいろいろ | Webクリエイターボックス
どれがいい? 全部無料でブラウザーだけで使えるSVG編集ツール6選 - WPJ
シンプル・爆速・超便利な無料SVGエディター「Boxy SVG」って知ってる? - WPJ
基礎から学ぶ、IllustratorでSVGを最適化して書き出す方法 - WPJ
SVGで手書き風アニメーションを実装する方法 | Will Style Inc.|神戸にあるウェブ制作会社

 
comments powered by Disqus