ホームページを作成するときに、最もやっかいなパーツの一つが*「アイコン」*です。

昔はアイコンをとても小さな画像スライスにして、imgタグを使って貼り付けていました。
若干のマージンのズレでレイアウトが崩れたりして、数多くのWebデザイナーたちを困らせたものです。

そこで救世主のように現れたのが、Font AwesomeなどのWebフォントを利用したWebサイト用のアイコンシステムでした。
Webフォントは多くのブラウザでサポートされており、アイコンを、色をつけたり大きさを変えたり影をつけたりと、フォントと同じように扱うことができたので、非常に役立っていました。

そして、近年改めて注目されているのが、SVGを使ったアイコンシステムです。
ブラウザのサポートが改善されているおかげで、SVGもほとんどのブラウザで表示することができるので、インラインSVGは世界中のWebデザイナーの中でも非常に役に立つツールの一つと見なされています。

今回は、自作のSVGアイコンを使ってアイコンシステムを構築する方法を、チュートリアルでご紹介します。
Retinaディスプレイなどの高画質ディスプレイでも滑らかに表示されるSVGアイコンの作成方法に興味がある方は、ぜひご一読ください。

SVGとは？

svg.png

ホームページで表示されている画像の拡張子は、JPEG、GIF、あるいはPNGがほとんどではないでしょうか。
しかし、多くのWebデザイナーの悩みはこうです。

「画像は劣化するのが当たり前」

確かに、読み込みスピードを重視するのであれば画像の軽量化が必要なので、どうしても画像が劣化してしまいます。
一方、美しい画像を表示するために解像度を上げると、ファイル容量が大きくなってしまうという問題点がありました。

そこで近年着目されているのが、*「SVG」*という拡張子の画像フォーマットです。

SVGはScalable Vector Graphicsの略で、パスで形成されているベクター形式の画像フォーマットです。
普段から馴染みのあるJPEGやPNGなどは、ビットマップといって、ピクセル(ドット)単位で形成されています。
ピクセルで形成されている画像は、ピクセルの色や濃度の値などの配列情報を扱っているので、拡大して見ると、ひとつひとつのマスに色が塗られているのがわかります。

これに対して、ベクター画像とは、情報をピクセルではなく数式や値で保持しています。
グラフィックデザイナーの方はPhotoshopやIllustratorを使う機会が多いと思いますが、Photoshopがピクセル画像を扱っているのに対し、Illustratorはベクター画像をパスで扱っています。
それがSVGにも当てはまるのです。

SVGアイコンフォントなら、表示の不具合が起きる可能性が低い

iconicfont.jpg

画像をベクター形式で表示するSVGは、アイコンフォントに替わってアイコンシステムとしても活用されるケースが増えてきました。

アイコンフォントとは、フォントの１文字１文字にテキストではなくアイコンが割り当てられたフォントのことです。
Windowsにデフォルトで入っていた「Wingdings」などが有名です。

アイコンフォントをWebフォントとして活用すると、ベクター画像として扱え、IE8以下のレガシーなブラウザにも対応しています。
高画質ディスプレイでも表示できる利点を活かして多くのWebデザイナーがアイコンフォントを採用してきました。

しかし、アイコンを表示させるためにソースに意味を持たないアルファベットを書かなければならず、万一フォントファイルがうまく表示されなければ、意味不明な文字の羅列が表示されるという欠点がありました。
そのため、SVGを使ったアイコンシステムへの移行が進んでいます。