2020.11.09

画像ファイル形式「SVG」とは？特徴やデータの作成方法

こんにちは、futaです。

比較的新しい画像ファイル形式の中に、「SVG（エスブイジー）」というフォーマットがありますが、ご存知でしょうか。WEBスクール時代には習っていないような…？最近よく聞くようになって、なんとなく使っている方も多いかもしれません。今回はこの「SVG」をについてまとめてみました。

「SVG」とは

SVGは、Scalable Vector Graphicsの略で、訳すとサイズ変更OKなベクター画像という意味です。調べたところ、2001年にW3Cより勧告された技術だそうです。意外と歴史は長いですね。
当時はサポートしているブラウザがほどんど無く、あまり普及しませんでしたが、近年は対応ブラウザが増え多くのWebサイトで活用され、様々なケースで幅広く使われるようになりました。

画像ファイルなので、HTMLではimgタグやbackground-imageプロパティで設置できます。画像ファイルであると同時にテキストファイル（XML準拠）でもあるので、HTMLファイル内にインラインでSVGを記述することも可能です（コードの数値の手入力は難しいのでIllustrator等が必要）。

他の画像形式との違い

Webで主流のGIF、JPEG、PNG等は、「ラスタ形式」「ビットマップ形式」と呼ばれる、多数の色のピクセルの四角（点）が格子状に並ぶ構成のデータ形式で、写真等の描写が複雑なデータに適しています。デメリットとしては、容量が大きくなりやすい上拡大縮小には不向きで、サイズ変更すると点の配置にずれやゆがみが起こりエッジにギザギザ（ジャギー）が発生したり、ぼやけたりして画質が低下するという点が挙げられます。

一方SVGは、拡大縮小しても劣化しない「ベクトル形式」というフォーマットです。パス・テキスト・シェイプなどの集合を座標で記録し画像を描画します。
どのような画像サイズを指定しても、ブラウザが都度描画してくれるので鮮明な画像を表示できるというのが最大の特徴です。ロゴ・アイコン・装飾等のベクトルで表現可能な単純な画像に向いています（ぼかし・シャドウ・乗算処理等は再現できない場合があります）。

こういった特徴を理解すると、迷わず形式の使い分け方ができそうですね。
ロゴ・アイコンのようなシンプルなオブジェクトはもちろん、ベクトル（パスやポイント）で表現されたイラストや装飾等にもSVGが適しています。写真のように多数の色調表現がある複雑な画像には不向きなので、その場合はJPEGやPNGを使いましょう、ということです。

メリットとしては…

JPEG、PNG等は、レスポンシブデザイン等で画像の表示サイズが大幅に変わる際、画質劣化防止の為に、PCとスマートフォン各デバイスに適したサイズの別画像を作る必要がありますが、SVGであれば、1つのデータでいずれの画面でも綺麗に画像を表示できるということが挙げられます。小さめのサイズで作っていても、Retina Displayのような高精細ディスプレイでの表示品質に問題はありません。
よほど複雑にしなければ、ファイル容量もラスタ形式より抑えらるので、読み込みのレスポンスも向上します。
また、SVGはCSSやjavascriptを使えばアニメーションにも対応しています。

「SVG」の作成方法

Illustratorで作成する場合のひとつを紹介します。PhotoshopでもシェイプであればSVGに書き出しが可能です。

画像やフォントを含まないオブジェクト（シェイプ）のみのデータを作ります。フォントはそのままでもSVGに組み込めますが、環境に依存します。アウトラインを取れば正確にレンダリングされます（書き出し時に自動でアウトライン化をしてくれる機能もあります）。
基本的にオブジェクトのサイズがそのまま画像のサイズとなって書き出されるので、周囲に余白をもうけたい場合は、アートボードで調整すると良いでしょう（アートボードサイズで書き出すモードがあります）。

「ファイル」→「書き出し」→「書き出し形式」から形式のプルダウンをSVGにして保存するだけです。「アートボードごとに作成」にチェックを入れると、アートボードのサイズで書き出しされます。オプションウィンドウが出てきたら、基本デフォルトでOKですが、必要に応じて変更を加えます。