シンボルベースのSVGスプライトを作成する

シンボルベースのSVGスプライトを作成する

<symbol>要素はSVGスプライトの構成要素です。直接レンダリングされない再利用可能なグラフィックを定義し、<use>でどこにでもインスタンス化できます。これは<defs>と<g>要素を使用した古いアプローチや、単一のスプライト画像上のCSS背景位置設定とは異なります。

<symbol>の仕組み

<symbol>は独自のviewBoxと座標系を持つグラフィカルテンプレートを定義します。<svg>コンテナ内に存在しますが、単独では視覚的な出力を生成しません：

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-star" viewBox="0 0 24 24">
    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87
             1.18 6.88L12 17.77l-6.18 3.25L7
             14.14 2 9.27l6.91-1.01L12 2z"/>
  </symbol>
  <symbol id="icon-heart" viewBox="0 0 24 24">
    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12
             5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78
             7.78l1.06 1.06L12 21.23l7.78-7.78
             1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
  </symbol>
</svg>

id属性

すべてのシンボルには一意のidが必要です。これは<use href="#id">で使用する参照です。icon-{name}という命名規則がHTML内の他のIDとの競合を避けるのに適しています。一貫性のためにIDは小文字とハイフンを使用します。

viewBox属性

各<symbol>は独自のviewBoxを持つことができ、内部のパスの座標系を定義します。つまり、異なるviewBox（例：0 0 24 24、0 0 16 16、0 0 512 512）を持つ異なるソースのアイコンを組み合わせても、参照時にすべて正しくスケーリングされます。

<use>でシンボルを参照する

シンボルをレンダリングするには、<svg>内で<use>要素を使用します：

<svg width="24" height="24">
  <use href="#icon-star"/>
</svg>

<svg width="48" height="48" class="text-red-500">
  <use href="#icon-heart"/>
</svg>

<use>要素は参照されたシンボルのディープクローンを作成します。外側の<svg>がレンダリングサイズを制御し、シンボルのviewBoxが内部のスケーリングを処理します。

なぜ<defs> + <g>ではないのか？

アイコンを<defs><g id="icon">でラップする古いパターンは機能しますが、重要な制限があります：<g>は独自のviewBoxをサポートしません。外側の<svg>コンテナにviewBoxを設定するか、手動でスケーリングを管理する必要があります。<symbol>はこのユースケース専用に設計されており、推奨されるアプローチです。