フォントアイコンの代わりにSVGアイコンを使う方法

Prototyping: From UX to Front Endに掲載された記事「Align SVG Icons to Text and Say Goodbye to Font Icons」が、フォントアイコンの代わりにSVGアイコンを使う方法を紹介した。CSSと併用しながらどのようにSVGアイコンを使用するかが説明されている。

Apple製品のRetinaディスプレイのような高画素密度ディスプレイの登場で、この数年、どのようにデータを綺麗にレンダリングさせるかが、Webデザインの重要なトピックとして話題になってきた。当初、ベクタデータであるフォントアイコンをそうした場合に利用する方法に話題が集まったが、レンダリングが綺麗になる反面、データそのものの変更に手間がかかることや、色の設定などの自由度が低いことなどが指摘されてきた。

SVGアイコンを使う方法はフォントアイコンを使う場合のように綺麗にレンダリングができるうえ、データの変更や色づけが簡単という特徴がある。すでに主要ブラウザはこうした機能を提供している。サポートしていない古いブラウザのシェアは減り続けており、SVGアイコンを使う方法は今後利用されるシーンが増える可能性がある。