SVG（スケーラブル・ベクター・グラフィックス）はこれまでよく見かけていた「JPEG」や「PNG」とは根本から違う画像データです。

JPEGは1,677万色扱うことができ風景写真などに適してPNGは透過色を持たせることができるなどそれぞれ特性があります。
詳細はちょっと前に記事を書いているのでそちらをご覧ください。
→「画像ファイル形式の種類と特徴について」

SVGって結局何？

ちょっと直訳してみました。

・スケーラブル（スケーラビリティ）
規模の拡大に対応できる、拡大の余地が大きい

・ベクター・グラフィックス
線や曲線の組み合わせで描いたイラスト

こういった単語は直訳するとよくわかんないことがまぁまぁ多いのですが、そんな中「SVG」は割と分かりやすいですね。

簡単にまとめると、【大きさを気にしなくていい画像】です。
「JPEG」や「PNG」は拡大縮小するとぼやけたりしてきちんと使えないことがあるので、「SVG」はそういったことが起こらないデータって感じですね。
そもそも「ベクターグラフィックス」自体拡大縮小しても画質が悪くならないデータのことなのでとくに直訳するまでもなかったです。
あ、ベクターグラフィックスは点の座標とそれを結ぶ線を数式によって計算して作られる画像です。

SVGのここがすごい！

・ さきほどの説明で「SVG」が拡大縮小しても画質が悪くならないデータなのはなんとなく分かってもらえたかもしれませんが、実際それになんの意味があるのかは「？」だと思います。
しかし、WEBサイトの製作、運用している人にとってはとても大きな意味があります。
ここ数年スマホの普及率がうなぎのぼりです。
電車に乗ってる時に横目で周りを見てみるとものすごく実感します。

そのスマホですが端末によって大きさが違いますよね。
iPhoneも年々大きくなってますし、アンドロイドなんて大きさ全部ばらばらに思えます。

そういった異なる大きさの端末でロゴマークなどの画像を見ると画像がぼやけている場合があります。
これは端末に合わせてもとの大きさを変えてしまっていることが原因なんです。
サイトによってはPCとスマホで画像の大きさを変えてスマホの時はPCよりも大きな画像を用意してスマホの時にぼやけないようにしているところもありますが、画像を2枚用意しなければいけないですし切り替えるための処理も必要なのでサイトとしていいとは言えません。 大きさを元のサイズのままで表示させると端末によってバランスが悪いしサイトが崩れることもある・・・
でも画像がぼやけるのは嫌！サイトが重くなるのも嫌！何はともあれ嫌！
そんな嫌々に対応してくれるのが「SVG」です。

「SVG」なら大きさがどのように変わってもぼやけることなくキレイに表示されます、PCとスマホで画像を切り替える必要もありません。
さらに、数式や文字を使ったデータなので色やサイズ、アニメーション、透過、ぼかしまでもCSSで変更することが可能です。

SVGのここがすごくない！

SVGは計算式で作っているデータなのでシンプルな形や色の画像には向いていますが、写真のような複雑な構成の画像には向いていません。
複雑になるほどデータの容量も増えていくので、状況によって「PNG」や「JPEG」を使うことをおすすめします。

まとめ

割と最近出始めたように感じますが、実は「SVG」は1998年からある画像形式です。
ブラウザの問題で流行ることなく廃れていましたが最近やっと日の目を浴びました。
高解像度のモニターにも鮮明に表示されることや、スマートフォンの画面にも対応できることで使用される機会は増えていくと思います。
今後は「SVG」を使うのが当たり前になるかもしれません。