SVGアイコンとは｜HTMLへの埋め込み方法・PNG・アイコンフォントとの比較

SVG（Scalable Vector Graphics） は、ベクター形式の画像フォーマットです。拡大・縮小しても画質が劣化しないため、Webサイトのアイコン・ロゴ・イラストに広く使われています。

SVGの特徴

解像度に依存しない

JPEGやPNGはピクセルの集まりで構成されているため、拡大すると荒くなります。SVGは「点と線の数式」で図形を表現するため、どんなサイズに拡大しても綺麗に表示されます。

Retinaディスプレイや4K画面など高解像度環境でも鮮明に表示できる点がSVGが普及した大きな理由です。

ファイルサイズが小さい

シンプルなアイコンであれば数百バイト〜数KBで収まります。同じ画像のPNGと比べると大幅に小さくなることが多く、ページの読み込み速度に貢献します。

CSSで色・サイズを変更できる

SVGはHTMLと同様のXML形式で記述されており、CSSで見た目を変更できます。アイコンの色をホバーで変えたり、テーマカラーに合わせて動的に変えたりすることが容易です。

SVGのHTML埋め込み方法

インラインSVG（推奨）

SVGコードをHTMLに直接埋め込む方法です。CSSやJavaScriptで制御しやすく、HTTPリクエストが増えません。

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="12" cy="12" r="10"/>
  <line x1="12" y1="8" x2="12" y2="16"/>
</svg>

.icon-button {
  color: #017387;  /* この色がアイコンにも適用される */
}

<img src="/icons/check.svg" alt="完了" width="24" height="24">

CSS background-image で使う

.icon-check {
  background-image: url('/icons/check.svg');
  background-size: contain;
  width: 24px;
  height: 24px;
}

PNG・アイコンフォントとの比較

アイコンフォント（Font Awesomeなど）は数百〜数千のアイコンをフォントとして一括読み込みするため、実際に使うアイコンが少ない場合は不要なファイルを大量に読み込む非効率が生じます。SVGは必要なアイコンだけを読み込むため、パフォーマンス面で有利です。

viewBoxとサイズ指定

SVGには viewBox 属性と width/height 属性があります。

<svg viewBox="0 0 24 24" width="48" height="48">

CSSでサイズを変えたい場合はHTMLの width/height を省略し、CSSで制御するのが一般的です。

.icon {
  width: 1.5rem;
  height: 1.5rem;
}

アイコンが意味を持つ場合（ボタンのラベルとして使うなど）は、スクリーンリーダー向けにテキストを追加します。

<!-- インラインSVGでの対応 -->
<svg aria-label="閉じる" role="img" viewBox="0 0 24 24">
  <title>閉じる</title>
  <!-- パスデータ -->
</svg>

<!-- 装飾目的のアイコン（読み上げ不要）-->
<svg aria-hidden="true" viewBox="0 0 24 24">
  <!-- パスデータ -->
</svg>