SVGの<g>タグは、複数の要素をまとめ、あたかも1つの要素であるかのように配置やスタイリング、アニメーション等を行うための要素である。

何を隠そう（ｼﾞｷｼﾞｷｿｳｿｳ）、<g>タグの’g’は、’group’の’g’なのだ。

基本的な使い方

<g>タグは、HTMLの<div>タグや<section>タグのように、グループ化したい要素をラップする形で使う。

グローバル属性は一通り備えているが、xやyなど固有の属性値はないので、配置にはtransformを使う。

また、<g>タグの子要素で図形タグを使う場合、その座標は実質的に<g>タグの左肩からの相対座標となる。

使い方の注意点としてはそのくらいである。

html
<!-- <g>タグを使う -->
<svg
  viewBox="0 0 200 200"
  width="200"
  height="200"
  style="background-color:salmon;"
>
  <g transform="rotate(30)">
    <rect x="150" y="-50" width="35" height="35" fill="steelblue" />
    <rect x="50" y="25" width="25" height="25" fill="pink" />
    <rect x="100" y="50" width="50" height="50" fill="gold" />
  </g>
</svg>

<!-- <g>タグを使わない -->
<svg
  viewBox="0 0 200 200"
  width="200"
  height="200"
  style="background-color:salmon;"
>
  <rect
    x="150"
    y="-50"
    width="35"
    height="35"
    fill="steelblue"
    transform="rotate(30)"
  />
  <rect x="50" y="25" width="25" height="25" fill="pink" transform="rotate(30)"/>
  <rect
    x="100"
    y="50"
    width="50"
    height="50"
    fill="gold"
    transform="rotate(30)"
  />
</svg>

このように、複数の要素に同じスタイリングを施す場合、<g>タグを使う場合と使わない場合とでコードの量が大きく変わる。後者の改行が多めなのは、整形ツールのせいで、サギではない。

使いどころ

<g>タグの使いどころとして真っ先に思い浮かぶのは、複数の要素に対するスタイリングである。単純なスタイルでも、量が多いとうんざりする。<g>タグを使って構造化すれば、重複を減らせ、可読性も高まる。

グループ化した要素は1つの要素として扱えるので、グループ同士を任意の順で重ね合わせることも可能だ。

また、<g>タグは入れ子にできる。位置関係の複雑な要素群のそれぞれの座標を調整する際にも役立つ。細かい数値調整は原点を基準に行い、その上で<g>でまとめて任意の場所へ移動すれば効率が良いはずである。

このほか、同タグにイベントリスナを設定することで、グループ単位で何らかのインタラクションを実装することもできる。

箇条書きみたいな文章になってしまったし、全体としてまとめるほどの情報でもなかった気がする。しょんぼりだ。

参考資料