【SVG】グループにまとめる:g要素,symbol要素,use要素,defs要素

SVGで図形をまとめて扱いたい場合がでてくると思います。そのようなときは、要素をグループにまとめます。関連する要素は、g要素、symbol要素、use要素、defs要素の4つです。これらについて見ていきます。

g要素

要素をグループにまとめます。色や線の幅などの属性が共通する場合、まとめて指定できます。

<g style="fill:orange">
  <circle cx="100" cy="100" r="50"/>
  <circle cx="125" cy="125" r="50" stroke-width="4" stroke="brown"/>
  <circle cx="150" cy="150" r="50" stroke-width="4" stroke="chocolate"/>
</g>

symbol要素

要素をグループにまとめます。id名を付与して、グループに名前を付けます。symbolで作ったグループは、描画されません。表示するには、use要素でid名を参照します。

<symbol style="fill:orange" id="orange">
  <circle cx="100" cy="100" r="50"/>
  <circle cx="125" cy="125" r="50" stroke-width="4" stroke="brown"/>
  <circle cx="150" cy="150" r="50" stroke-width="4" stroke="chocolate"/>
</symbol>

use要素

symbolで作ったグループをid名で参照することで、描画します。以下のように指定します。

<use href="#orange"/>

さらに、x属性、y属性を指定すると、その座標を原点として図形が描画されます。

<use href="#orange"/>
<use href="#orange" x="80" y="0"/>

defs要素

後で再利用する要素をdefs要素内に記述します。コードの可読性のため、defs要素内にまとめることを推奨しています。

<defs>
  <g style="fill:orange" id="orange">
    <circle cx="100" cy="100" r="50"/>
    <circle cx="125" cy="125" r="50" stroke-width="4" stroke="brown"/>
    <circle cx="150" cy="150" r="50" stroke-width="4" stroke="chocolate"/>
  </g>
</defs>

<use href="#orange"/>

参考サイト

• SVG 要素リファレンス - SVG: スケーラブルベクターグラフィック | MDN