SVGスプライト vs アイコンフォント：どちらを選ぶべきか

SVGスプライト vs アイコンフォント

長年にわたり、Font AwesomeのようなアイコンフォントがWebアイコン配信を支配していました。数百のグリフを1つのフォントファイルにまとめ、CSSクラスでアイコンを挿入できました。しかし、SVGスプライトがアイコンフォントに代わる推奨アプローチとなっています。その理由を説明します。

レンダリング品質

アイコンフォントはブラウザによってテキストとしてレンダリングされるため、フォントのアンチエイリアシングアルゴリズムの影響を受けます。一部のシステム、特にClearTypeを使用するWindowsでは、アイコンがぼやけたり、不均一になったり、ずれたりすることがあります。SVGスプライトは、すべてのサイズとプラットフォームでピクセルパーフェクトな精度でベクターグラフィックスとしてレンダリングされます。

マルチカラーサポート

アイコンフォントはテキスト文字として扱われるため、1グリフあたり1色に制限されます。CSSのcolorでのみ色を変更できます。SVGスプライトは1つのアイコン内で無制限の色、グラデーション、アニメーションをサポートします。

アクセシビリティ

スクリーンリーダーはアイコンフォントのグリフをランダムな文字として読み上げるか、完全にスキップすることがあり、正しく機能させるには追加のARIA属性が必要です。SVGアイコンはスクリーンリーダーがネイティブに理解する<title>と<desc>要素を含めることができ、初期状態でより良いアクセシビリティを提供します。

<!-- アイコンフォント（追加のARIAが必要） -->
<i class="fa fa-home" aria-hidden="true"></i>
<span class="sr-only">Home</span>

<!-- SVGスプライト（デフォルトでアクセシブル） -->
<svg role="img" aria-labelledby="home-title">
  <title id="home-title">Home</title>
  <use href="#icon-home"/>
</svg>

ファイルサイズ

小規模なアイコンセット（50個未満）の場合、SVGスプライトは完全なアイコンフォントよりも大幅に小さくなります。アイコンフォントは一握りしか使わなくてもセット内のすべてのグリフを含みます。SVGスプライトでは実際に使用するアイコンのみを含めます。

CSS制御

SVGスプライトはアイコンの個々の部分に対してfill、stroke、stroke-width、opacity、CSS transformをサポートします。アイコンフォントはテキストに適用されるプロパティのみサポートします：color、font-size、text-shadow。

移行パス

現在アイコンフォントを使用している場合、SVGスプライトへの移行は簡単です：各アイコンをSVGファイルとしてエクスポートし、スプライトに結合し、<i class="fa fa-x">を<svg><use href="#icon-x"/></svg>に置き換えます。