第07回 SVG gとsymbolとdefs

はじめに

今回は、g、symbol、および、defsについて確認したいと思います。
仕様をよく読んでいないこともあって、これらの違いがいまいち理解できず、似てるような気がして違いが何かを整理したいと思います。

今回実施する内容

今回は、g、symbol、および、defsについてSVG仕様を確認したいと思います。

ソースコード(Git Hub)

なし

環境

OS: Windows 11 JP (64bit)
Microsoft Edge

参考

Scalable Vector Graphics (SVG) 2

用語

グループ

グラフィック要素と関連して、グルーピングするコンテナー要素。

定義

g、symbol、および、defsとは

gはグループで、グルーピングすることに主眼が置かれたもの
symbolはシンボルで、これを元にして、他で再利用するもの
defsは定義で、図形などを定義するもの
なのだと思いますが、といいつつ、これらが同じような動きをするため、どう使い分けていいのか、よくわからないというのが悩みです。

gの概要

SVG2仕様では、以下の通り。

container element
An element which can have graphics elements and other container elements as child elements. Specifically: ‘a’, ‘clipPath’, ‘defs’, ‘g’, ‘marker’, ‘mask’, ‘pattern’, ‘svg’, ‘switch’, ‘symbol’ and ‘unknown’.

The ‘g’ element is a container element for grouping together related graphics elements.

A group of elements, as well as individual objects, can be given a name using the ‘id’ attribute. Named groups are needed for several purposes such as animation and re-usable objects.

訳してみると、

コンテナー要素
子要素として、グラフィック要素、および、その他のコンテナ要素を持つことができる要素。特に、a、clipPath、defs、g、marker、mask、pattern、svg、switch、symbol、および、unknown。

g要素は、グラフィック要素に関連して一緒にグルーピングするコンテナー要素である。
個々のオブジェクトと同様、要素のグループは、id属性を使用して名前を与えることができる。名づけられたグループはアニメーションや再利用オブジェクトのようないくつかの目的で必要とされる。

なるほど、グループの名の通り、要素をグループでまとめることと、再利用などの目的で使用されることがわかりました。

symbolの概要

SVG2仕様では、以下の通り。

The ‘symbol’ element is used to define graphical templates which can be instantiated by a ‘use’ element but which are not rendered directly.

A ‘symbol’ establishes a nested coordinate system for the graphics it contains. When a symbol is instantiated as the referenced element of a ‘use’ element, it is therefore rendered very similarly to a nested ‘svg’ element.

訳してみると、

symbol要素は、use要素でインスタンス化できるグラフィックテンプレートを定義するために使用される。しかし、直接描写されない。

symbolはsymbolが含むグラフィックの入れ子の座標システムを確立します。シンボルがuse要素の参照要素としてインスタンス化されるとき、シンボルはそのため入れ子のsvg要素に非常に類似して描写される。

defsの概要

SVG2仕様では、以下の通り。

SVG allows a graphical object to be defined for later reuse. To do this, SVG makes extensive use of the URL reference construct [rfc3987]. For example, to fill a rectangle with a linear gradient, a ‘linearGradient’ element may be defined with an ‘id’ property that may be referenced in the value for the rectangle's fill property, as in the following:

<linearGradient id="MyGradient">...</linearGradient>
<rect style="fill:url(#MyGradient)"/>

Some types of element, such as gradients, will not by themselves produce a graphical result. They can therefore be placed anywhere convenient. However, sometimes it is desired to define a graphical object and prevent it from being directly rendered. it is only there to be referenced elsewhere. To do this, and to allow convenient grouping defined content, SVG provides the ‘defs’ element.

It is recommended that, where possible, referenced elements be defined prior to the elements that use them, in document order. Collecting all referenced elements inside of a single ‘defs’ element near the top of the file can make the markup easier to read and understand.

訳してみると、

SVGは後の再利用のために描画オブジェクトを定義することを許可する。このため、SVGはURL参照構成[rfc3987]の広範囲の利用広範囲の利用をする。例えば、rectangleをlinear gradientで満たすために、linearGradient要素はrectangleのfillプロパティの参照として、次のようにidプロパティで定義されうる。

<linearGradient id="MyGradient">...</linearGradient>
<rect style="fill:url(#MyGradient)"/>

