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

Web上に存在する画像は、すべてビットマップ形式とベクター形式の画像のどちらかに分類されます。写真を含む、イラストや図形などもすべてこのどちらかに分類されます。

さらにビットマップ形式の中には、大きく分けてJPEG、PNG、GIFのファイル形式が存在し、それぞれ一長一短の特徴があります。

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

WordPressにSVGファイルをアップロードしたい際には、こちらのプラグインをご利用ください。

ビットマップ形式とは

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

ベクター形式とは

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

SVGとは

SVGとは、Web上で活用できるベクター形式のファイルで、「Scalable Vector Graphics」の略称です。その名の通り「計測できる画像」ですので、数式を計算して描画している画像形式です。Webサイトのロゴやアイコンによく使われます。

SVGファイルは、画像ファイルでありながらテキストデータで記述され、テキストエディターにて編集することも可能です。

メリット

後述の「SVGでできること」にも書いていますが、以下のメリットがあります。

• 拡大縮小しても画像が劣化しない
• テキストデータなのでCSSで編集できる
• JavaScriptを用いたアニメーションにも対応

デメリット

• 写真などの複雑な画像には不向き（計算式が膨大になり重たくなる）
• SVGのテキストデータを作成するには一定の知識が必要

SVGのつくり方

通常の画像（JPGやPNG）をSVGに簡単に変換できるツールもあります。よろしければご覧ください。

SVGでできること

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

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

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

CSSで画像を編集できる

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

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

アニメーションといえばGIFですが、SVGファイルに直接コードを記述して滑らかな動きのあるアニメーションをつけることもできます。ただし、HTML、CSS、JavaScriptの理解が必要です。

まとめ

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

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

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