グラフィカルなアイコンは、ほとんどすべてのウェブサイトやアプリで重要なコンポーネントです。アイコンのサイズは一般的に小さいものの、Webアイコンのフォーマットを選択することは決して簡単な決断ではありません。標準的な画像フォーマットの他に、Web開発者には2つの主要なオプションがあります。すなわちSVGとアイコンフォントです。どちらを使うべきなのでしょうか。パフォーマンス、柔軟性、そしてアクセシビリティの観点から2つのフォーマットを比較してみましょう。
Webアイコンの進化
CSSが出現するより以前には、Webアイコンは画像でなければなりませんでした。画像ファイルは大きいので、Web開発者は常に小さなアイコンを表示するための代替手段を探してきました。たとえば、CSSスプライトを使用すると、開発者はすべてのアイコンを1つの画像ファイルに保存できますが、アクセシビリティ上の問題により、2012年頃にアイコンフォントが登場してからは、魅力的ではなくなったのです。ところが、さらに最近になってスケーラブルベクター画像、すなわちSVGをWebアイコンとして使用する開発者が増えてきているのです。
アイコンフォントとは何か
アイコンフォントは、CSSで変更ができるテキストファイルです。したがって、ラスターイメージよりもはるかに優れたスケーラビリティを誇ります。そのため、アイコンフォントのサイズを変更しても、その品質が低下することは無いのです。色の変更や影の追加は、テキストの編集と同じくらい簡単です。皆さんのウェブサイトで使用できる無料のアイコンフォントを簡単に見つけることができますし、自分でフォントをデザインすることもできます。アイコンフォントの使用の欠点の1つは、ほとんどのフォントセットの場合おそらく使用しないフォントも含まれているということで、これは無駄にスペースを占有しまうことになるのです。
以前のCSSスプライトと同様に、開発者はアイコンフォントを好まなくなり始めています。アイコンフォントを正しく表示するには、ブラウザがサーバーに余計な要求を行う必要があります。これにより、フォントライブラリがまだ読み込まれている間、FOITや見えないテキストのフラッシュが発生する可能性があります。ブラウザがフォントを解釈できない場合は、空の文字が表示されます。このようなシナリオはプロが作るWebサイトでは受け入れられないため、開発者の多くは現在SVGに目を向け始めています。
SVGとは何か
SVG（Scalable Vector Graphics）を使用すると、ベクター画像をブラウザに表示できます。 SVGは、Webアイコンやアニメーションの新しい標準へと急速になりつつあります。優れたスケーラビリティを提供してくれるだけでなく、多くの場合、アイコンフォントよりも迅速かつ確実にレンダリングされるのです。ベクター画像は完全にコードから成るため、大きな外部ファイルからインポートする必要はありません。またSVGは、広く使われているJPGやPNG画像だけでなく、ほとんどのアイコンフォントライブラリよりもサイズがはるかに小さくなります。
SVGを最大限に活用するには、少しだけ学習曲線を乗り越えなければならないかもしれませんが、その価値はあります。
SVGのしくみ
幅と高さの属性を使ってHTMLの標準的<img>要素のように寸法を調整してSVGを使用することは可能ですが、この方法ではSVGをカスタマイズする余地がいくらか制限を受けることになります。
HTML内からSVGアイコンを直接カスタマイズするには、コードをHTMLドキュメントに直接貼り付けてSVGをインライン化する必要があります。次に、CSSを使用して色を変更したり、フィルタを適用したりすることができます。 SVGアイコンの例を以下に示します。
<svg version="1.1"
baseProfile="full"
width="300" height="200"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="#3686be" />
<circle cx="150" cy="100" r="80" fill="white" />
<text x="150" y="115" font-size="35" text-anchor="middle" fill="#3a3a3a">KeyCDN</text>
</svg>
KeyCDN
上記のコードは、Mozillaにインスパイアされたもので、ブラウザに次のようなグラフィックを表示してくれます。
一見SVGコードは威圧的に見えるかもしれませんが、SVGアイコンのデザインとコントロールは拍子抜けするほど簡単です。実際に、Adobe Illustratorのようなプログラムを使用して、独自のベクターグラフィックを作成してアイコンとして使用することができます。それらをSVGファイルとして保存することや、Illustratorインターフェイス内でコードを生成することができます。 Google Docsから線画をSVGファイルとしてエクスポートすることもできます。
アイコンフォントはまだ使えるか
アイコンフォントは時代遅れという訳ではありません。アイコンフォントは、必ずしも最も効率的で信頼性の高い選択肢ではないかもしれませんが、比較的シンプルで実装が容易なため、多くの開発者が引き続き使用しています。使用されているアイコンの数によっては、古いプロジェクトのフォントをすべてSVGアイコンに切り替える価値は無いかもしれません。しかし、SVGは次世代型の間違いのない手段なので、将来的にはSVGも使うことで今後も快適に過ごすことができるでしょう。
SVGとアイコンフォントの比較
どのアイコン形式を使うかを決定する手助けとなるように、2つの選択肢を様々な観点から比較してみましょう。
1.サイズ
スタイルを追加するためにSVGをインライン化すると、サイズが急激に増加し、コードがかなり煩雑になる可能性があります。また、インラインSVGコードはユーザーのブラウザによってキャッシュされないことにも注意しましょう。一方で、外部SVGファイルはキャッシュすることができます。 1つのページに多くのアイコンがある場合、アイコンフォントはインラインSVGよりもスムーズなユーザーエクスペリエンスを提供できます。もちろん、既成のアイコンのフォントセットを使用している場合は、おそらく未使用のアイコンがリソースを浪費することになるでしょう。
ここで注目すべきことは、10個の最適化されたSVGアイコンが、アイコンライブラリ全体よりもはるかに小さいことです。ただし、必要なアイコンだけを備えた独自のカスタムアイコンライブラリを作成した場合には、アイコンライブラリのフォントの方がサイズが小さくなります。
2.パフォーマンス
アイコンフォントはキャッシュ可能なため、ブラウザから直接読み込むことができます。しかし、余計なHTTP要求が発生するという欠点があります。一方、SVGアイコンをインライン展開する場合、新たにHTTPリクエストが必要になることはありませんが、ブラウザはキャッシュできません。
ただし、SVGファイルを外部ファイルに含めて、ブラウザでキャッシュすることが可能にすることはできます。繰り返しになりますが、速度の違いは、皆さんのアイコンフォントあるいは SVGの大きさに依存します。パフォーマンステストを実行し、どれが高速にロードされているかを調べてみましょう。
3.柔軟性
どちらのフォーマットもCSSを使ってスタイルを設定できますが、インラインSVGは象形文字や多色アイコンなど、はるかに多くのオプションを提供しています。アニメーションWebアイコンでさえ可能です。
4.ブラウザのサポート
どちらの形式のアイコンを使うにしても、古いブラウザとの互換性を持たせるためにいくつかの手順を経る必要があります。歴史が長いために、アイコンフォントはより広くサポートされています。IE 6以上を使用していれば誰もが、皆さんのアイコンフォントを見ることができるはずです。 SVGを使用する場合は、IE8またはそれより古いバージョンをサポートするためにJS polyfillを含めるのが良いでしょう。
しかし、2018年現在、ほとんどのユーザーが古いブラウザのバージョンの使用を止めているために、アイコンフォントを選択するかSVGを選択するかにかかわらず、これは大した問題ではありません。 最新のブラウザのなかでSVGをサポートしていないのは、SVGファイル（高さ、幅などの規則が定められています）を適切に拡大できないIEとEdgeです。
5.スケーラビリティ
SVGとアイコンフォントは両方ともベクターベースですが、ブラウザはアイコンフォントをテキストとして解釈します。つまり、アンチエイリアスの対象となります。したがって、SVGはアイコンフォントよりも少しだけシャープに見える傾向があります。
6.配置
アイコンフォントは疑似要素を介して挿入する必要があるため、フォントアイコンの配置には手こずるかもしれません。擬似要素と実際の絵文字が完全に一致するようにするには、行の高さ、垂直整列、文字の間隔をそのほかの要素とともに考慮する必要があります。 SVGの場合は、サイズを設定するだけで済みます。
7.アクセシビリティ
SVGには、アイコンフォントとは異なり、言葉の意味の情報が組み込まれているため、スクリーンリーダーがフォントを読めるようにするための回避策は必要ありません。
SVGアイコンツールとリソース
Mozillaの開発者ネットワークには、インラインCSSでアイコンのスタイル設定を行う方法を説明する非常に網羅的なSVGチュートリアルがあります。 Adobe Illustratorに加えて、SVGアイコンの実装に役立つツールがいくつかあります。 IcoMoonは、既成SVGやフォントアイコン用の優れたリソースです.IcoMoonアプリケーションをつかって、自分でアイコンを作成することも出来ます。皆さんが何かオープンソースを探しているなら、InkscapeはSVGファイルをエクスポートしてくれる無料のベクター描画プログラムです。 Convertioのようなツールを使えば、他の画像フォーマットをSVGに変換することができます。
IllustratorやInkscapeのようなプログラムでは、エクスポートされるSVGファイルに余分な情報が埋め込まれることがあることに注意しましょう。そのため、SVGOやSVG Minifierなどの最適化ツールを使用してSVGアイコンを処理した後で、ウェブサイトに追加する必要があります。
上記のリソースの他に、有償または無料のサービスとして高品質のベクターを提供するさまざまなアイコン関連のWebサイトがあります。
まとめ
アイコンフォントがSVGより優れているかどうか、またその逆であるかどうか、コミュニティでは依然議論が続いています。 事実は、どちらが良いかは、場合によっては、使用されている状況によって異なるということです。
しかし、SVGが望ましい場合は多いです。 SVGはアイコンフォントよりもはるかにスケーラブルで、より良いユーザーエクスペリエンスを提供し、すべての主要なブラウザでサポートされています。 トップレベルのWebパフォーマンス専門家の幾人かは、アイコンフォントからSVGに移行することは2018年において欠かせないことであると言っています。
※本記事は、Icon Fonts vs SVGs – Which One Should You Use In 2018?を翻訳・再構成したものです。
▼こちらの記事もおすすめです！
おすすめ新着記事
おすすめタグ