【SVG】グループ化と画像読み込み
g
<g>の子要素を 1 つのまとまりとしてグループ化します。
<svg width="100" height="100">
<g fill="blue" stroke="black">
<desc>グループ化したよ</desc>
<circle cx="20" cy="20" r="10" />
<line x1="35" y1="5" x2="5" y2="35" />
</g>
</svg><g>で設定した属性は、すべての子要素に反映されます。
そのため、同じスタイルをまとめて指定したい場合に使用できます。
<g>には<desc>を設定でき、アプリケーションによってはグループごとにその内容を読み取ってくれます。
use
<use>はid属性で名前付けした図形をhref属性を用いることで再利用することができます。
SVG 2 では
hrefではなくxlink:hrefで参照していましたが、現在は非推奨となっています。
<svg width="100" height="100">
<circle id="circle" cx="20" cy="20" r="10" stroke="black" />
<use href="#circle" x="30" y="30" fill="blue" />
<use href="#circle" x="10" y="60" fill="red" stroke="white" />
</svg><use>では、参照した値のx、y、width、height属性を上書きします。
座標は、元の図形の位置を(0, 0)として考えます。
その他の属性は、設定していないものであれば設定可能です。
上の例では、元の図形にstrokeを設定しているため<use>で設定しても上書きされません。
fillは元の図形で設定していないため、<use>で設定可能です。
<g>にid属性を設定すれば、図形をまとめて参照することができます。
<svg width="100" height="100">
<g id="figs1" fill="blue" stroke="black">
<circle cx="20" cy="20" r="10" />
<line x1="35" y1="5" x2="5" y2="35" />
</g>
<use href="#figs1" x="40" y="40" />
</svg>defs
<use>の例では、参照元の図形も表示されたままでした。
これを非表示にする場合に<defs>を使用します。
基本的に再利用する図形には、<defs>で囲むことが推奨されています。
<svg width="100" height="100">
<defs>
<circle id="circle" cx="20" cy="20" r="10" stroke="black" />
</defs>
<use href="#circle" x="30" y="30" fill="blue" />
<use href="#circle" x="10" y="60" fill="red" stroke="white" />
</svg>symbol
<symbol>は、<g>と同じくグループ化に使用しますが、<defs>を使用せずとも<symbol>の内容は表示されません。
さらに<g>と異なる点は、<symbol>だけでviewBoxとpreserveAspectRatio属性を持ちます。
そのため実際に表示する大きさは、<use>のwidthとheight属性で設定します。
viewBoxとpreserveAspectRatioについてわからない方は、こちらの記事を参照してください。
<svg width="100" height="100">
<symbol id="figs2" stroke="black" viewBox="0 0 40 40">
<circle cx="20" cy="20" r="10" />
<line x1="35" y1="5" x2="5" y2="35" />
</symbol>
<use href="#figs2" x="0" y="0" width="40" height="40" fill="blue" />
<use href="#figs2" x="20" y="20" width="80" height="80" fill="red" />
</svg>image
<image>は、他の SVG ファイルをhref属性によって読み込みます。
属性として位置(x, y)と大きさ（width、height）を設定します。
<svg width="100" height="100" style="background: #ddd">
<image href="<url>" x="10" y="10" width="30" height="30" />
<image href="<url>" x="40" y="40" width="60" height="60" />
</svg>