SVG g-Tag, symbol- und link-Tag

SVG g bildet Gruppen, die sich mit use wiederholen lassen

Das g-Tag fasst SVG-Elemente zu einer Gruppe zusammen, um sie nach logischen Gesichtspunkten zu strukturieren, zu wiederholen und mehrfach zu nutzen, um das Markup um gemeinsame Stile zu kürzen oder alle Elemente gemeinsam zu transformieren.

SVG hat vier Elemente zum gruppieren, strukturieren, wiederholen und definieren von SVG-Markup:

Gruppieren mit <g>

SVG-Gruppen fassen mehrere Elemente zusammen – z.B. um den Objekten der Gruppe gemeinsame Attribute zu geben oder alle Elemente der Gruppe in ein eigenes Koordinatensystem zu legen. Gruppen lassen sich mit einem transform-Attribut verschieben, drehen oder skalieren. In diesem Beispiel bilden die Gruppen die Kopiervorlage für die Blüten und die Bienen. Das spart Schreibaufwand und Ladezeit.

SVG g – Gruppieren und Strukturieren
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 340 160" width="100%" height="100%">
<g stroke="#5d8311" stroke-width="5" fill="none">
   <path d="m73 110.6v40.5" />
   <path d="m78 102.4v47" />
   <path d="m87 114.8v37" />
</g>
<g id="bee">
   <rect rx="4" height="9" width="15" y="30" x="11" fill="#fdb123"/>
   <rect height="9" width="4" y="30" x="16" fill="#52534c"/>
</g>

<use transform="translate(158,40)" xlink:href="#flower1" />
<use transform="translate(170,70)" xlink:href="#flower2" />
<use transform="translate(190,40) rotate(15)" xlink:href="#bee" />
…
</svg>
  • g-Tags werden eingesetzt, um Elemente logisch zu gruppieren und sie z.B. als Kopiervorlage für ein SVG use-Tag einzusetzen.
  • Das g-Tag nimmt auch Eigenschaften wie fill, stroke-width und stroke auf und übernimmt die Eigenschaften für alle Elemente.

g-Tags können weiter ineinander verschachtelt werden.

SVG symbol-Tag

Auch das symbol-Tag gruppiert Elemente. Allerdings werden Elemente eines symbol-Tags nicht gerendert, sondern sind Kopiervorlagen für das SVG-use-Tag.

Anders als Gruppen kann ein symbol-Element durch eine eigene viewBox geschrieben werden und ein eigenes preserveAspectRatio-Attribut haben.

<svg style="display:none" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 1238 521">
<symbol id="orange" viewBox="0 107 426 415">
   <title>Frische Orangen</title>
   <desc>Orangen-Icon mit blauen Blättern</desc>
   <rect height="415" width="426" y="107.7" x="0" fill="#efefef"/>
   <path d="m355 211s-28.6 75.6-116 118c-87 42-117 56-145 103" stroke="#80b13d" stroke-width="5" fill="none"/>
   <path d="m144 381.6c20 16.5-6 34.3-6 34.3" stroke="#80b13d" stroke-width="4.191" fill="none"/>
   …
</symbol">
</svg">

Und ein weiterer Unterschied zum g-Tag: symbol-Tags können ein eigenes title- und desc-Attribut enthalten.

Beispiel für den Einsatz des symbol-Tags für SVG-Icons

GROUP