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

昔はアイコンをとても小さな画像スライスにして、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を使ったアイコンシステムへの移行が進んでいます。

SVGアイコンシステム利用の手順

それでは、SVGを使ったアイコンシステム構築の手順をステップごとにご紹介していくことにしましょう。
初めてSVGスプライトを使用したり、現在はアイコンフォントを使っていてSVGを使ったアイコンシステムを構築したいひとに特に役立ちます。

1. SVGの準備

アイコンシステム用のカスタムSVGを作成するには、カスタムアイコンの作成にIllustrator、Sketch、Vectrなどのプログラムを使用します。
アイコンフォントをすでに使用している場合は、サードパーティのツールを使用して、SVGスプライトを作成するためにフォントのSVG版を用意する必要があります。

vectr.jpeg

IllustratorやSketchを持っていない場合は、Vectrがオススメです。
Vectrは無料で使用することのできるベクターグラフィックソフトで、ダウンロード版だけでなくブラウザからアクセスできるオンライン版も提供されています。

export.png

VectrでSVGを作成する場合には、下記の形式で保存をしてください。

・Source：「selection」を選択
・Format：「svg」を選択
・Width：「32px」に設定

このように設定したSVGでは、ページと同じサイズの余白が含まれなくなります。

2. アイコンセットを作成

オリジナルのアイコンシステムを構築するには、既存のフォントやSVGなどのベクターグラフィックからアイコンを読み込み、アイコンシステムに変換します。
これを可能にするサービスの中でも使いやすいものの一つがFontasticというサービスです。

フォントを変換するかカスタムアイコンをアップロードする場合

すでにアイコンフォントをお持ちで、SVGフォントフォーマットに変換する必要がある場合は、オンラインフォントコンバーターというサービスで変換することができます。

2ac4c2ba.1.png
This image is via Fontastic

フォントをSVGに変換後、Fontasticでアカウントを作成して、そのフォントをFontasticにアップロードします。
既存のアイコンフォントを追加するには、右上のメニューの*「Add More Icons」*ボタンをクリックします。

同じ方法で、先ほど作成したSVGを個別アイコンとして追加することも、すでに作成した既存のセットに追加することもできます。
*「IMPORT ICONS」*ボタンをクリックして、SVGフォントまたはカスタムSVGアイコンを選択します。

既存のアイコンセットから選択する場合

Font Awesomeのような既存のアイコンライブラリからカスタムアイコンを構築することもできます。
読み込み時間を節約してパフォーマンスを向上させるには、使うぶんだけのアイコンに絞ってアイコンシステムを作成することをオススメします。
例えばサイト全体で5個しかアイコンを使用していない場合は、Font Awesomeのアイコンライブラリ全体を読み込むと表示速度が遅くなってしまいます。

3. アイコンシステムを埋め込む

3.png

アイコンシステムを作成したら、次にホームページにアイコンシステムを読み込ませます。
Fontasticを使用している場合は、SVGスプライト用に単一スニペットを生成することができます。
便利なことに、Fontastic上でフォントを入れ替えるなどして更新しても、リンクはそのまま使い続けることができるのです。

コードのスニペットは、通常のアイコンフォントと同じようにheadタグの中に埋め込みます。

4. CSSにアイコン表示用のプロパティを追加

6a26e8aa.6.jpg

アイコンが正しいサイズで表示されるように、CSSに下記のようなコードを追加します。

[class^="icon-"], [class*=" icon-"]{
　　height: 32px;
　　width: 32px;
　　display: inline-block;
　　fill: currentColor;
}

heightとwidthプロパティを指定するのは、デフォルトのアイコンサイズを制御するためです。
サイズを調整するには、値を調整するだけです。
アイコンの色を変更するには、fillプロパティを使用します。
currentColorを指定すると、親要素の色の値を引き継ぎます。

5. アイコンを使用する

あとは、*「ICONS REFERENCE」*にあるアイコンをコピー＆ペーストすれば完了です。
Fontasticでは、svgタグが表示されるので、そのまま貼り付ければうまく表示されるはずです。

まとめ

SVGでアイコンを使用すれば、アンチエイリアス不要で美しいアイコンを表示することができます。
また、CSSでうまく制御すれば、CSSアニメーションを実装することもできるなど、さまざまな可能性があります。

ブラウザのサポート状況を見ても、SVGは一般的になりつつあります。
ぜひ、便利なツールを使用しながら、オリジナルのアイコンシステムを作成してみてください。