WEB制作のワンポイント！ SVGアイコンを使うワケ

JPEG、GIF、PNG、BMP、TIF、 EPS…画像フォーマットは多々あります。Webサイトをコーディングする際には、使う画像とその目的に合わせて拡張子やサイズを選ぶことになります。

ホームページ上に画像を表示するためのフォーマットとして、これまでJPEG、GIF、PNGが多く用いられて来ましたが、ここ数年は、Web制作で使用する画像はSVGへと目まぐるしく切り替わってきました。すべての画像をSVG化！とまでいかなくとも、ロゴやアイコンをSVGで作成して読み込むサイトが増えています。

どうしてここまでSVGフォーマットが広まったのでしょうか？「アイコン」の表示をメインに、改めてその理由を振り返ってみます。

Web制作で利用されるアイコンの種類

アイコンは、サイトの中のワンポイントです。タイトルや項目の分類に使われます。

アイコンの一例

アイコンはサイトを楽しく表現したり、細部を彩るのと同時に、機能をひと目でわかりやすくする補助の役割を担います。ピクトグラムやシンボルマークが使われることが多く、曲線や中抜き（透過）が使われた画像が多くなります。このようなアイコンをWebサイトで使用する際には、主に下記の3パータンから選択します。

• 画像アイコン
• アイコンフォント
• SVGアイコン

各パターンはそれぞれ下記のような特徴があります。

画像アイコン

Webサイトでは主にGIF、JPEG、PNGの3つのファイル形式が用いられます。インターネットが普及した当初からある一番ベーシックな表示形式です。アイコンに主に使われるのはその中でも「.gif」と「.png」になりますので、この2つの特徴を説明します。

使い分けとしては「色数の少ない要素は.gif」。「色数の多い場合、円形など透過部分の端処理（エッジ）を綺麗に出したい場合は.png」を用いることが多いです。

現在通信速度が上がり、小サイズの画像にも容量を使えるようになりましたので、これまでgifを使っていた表現もpngを使ってより鮮明な表示を行えるようになっています。

.gifのメリット・デメリット

.pngのメリット・デメリット

アイコンフォント

アイコンフォントとは 「アイコン型のWebフォント」のこと。フォント1文字に対して、テキストではなくアイコン画像が設定されます。

配布サイトからフォントをダウンロード、ないしは CDN（外部からファイルを読み込んでサービスを利用する方式）を使って読み込みを行います。

アイコンフォントのメリット・デメリット

SVG

Scalable Vector Graphics（スケーラブル・ベクター・グラフィックスの略称）。

SVG自体は古くから存在していましたが、HTML5の普及とともに多くのブラウザでサポートされるようになりました。ベクター画像を表示する技術であり、拡大縮小を行っても画質が劣化しない特徴があります。

SVGのメリット・デメリット

現在の主流はSVG！その理由は？

ここまで、アイコンの表示に用いられる手法をご紹介しました。

それぞれメリットとデメリットがありますが、文頭で記した通り、その中でも近年ロゴやアイコンの表示はSVGが使われる事が多くなってきました。これまで画像やアイコンフォントで行ってきたことを、SVGで行っていくその利点とはなんでしょうか？

スマートフォン・Retinaディスプレイといった複数タイプ＆高解像度のディスプレイに対応可能

SVGが広まっている一つの理由に、レスポンシブサイトの増加によってサイトの表示サイズが固定されなくなったことが挙げられます。また、高解像度のディスプレイが主流となってきたため、特にRetinaディスプレイ^※1の需要増加が大きいです。

高解像度のディスプレイに対応しては、画素数を増やして画像ファイルを保存するのが一般的ですが、専用の画像を用意する必要がある他、画素数を増やせば増やすほどに画像容量も大きくなってしまいます。

SVG画像は一つ作ってしまえばスマホ対応・Retina対応といったディスプレイに関わらず、キレイな画像をユーザに提供できます。この役目はこれまでアイコンフォントが担っていましたが、 不要コードを必要とすることによるアクセシビリティ問題がありました。

ユーザーの環境（ブラウザ設定など）によって表示が行えないなどデメリットも大きく、それを改善できる手段としてもSVGは最適でした。

ベクターデータであるということ

SVGの強みとして、CSSやjavaScriptとの組み合わせで「後から色やサイズを変えられる」「アニメーションや透過といった処理を追加できる」という利点があります。これまでは、画像をアニメーションさせるためには複数の画像を用意してgifアニメーションを作成するか、javaScriptで切り替える“パラパラ漫画”のような表現が用いられてきました。

SVGであれば、“線を描画する“、“形状を変える”、“組み合わせて模様を描く”など、これまで画像でできなかった表現を行えます。何より、ベクター画像の場合はピクセルの概念が無いため、どんなに拡大してもくっきりとしたきれいな線を保ちます。

これは、前述の高解像度ディスプレイの対応他、同じSVGデータを別の場所に違うサイズで利用できるなど、大きな魅力と利点になります。

対応ブラウザの増加

これまで、SVGを非対応ブラウザへ表示するためにはスクリプトの使用や、代替画像を用意する必要がありました。いくら便利であっても、シェアの多いブラウザであるIEへの対応が遅れていたため、SVGはWeb制作においては「使いにくい」ファイル形式と思われてきました。

ですが、HTML5の普及とIEの標準対応が行われたことで、ぐっとSVGが扱いやすくなりました。現在では最新のブラウザであれば、多少の表示差異はありますがWeb制作に利用するにおいて問題なくSVGを扱えるようになっています。

対応ブラウザが増えるということは、サイト構築のツール選択において大きなプラスとなりました。

まとめ：SVGはフロントエンドエンジニアの悩みを解決してくれるとても便利なフォーマット

SVGはデザインの形状を保ち、高解像度のブラウザにも対応できます。また、ファイル内にパスのデータを持っているため、アニメーションの作成も画像データを元にするより簡単に行うことができます。

上記から、SVGはこれまで主流となっていた画像やアイコンフォントのデメリットを無くして、サイトにきれいな画像を表示することができる素晴らしいフォーマット形式といえます。

ただし、複雑なオブジェクトを扱うには、SVGはまだ完璧ではありません。

ですが、「CSS上でサイズや色を変更できる」「アニメーションや透過も行える」ことができるので、一つファイルを作ってしまえばその後の編集の自由度は大変高いためロゴやアイコンといった、シンプルでかつ美しく見せたい箇所にSVGは最適なファイル形式といえます。

「こちらのディスプレイで表示がきれいに出ているのに、あちらのディスプレイでアイコンがボヤボヤしてる…」といった、表示の差異とその対応には頭を悩ませていました。そんな悩みを解消できるSVGは、PLAN-Bでもどんどんと取り入れていっています。

まだ制作にSVGを使っていない人は、SVGを使ってどんな環境でもきれいな画像を表示してみましょう。