svg symbol defs path

SVGの <defs>（定義）、<symbol>（シンボル）、<path>（パス）は、アイコンや複雑な図形を1箇所で定義し、Webページ内の複数の場所で効率的に使い回す（再利用する）ための強力な仕組みです。 [1, 2, 3]

これらを組み合わせた最も一般的で標準的なコード例と、それぞれの要素の役割をわかりやすく解説します。

📋 基本的な実装コード例
🔍 各要素の役割と関係性
💡 この手法を使うメリット

📋 基本的な実装コード例

まずは、HTMLやSVGファイル内に定義用（パーツ置き場）のSVGを用意し、それを呼び出し用の<use>タグで表示させます。 [1, 3]

<!-- 1. 定義用のSVG（画面には直接表示されません） -->
<svg style="display: none;">
  <defs>
    <!-- 再利用したい図形をsymbolとして定義 -->
    <symbol id="icon-star" viewBox="0 0 24 24">
      <!-- 複雑な形状を描くpath -->
      <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
    </symbol>
  </defs>
</svg>

<!-- 2. 呼び出し用のSVG（表示したい場所に何個でも配置可能） -->
<svg class="my-icon" width="32" height="32" viewBox="0 0 24 24">
  <use href="#icon-star" />
</svg>

<svg class="my-icon-large" width="64" height="64" viewBox="0 0 24 24" style="fill: gold;">
  <use href="#icon-star" />
</svg>

🔍 各要素の役割と関係性

それぞれのタグには、テンプレートを効率よく動かすための明確な役割があります。

要素	役割	主な特徴
`<defs>`	オブジェクトの格納庫（定義）	このタグで囲まれた要素はブラウザ上に直接描画（表示）されません。後で再利用するための「データ」としてブラウザに記憶させます。
`<symbol>`	再利用可能なテンプレート（構造）	独自の `viewBox` 属性（縦横比や仮想的な座標空間）を持つことができます。これにより、呼び出し側（`<use>`）でサイズ（`width` / `height`）を変更した際、綺麗に伸縮してくれます。必ず固有の `id` を付与します。
`<path>`	具体的な図形の形状（描画）	直線や曲線、複雑なシルエットを描くための最も万能な要素です。`d` 属性の中に座標データ（例: `M12 17...`）が格納されています。
`<use>`	インスタンスの呼び出し（配置）	`href="#id名"` を指定することで、`<defs>` 内の `<symbol>` をその場に複製して表示します。

💡 この手法を使うメリット

コードの軽量化（共通化）
同じアイコン（例：星マーク、矢印、SNSロゴなど）をページ内に何個も並べる場合、長い path のコードを何度も書く必要がなくなります。結果としてHTMLのコード量を大幅に削減できます。 [3]
CSSでの色・サイズ変更が簡単
呼び出し側の <svg> や CSS に対して width、height、fill（塗りつぶしの色）を指定するだけで、個別に見た目を調整できます。
- ※定義側の <path> に直接 fill="black" などを書き込んでしまうと、呼び出し側での色変更が効かなくなるため、色は未指定にするか、fill="currentColor" を指定しておくのがおすすめです。 [1, 3, 4]