拡大しても美しい、CSSでデザインできる「SVG」とは

私たちが日々目にするWeb上に存在する画像は、すべてビットマップ形式とベクター形式の画像のどちらかに分類されます。写真を含む、イラストや図形などもすべてこのどちらかに分類されます。さらにビットマップ形式の中には、大きく分けてJPEG、PNG、GIFのファイル形式が存在し、それぞれ一長一短の特徴があります。

上記の記事を参考に用途によって使い分けることがポイントです。ではベクター形式には何があるのか。Webサイトで使用できる画像の形式の中では「SVGファイル」と呼ばれるものが唯一のベクター形式になります。JPEG、PNG、GIFに比べて聞き慣れない方も少なくないかと思いますので、今回は基本的な仕組みから主な使い道をご説明いたします。

WordPressではデフォルトではSVG形式に対応していないので、アップロードするとエラーが発生します。「SVG Support」
こちらのプラグインを有効化することで、問題なくSVGのファイルをアップロードできます。

ビットマップ形式とは

画像を色のついた点の集合体で表現する形式で細やかな色の表現に向いています。（写真や絵画など）しかし、点の集合体がゆえに拡大すると画像が粗くなってしまいます。JPEG、PNG、GIFなどすべてのビットマップ形式の画像は拡大すると画像が粗くなりますよね。

ベクター形式とは

点と線の情報を数値化した画像形式で、コンピューターが計算をして描画している画像です。画像の拡大や縮小を繰り返しても数式が変化しその都度コンピューターが計算し、描画しなおすので画質が変化しないのが特徴です。一方で、複雑な写真などを表現するには膨大な計算を必要とし向いておらず、線や図形、シンプルなロゴなどに適しています。

SVGとは

冒頭でも述べた通りベクター形式の中で、唯一Web上で活用できるのがSVGというファイル形式であり、「Scalable Vector Graphics」の略称です。その名の通り「計測できる画像」ですので、数式を計算して描画している画像形式です。その特徴からSVGファイルは、画像ファイルでありながらSVG(HTMLに似た言語)で記述され、テキストエディターにて編集することも可能です。

SVGでできること

スマホやRetinaディスプレイ用に画像ファイルを複数用意する必要がない

下記の記事で記述しているとおり、Retinaディスプレイに対応する為には同じ画像であれば、各サイズの画像を数枚用意する必要がありました。

しかし、SVGファイルであれば、解像度による画質の変化がないので一つのファイルですべて対応できます。これによりデータの総容量が軽減され、ページをスムーズに表示できることも良い点です。

CSSで画像を編集できる

画像ファイルでありながら数式やテキストで記述されたデータですので、SVGファイルにクラス名を指定することもできます。つまり専門の画像編集ソフトを起動しなくてもCSS上でサイズや色を変更できるということです。通常の画像ファイルですと一から画像を作り直す必要がありますが、SVGファイルであれば、あとからでも簡単に修正可能です。

JavaScriptを用いたアニメーションにも対応している

アニメーションといえばGIFですが、SVGファイルに直接コードを記述して滑らかな動きのあるアニメーションをつけることもできます。ただし、HTML、CSS、JavaScriptの理解が必要です。
※SVGのアニメーションはIEなどの一部のブラウザで対応しないので注意が必要です。
SVG アニメーション対応ブラウザについて

まとめ

SVGファイルの主な使い道としてはロゴやアイコンなどのシンプルな画像になります。複雑な写真やイラストの場合、表示速度が遅くなり、データ容量も大きくなるので注意が必要です。ロゴやアイコンに限っては高解像度のディスプレイ（Retinaディスプレイ等）にも対応できるので、その他の画像ファイルの形式に比べて優れているといえるでしょう。

シンプルでいて、かつどのブラウザでも美しく見せるべきロゴやアイコンなどは、SVGを。それ以外の複雑な写真やイラストなどは、用途に応じてビットマップ形式の画像ファイル形式を活用しましょう。

【2021年4月9日追記】
透過やアニメーションなどにも対応できて、対応ブラウザも増えてきたWebPという画像フォーマットについては、下記記事でご覧いただけます。