「SVG」とは、数値データを使って画像を Webブラウザーなどで表示できるファイル形式で、データで直線や曲線を描くため、拡大しても線は滑らかに表示され、シンプルな画像はファイル容量も小さくできます。
Webブラウザー上で表示される画像の多くは「JPEG」「PNG」といった形式です。
JPEG 
PNG 
「SVG」による画像と較べても、このサイズで違いは分かりません。
SVG 
JPEG
容量 1.34 KB
PNG
容量 1.13 KB
それが「SVG」形式の画像なら、どちらのサイズも同じファイルなのに線はシャープなまま、もちろん容量も変わりません。
SVG
容量 1.04 KB
SVG
容量 1.04 KB
「JPEG」で線がぼけない同じサイズの画像ファイルを用意すると容量は 4倍近くになります。
JPEG
容量 4.75KB
この「SVG」は「Scalable Vector Graphics」の頭文字であり、それぞれ
- Scalable：品質を落とさずにサイズの拡大縮小ができる
- Vector ：直線や曲線を数値で表現する
- Graphics：図形を表示する技術
といった意味になります。
「SVG」ファイルをテキストエディターで開くと画像が数値によって表現されています。
この「SVG」形式の画像なら、パソコン、タブレット、スマートフォンなど、サイズの違う機器でも Webブラウザーで品質を維持したまま表示ができるメリットがあるので、今後、利用は広がっていくでしょう。
さらに Office 2016 からは「SVG」が扱える画像形式として追加され、挿入が可能となりました。
そのためインターネット経由で公開されるイラストの素材集でも「SVG」形式での提供は増えるはずです。
そんなとき「SVG」って何？とならないように解説してみました。
記事の情報は公開時あるいは更新時のもので、最新情報はリンク先など情報元の公式ページでご確認ください。
