画像フォーマット「SVG」を使いこなすために知っておきたいこと

この記事は、2017年5月17日に公開された記事を再編集しています。

JPGやGIFといった画像フォーマットは インターネット が普及した当初から使われており、今でもその存在感は消えることはありません。
GIFは透過色を扱えたりアニメーションを表現することができ、JPGは256の3乗である16,777,216色を扱うことができるので、写真を表示するのに最適な画像フォーマットです。

2003年の国際標準化を境に、一気に知名度を広げたのが「PNG」と呼ばれる画像フォーマットです。可逆圧縮の画像フォーマットのために、何度圧縮しても圧縮による画像劣化がなく、約280兆色を指定することもできます。

そしてここにきて注目を集めているのが「SVG」と呼ばれる画像フォーマットです。一般的にSVGはベクターデータを扱っているフォーマットとして認識されていますが、なぜ今注目されているのでしょうか。

今回は、SVGを使いこなすために最低限知っておきたいSVGの概要を紹介します。

ビットマップ画像とベクター画像

コンピュータで画像を扱う方法にはいくつかありますが、大きく分けると「ビットマップ画像」と「ベクター画像」の2つに分けられます。

ビットマップ画像

ビットマップ画像(Bitmap graphics)は、画像を格子状に細かい点(ピクセル, 画素)に分割し、それぞれの点に色や輝度などの情報を与えて表現する方法です。

ビットマップは性質上、画像を拡大してしまうと1ピクセルの大きさも大きくなってしまうため、どうしても画像がギザギザに粗くなってしまいます。
そのため、解像度が高くてもきれいに表示するには画素数を増やして画像ファイルを保存するのが一般的ですが、画素数を増やせば増やすほど容量も大きくなってしまうので、画素数の多い画像は インターネット 環境で閲覧するのには不向きだと言われています。

これまで インターネット の世界で使われていた「GIF」「JPG」「PNG」はすべてビットマップ画像です。
これらのデータは インターネット 環境で閲覧しやすいように、圧縮して保存するのが一般的です。

ベクター画像

一方、ベクター画像(Vector graphics)と呼ばれる画像形式は、画像を点の集合で表現するのではなく、複雑な計算式によって色や曲線を表現しています。

ビットマップだと画像を拡大すると画像がギザギザに見えてしまいますが、ベクター画像は画像を計算式で表現しているので、画像を拡大縮小すると、その計算式の値を変えながらその都度描画しなおします。

ただし、ベクターデータは計算式によって画像を表現しているので、写真などたくさんの色を使う描写には不向きだと言われています。
なぜなら、風景などの複雑な画像をすべて計算式によって図形として扱うには膨大な計算が必要になるからです。

こうしたベクターデータは、これまでAdobe Illustratorをはじめとする専用の編集ソフトの形式によって保存されることがほとんどでした。
しかし、SVGフォーマットがサポートされたことで、 インターネット ブラウザ でも気軽にベクターデータを扱うことができるようになりました。

SVGとは

SVGは「Scalable Vector Graphics」の略称です。

簡潔に言えばWeb上で使うことができる拡大縮小が可能なベクター画像のことを言います。

それでは、SVGはほかのフォーマットに比べどのようなメリットがあるのでしょうか。

SVGの強み

1. 1つのファイルでスマホ画面やRetina画面に対応

同じ画像・同じデザインであれば、スマホ画面の解像度用、hoverした時の画像…などいくつも画像を用意する必要がありましたが、SVGファイルであれば1つのファイルで対応できます。

結果的に画像サイズも軽減され、 HTTP リクエスト数の削減につながり、結果として ページ の表示スピードがあがり、 SEO の効果も期待できます。

2. あとから色の変更やサイズ調整が可能

SVGは画像ファイルということもできますが、数式や文字を用いたデータファイルという側面も持ち合わせています。そのため、あとから色やサイズの変更が必要になったときに専用の画像ソフトを開いて編集しなくても、 CSS 上でサイズや色を変更できます。

3. アニメーションや透過も

これまでは、アニメーションといえばGIF、透過画像といえばPNGでしたが、SVGはアニメーションも透過もどちらも扱えます。
CSS や JavaScript を使って動きをつけることも可能です。

SVGを使うべきとき・使うべきではないとき

JPG画像がイメージサイズを軽量にできる反面、PNGやSVGフォーマットはともに透過背景・アルファ透過を扱うことができます。
それでは、透過色を使いたいときにはどちらを使えばいいのでしょうか。

SVGを使うべき場面

高画質の画像を縮小して通常画質のスクリーンにエクスポートすると、画像サイズが非常に大きくなってしまいます。
それを避けるためには、PNGよりもSVGを使ったほうがいい場合があります。

形が複雑でなければ ファイルサイズ はビットマップ画像よりも小さくなり、拡大してもぼやけずに綺麗な状態で表示できます。
色やサイズの変更も簡単に行えます。

SVGを使うべきではない場面

SVGは数学的に計算して表示するベクター形式の画像フォーマットなので、形や色を効率良く表現することはできますが、写真のようにたくさんの画素を持つ写真には不向きです。

また、現在ではほとんどの ブラウザ でサポートしていますが、まれに未対応 ブラウザ も存在します。
その場合は未対応 ブラウザ でも対応できる「Modernizr.js」を使ってPNGの代替画像に置き換えるなど、一工夫必要な場合があります。

参考：
Modernizr.js

SVG画像を作成する方法

1. Illustratorなどのソフトを利用する

PhotoshopやIllustratorなどのソフトを使えば、簡単にSVG画像を作成できます。
アイコンなどに使う場合は、「100px × 100px」のように正方形で作成したほうがよいでしょう。

パスを使って作成していきますが、できるだけ高さがいっぱいになるように作成したほうがよいでしょう。これは、高さがバラバラだと、思ったような表示にならないからです。

また、 テキスト データなどを使っていたり、さまざまなオブジェクトが混在している場合は、必ずすべてをアウトライン化します。
色を変える場合にはのちほど CSS で変更しやすいように一色のオブジェクトにしておきましょう。

画像は最終の状態を一度保存しておき、「別名で保存」を選択して「SVG形式」で書き出せば完了です。

2. オンライン エディタを利用する

IllustratorやPhotoshopのようなソフトは高額で手が出ない、という場合には オンライン エディタを利用するのもオススメです。
「Vecteezy」はIllustratorでベクターを扱うのと同じように扱うことができます。
また、「ZorroSVG」のように、透過のPNGやGIFファイルをアップロードすれば、それよりも軽量な透過SVGファイルを作成してくれるような便利なWebサービスもあります。

参考：
Vecteezy
ZorroSVG

3. SVGライブラリをダウンロードする

Simple IconsやIcoMoonのようなホームページでは、すでに作成されたSVG画像をダウンロードできます。
のちほど テキスト エディタで着色もできるので便利です。

まとめ：強みと弱みを知ったうえでSVGを活用しよう

すべての場合にSVGを使ったほうがいいわけではなく、SVGにも強みと弱みの両方があります。それらを理解したうえでSVGを大いに活用してみましょう。

一般的にページの読み込み速度の低下のほとんどが大量の大きなデータ量の画像を読み込むことが原因と言われています。SVGは ページ スピード低下を解消してくれる一助となってくれるでしょう。