<use>要素によるSVGスプライト

SVG <use>要素

<use>要素はSVGスプライトを実用的にするメカニズムです。ドキュメント内または外部ファイルの他の場所で定義された<symbol>のレンダリングインスタンスを作成します。<use>の動作を理解することが効果的なスプライト使用に不可欠です。

基本構文

<svg width="24" height="24" aria-hidden="true">
  <use href="#icon-name"/>
</svg>

href属性は現在のドキュメント内の<symbol>のidを指します。外側の<svg>タグがレンダリング寸法を制御します。

href vs xlink:href

歴史的に、SVGはXLink名前空間のxlink:hrefを使用していました。モダンブラウザ（2018年頃以降のすべてのエバーグリーンブラウザ）はよりシンプルなhref属性を直接サポートしています。ただし、最大限の互換性のために両方が見られることがあります：

<!-- モダン（推奨） -->
<use href="#icon-name"/>

<!-- レガシー互換 -->
<use xlink:href="#icon-name"/>

<!-- 両方（万全を期す） -->
<use href="#icon-name" xlink:href="#icon-name"/>

サイジングとスケーリング

<use>要素は参照された<symbol>からviewBoxを継承します。外側の<svg>のwidthとheightがレンダリングサイズを決定します。CSSでもサイジングを制御できます：

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

<svg class="icon"><use href="#icon-name"/></svg>

スタイル継承

外側の<svg>または<use>要素に適用されたスタイルはクローンされたコンテンツにカスケードしますが、重要な注意点があります：<use>はシャドウDOMクローンを作成します。これは以下を意味します：

• CSS currentColorは動作する — シンボルがfill="currentColor"を使用している場合、親要素にcolorを設定するとアイコンの色を制御できます
• 直接CSSセレクタは貫通しない — 外部CSSから<use>参照内の個別のパスをターゲットにすることはできません
• シンボルのプレゼンテーション属性が優先 — パスにfill="#ff0000"がハードコードされている場合、CSSは<use>を通じてそれをオーバーライドできません

これが、スプライトシステムではソースSVGからfillとstroke属性を除去することが非常に重要な理由です。

外部ファイル参照

別のSVGファイルからシンボルを参照できます：

<svg width="24" height="24">
  <use href="sprites.svg#icon-name"/>
</svg>

これによりスプライトファイルのブラウザキャッシュが可能になります。外部参照はfile://プロトコルや一部のIE/Edgeレガシーブラウザでは動作しない場合があることに注意してください。