第08回 SVG gとsymbolとdefsの実践編

はじめに

第07回 SVG gとsymbolとdefsで、要素の違いを仕様面から調べたため、今回はコードを書いて確認したいと思います。
仕様面からの調査と違いを確認するため、仕様上想定されていない記載の方法をしますが、比較のためとご理解ください。

今回実施する内容

gとsymbolとdefsについて、第07回の内容をベースに具体的にコードを書いて確認します。

ソースコード(Git Hub)

環境

OS: Windows 11 JP (64bit)
Microsoft Edge: バージョン 140.0.3485.66 (公式ビルド) (64 ビット)

参考

なし

用語

なし

1. 単純に要素で囲ってみる

menu.htmlからimage要素を使用して、以下のようにSVGファイルを呼び出します。

<img src="group.svg" width="200" height="200"/>

SVGファイルの中では、以下のように、g、symbol、および、defs要素の中に、円を描くcircleの要素を描いたときの画面表示を確認します。

<g id="myGroup">
    <circle cx="100" cy="100" r="96" fill="none" stroke-width="1" stroke="#000" />
</g>

g	symbol	defs
	表示なし	表示なし

• gだけ円が表示され、それ以外は表示されませんでした。
• symbolはuseを使用しないと参照できませんし、defsは「never-rendered element」なため、この結果は想定通りです。

2. use要素で呼び出す

menu.htmlからuse要素を使用して、以下のようにSVGファイルを呼び出します。

<svg width="200" height="200">
    <use xlink:href="group.svg#myGroup"></use>
</svg>

SVGファイルの中では、以下のように、g、symbol、および、defs要素の中に、円を描くcircleの要素を描いたときの画面表示を確認します。

<g id="myGroup">
    <circle cx="100" cy="100" r="96" fill="none" stroke-width="1" stroke="#000" />
</g>

g	symbol	defs
		表示なし

• g、および、symbolが円が表示され、defsは表示されませんでした。
• symbolはuseを使用したことで表示されました。
• defsは「never-rendered element」なため、この結果は想定通りです。

3. defsで円を表示させる

defsは「never-rendered element」なため、defsの配下にsymbol要素を設定します。

<defs>
    <symbol id="myGroup">
        <circle cx="100" cy="100" r="96" fill="none" stroke-width="1" stroke="#000" />
    </symbol>
</defs>

defsの下にsymbolを設定して、それを参照させることで表示できました。
あたりまですが想定通りです。
defsは定義箇所とわかりやすく記載するためのものと理解しています。
この後4以降で試していく例では、defsは割愛します。

g

4. viewBoxを設定してみる

menu.htmlからuse要素を使用して、SVGファイルを呼び出します。これは「2. use要素で呼び出す」と同じです。
SVGファイルの中では、以下のように、g、および、symbol要素にviewBoxを設定しつつ、円を描くcircleの要素を描いたときの画面表示を確認します。

<g id="myGroup" viewBox="0 0 200 200">
    <circle cx="100" cy="100" r="96" fill="none" stroke-width="1" stroke="#000" />
</g>

g	symbol

• g、symbolともに同じように出力されました。
• gは、viewBoxはサポートされていませんが、設定したとしても画面表示はされるようです。
• gでviewBoxがサポートされていないことを確認するために、5で別の例を試します。

5. viewBoxを設定してみる（gがviewBoxをサポートしないことの確認）

menu.htmlからuse要素を使用して、SVGファイルを呼び出します。これは「2. use要素で呼び出す」と同じです。
SVGファイルの中では、以下のように、g、および、symbol要素にviewBoxを設定しつつ、円を描くcircleの要素を描いたときの画面表示を確認します。
なお、viewBox=0 0 200 200からviewBox=0 0 100 100に変更します。

<g id="myGroup" viewBox="0 0 100 100">
    <circle cx="100" cy="100" r="96" fill="none" stroke-width="1" stroke="#000" />
</g>

g	symbol

• gは、viewBoxを変更しても、画面表示は変わりませんでした。
• symbolは、円の1/4部分だけが、画面表示されました。
• gは、viewBoxの設定をしても無効であり、symbolは、viewBoxの設定に従うことが確認できました。想定通りです。

このあと、preserveAspectRatioでも比較しようかと思いましたが、gで使用できないことはもうあきらかなため、ここまでとします。

おわりに

gとsymbol、および、defsの動作の違いについて、具体的にソースを書いて確認しました。
もともと違いがよくわからず困っており、ネット情報もみていました。しかし、しっくりきませんでした。
今回具体的にソースを書くことで、違いが実感できました。
でも、viewBoxの使い方は結構面倒で、こちらの使いこなしもまたひとつ理解するためにもっと勉強していかないといけないなと思いました。