gradientのようないくつかのタイプの要素は、それ自身によって描画結果を生成しない。それゆえ、それらはどこでも便利に置かれる。しかし、時々、それはグラフィカルオブジェクトを定義し、直接描画されることから防ぐことを要求される。それはどこかで参照されるだけである。このため、および、便利なグルーピング定義コンテンツを許容するため、SVGはdefs要素を提供する。

可能であれば、参照される要素は、ドキュメント順で、それらを使用する要素の前に定義されることを推奨する。すべての参照される要素をファイルの先頭近くのひとつのdefs要素の中に集めることは、簡単に読み、理解するようにマークアップすることができる。

３つの概要をまとめると

短くまとめてみると、

要素	用途
g	グループ化。
symbol	テンプレート。
defs	テンプレート。より柔軟な参照可能でプロパティも可能。

かな。なるほど、そういわれると少し使い分けが見えて気がしました。

カテゴリー

	g	symbol	defs
Container element	〇	〇	〇
rendarable element	〇	-	-
structural element	〇	〇	〇
never-rendered element	-	-	〇

gは、「rendarable element」で、defsは「never-rendered element」で、symbolはどちらでもない。

ということなので、

renderable element
Any element type that can have a direct representation in the rendering tree, as a graphic, container, text, audio, or animation. It includes the following elements: ‘a’, ‘audio’, ‘canvas’, ‘circle’, ‘ellipse’, ‘foreignObject’, ‘g’, ‘iframe’, ‘image’, ‘line’, ‘path’, ‘polygon’, ‘polyline’, ‘rect’, ‘svg’, ‘switch’, ‘text’, ‘textPath’, ‘tspan’, ‘unknown’, ‘use’ and ‘video’; it also includes a ‘symbol’ element that is the instance root of a use-element shadow tree.

A renderable element may or may not be rendered in a given document or point in time.

訳してみると、

renderable elmeent
描画、コンテナ、テキスト、オーディオ、もしくは、アニメーションとして、直接レンダリングツリーで表現されることができる要素タイプ。次の要素：a、audio、canvas、circle、ellipse、foreignObject、g、iframe、image、line、path、polygon、polyline、rect、svg、switch、text、textPath、tspan、unknown、use、および、videoを含む。また、use-element shadow treeのinstance rootであるsymbol要素を含む。

renderable elementは、与えられたドキュメント、もしくは、ある時点で、描画され、もしくは、描画されない。

never-rendered element
Any element type that is never directly rendered, regardless of context or display style value. It includes the following elements: ‘clipPath’, ‘defs’, ‘desc’, ‘linearGradient’, ‘marker’, ‘mask’, ‘metadata’, ‘pattern’, ‘radialGradient’, ‘script’, ‘style’ and ‘title’; it also includes a ‘symbol’ element that is not the instance root of a use-element shadow tree.

訳してみると、

never-rendered element
コンテキスト、もしくはディスプレイスタイルの値に関係なく、決して直接描画されない要素タイプ。次の要素：clipPath、defs、desc、linearGradient、marker、mask、metadata、pattern、radialGradient、script、style、および、titleを含む。また、use-element shadow treeのinstance rootでないsymbol要素を含む。

symbolがrenderable elementでもnever-rendererd elementのどちらでもない理由は、useを使用したものは、renderableで使用しない場合はnever-renderedということだろうか。

Attributes

	g	symbol	defs
aria attributes	〇	〇	-
conditional processing attributes	〇	-	-
core attributes	〇	〇	〇
global event attributes	〇	〇	〇
document element event attributes	〇	〇	〇
graphical event attributes	〇	〇	〇
presentation attributes	〇	〇	〇
preserveAspectRatio	-	〇	-
viewBox	-	〇	-
refX	-	〇	-
refY	-	〇	-

aria attributes、conditional processing attributesの違いはおいておくと、
symbolでpreserveAspectRatio、viewBox、refX、および、refYを使用できるというところが大きな違いです。

Attributesの違いがgとsymbolで大きく違うということはわかりました。
が、preserveAspectRatioもviewBoxも使うのが面倒なものなイメージで、使いこなしが難しいなとというところと、SVGでアイコン作る程度ならどうとでもなりそうな気がしました。

おわりに

今回は、gとsymbolとdefsのSVG上の仕様を調査しました。
結局、なんとなく違いは分かったけれど、使いこなせる気はしないという状態でした。

もう少しSVGの経験を積んで、理解を深めたいと思います。