Gruppieren mit <g>
SVG hat vier Elemente zum Gruppieren, Strukturieren, Wiederholen und Definieren von SVG-Markup:
- SVG <g> für group
- SVG <defs> für define bildet Templates oder Vorlagen
- SVG <use> zum kopieren und wiederholen
- SVG <symbol> ist eine Zusammenfassung von defs und 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 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.