アイコンにはSVGとPNG、どちらを使うべき?

アイコンはほとんどの場合、シンプルな単色の図形であり、これはまさにベクターパスが効率よく表現できる対象です。SVGアイコンは16pxで表示しても160pxで表示しても鮮明なままで、レスポンシブレイアウトが必要とするあらゆるサイズを、解像度ごとに個別のPNGを書き出すことなく、1つのファイルでカバーできます。

SVGの塗りやストロークは単なる属性であるため、ホバー時の状態やダークモードに合わせて、2枚目の画像ファイルを用意することなくCSSでアイコンの色を変更できます。PNGアイコンの色はピクセルに焼き込まれているため、別の色にするには完全に別のファイルを書き出す必要があります。

「アイコン」と呼ばれていても、実際には小さな写真や、グラデーション・影・質感を含んだリアルなアプリアイコンのように、非常に細かいディテールを持つ画像である場合、PNGの方がベクタートレースよりも忠実にその質感を再現できます。とはいえ、純粋にグラフィカルな単色アイコンであれば、SVGの方がほぼ常に適しています。既存のPNGアイコンセットから始める場合は、SVGに変換して両方のフォーマットを使えるようにしておくこともできます。