SVGの<use>タグは、すでに定義したシェイプ要素を複製する際に使う。使い方はシンプルで、複製したい要素のidを<use>タグのhrefに指定するだけでいい。

基本的な書き方

まず元となるタグ、ないしタグのグループを作り、id属性に任意の値を指定する。

そのうえで、<use>タグのhref属性に先のidを指定する。このとき、先頭に#をつけるのを忘れてはならない。

例えば以下のように書く。

html
<svg width="300" height="300">
  <!--まず複製したい要素を作る-->
  <g id="nanikore">
    <circle id="omeme" cx="150" cy="100" r="5" fill="black" />
    <polygon
      id="rinkaku"
      points="150,50 180,120 120,120 195,175 105,175 150,50"
      stroke="black"
      stroke-width="2"
      fill="none"
    />
  </g>
  <!--ほんで複製する-->
  <use href="#nanikore" x="100" y="100" />
  <use href="#omeme" x="-100" y="0" />
  <use href="#rinkaku" x="100" y="-60" transform="rotate(45)" />
</svg>

指定できる属性

<use>タグには、以下のような属性を指定できる。

属性名 概要
href 複製する要素、あるいはグループ要素のid。
x 複製する要素を配置するx座標。原点からではなく、参照元からの相対座標なので注意。
y 同じくy座標。こっちも相対座標なので注意。
width 複製する要素の幅。参照する要素がviewBox属性を持つ場合（svgやsymbolの場合）にのみ有効。
height 同じく高さ。こちらもsvgやsymbolの場合にのみ有効。

このほか、おおよそのグローバル属性（みんなが持ってる属性）も指定できる。ごちゃごちゃするので記載は割愛する。一覧はリンク先参照。

属性値の上書きはできない

おおよその属性値は指定できるが、参照元に指定されている属性値の上書きはできない。CSSと違い、参照元の指定が優先される。

html
<svg width="300" height="300">
  <g id="nanikore">
    <circle id="omeme" cx="150" cy="100" r="5" fill="black" />
    <polygon
      id="rinkaku"
      points="150,50 180,120 120,120 195,175 105,175 150,50"
      stroke="black"
      stroke-width="2"
      fill="none"
    />
  </g>
  <!--参照元に指定されてる属性（fill）は適用され、指定されていない属性（stroke-dasharray）は適用される。-->
  <use href="#nanikore" x="100" y="100" fill="gold" stroke-dasharray="3 3" />
</svg>

使いどころ

<use>タグは、見た目に関連するSVGタグを複製したい時に使える。そのままだ。見出しを立てるほどのトピックではなかったかもしれない。

注意点としては、<defs>や<title>、<desc>など、ドキュメント自体の情報をマークアップするタグには使えない。

また、<animate>タグは見た目に関連しているように思えるが、これも複製できない。タグごと複製することはできる。

html
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
  <circle id="circleWithAnime" cx="150" cy="150" r="10" fill="gold">
    <animate id="anime" attributeName="cy" from="10" to="150" dur="2s" repeatCount="indefinite" />
  </circle>
  <use href="#circleWithAnime" x="140" y="0" />
  <circle cx="10" cy="10" r="10" fill="gold">
    <use href="#anime" />
  </circle>
</svg>

参考資料