2018年10月1日(月)

SVG vs アイコンフォント Webサイトのアイコンにはどちらを使うべき？

• 0
• 2
• 1
• 6

グラフィカルなアイコンは、ほとんどすべてのウェブサイトやアプリで重要なコンポーネントです。アイコンのサイズは一般的に小さいものの、Webアイコンのフォーマットを選択することは決して簡単な決断ではありません。標準的な画像フォーマットの他に、Web開発者には2つの主要なオプションがあります。すなわちSVGとアイコンフォントです。どちらを使うべきなのでしょうか。パフォーマンス、柔軟性、そしてアクセシビリティの観点から2つのフォーマットを比較してみましょう。

Webアイコンの進化

CSSが出現するより以前には、Webアイコンは画像でなければなりませんでした。画像ファイルは大きいので、Web開発者は常に小さなアイコンを表示するための代替手段を探してきました。たとえば、CSSスプライトを使用すると、開発者はすべてのアイコンを1つの画像ファイルに保存できますが、アクセシビリティ上の問題により、2012年頃にアイコンフォントが登場してからは、魅力的ではなくなったのです。ところが、さらに最近になってスケーラブルベクター画像、すなわちSVGをWebアイコンとして使用する開発者が増えてきているのです。

アイコンフォントとは何か

アイコンフォントは、CSSで変更ができるテキストファイルです。したがって、ラスターイメージよ...