Fes
SVGファイルの仕組みは？
一方、SVGファイルはベクタ形式の画像ファイルです。 ベクタ形式とは、画像や文字などの2次元情報を数値化して記録しており、ブラウザがその場で描画してくれます。 解像度を気にすることも、拡大縮小でデータが劣化することもありません。 主に、アイコンや地図、平面的なイラストなどを作成するときにはベクタ形式が採用されています。
SVG 何に使う？
SVGが力を発揮するのは、ロゴやアイコンのようなシンプルな形状のオブジェクトや「線」と「塗り」で表現されたイラストレーションなどです。 画像フォーマットは、用途に応じてどれが向いているのかを見極めて使い分けるようにしましょう。
SVGファイルの読み方は？ 「SVGファイル（スケーラブル・ベクター・グラフィックス、Scalable Vector Graphics）」はの歴史は意外にも古く、2001年頃に勧告された技術です。
SVG PNG どっちがいい？
PNGとSVGは透明機能に対応しています。 どちらもオンラインのロゴやグラフィックに適しています。 特に、PNGはラスターベースの透過ファイルとして最適な選択肢のひとつです。 ピクセルや透明を扱う場合は、SVGよりもPNGの方が適しています。
SVGの色数は？ 可逆圧縮の画像フォーマットのために、何度圧縮しても圧縮による画像劣化がなく、約280兆色を指定することもできます。
SVG形式のソフトは？
2 無料のベクター画像(SVG)作成ツール
- 2.1 ① Inkscape (インクスケープ)
- 2.2 ② Vectr.
- 2.3 ③ Gravit Designer (グラビット デザイナー)
- 2.4 ④ Boxy SVG.
- 2.5 ⑤ Method Draw.
- 2.6 ⑥ SVG-edit.
- 2.7 ⑦ Janvas.
SVGファイルの中身はテキストデータであり、HTMLやCSSのようにテキストエディターを使って編集したり、新規制作したりすることができます。 GIFアニメーションのようなパラパラ漫画ではない、滑らかなアニメーションを制作したり、JavaScriptで画像内の要素を操作するといったこともできます。
SVGの利点は？
【メリット】
- ベクターデータのため、Retinaディスプレイでも鮮明に表示される。
- テキスト（文字）データであるため、画像を表示するよりも軽量。
- IE8以下の古いブラウザにも対応。
- CSS3を用いることで、サイズやカラーを簡単に変えることができる。
- フォントなのでテキストとのベースラインが合わせやすい。
PhotoshopでSVGデータを書き出す
注意が必要なのは、作成するデータにフォントが含まれている場合です。 SVGはパスを書き出す形式のため、フォントの場合は「シェイプレイヤーに変換する必要があります。 レイヤーが複数ある場合は画像を結合し1つのレイヤーにし、PSDデータを一旦保存しておきます。
注意が必要なのは、作成するデータにフォントが含まれている場合です。 SVGはパスを書き出す形式のため、フォントの場合は「シェイプレイヤーに変換する必要があります。 レイヤーが複数ある場合は画像を結合し1つのレイヤーにし、PSDデータを一旦保存しておきます。
SVG形式のサイズは？
◆ 規則正しい簡単な図の場合（パス数：122）
| サイズ | 保存形式 | 図ー１ |
|---|---|---|
| 原寸（320×320px） | SVG | 12KB |
| 原寸（320×320px） | JPEG | 25KB |
| ２倍（640×640px） | JPEG | 37KB |
| ３倍（960×960px） | JPEG | 94KB |
