CSS, HTML & Javascript mit {stil}

SVG use – Elemente und Gruppen kopieren

SVG use kopiert und wiederholt aufwändige Formen und ganze Gruppen von Elementen an beliebigen Positionen der Grafik und vergrößert, verkleinert und rotiert sie dabei gleichzeitig. Wenn das Original animiert ist, wandert die Animation mit in die Kopie.

SVG use: SVG-Formen, Gruppen und Objekte kopieren

Elemente klonen

Dabei kann use auch die komplette Grafik vom Ende der HTML-Datei an jede Position in den HTML-Quellcode setzen. Das kürzt die Ladezeit der Seite und hält gleichzeitig das Markup bei inline-SVG übersichtlich.

Jede Frucht ist nur einmal vertreten, alle weiteren Früchte sind keine eigenständigen Formen, sondern werden durch use kopiert, mit transform="translate" gegen das Original verschoben, von rotate gedreht und mit scale verkleinert oder vergrößert.

Das Original kann ein einzelnes Element – z.B. ein komplexer Pfad –, eine SVG-Gruppe (<g>), SVG-Symbol (<symbol>) oder das komplette SVG (<svg>)sein. Das Element muss nur durch ein eindeutiges id-Attribut gekennzeichnet sein.

SVG Formen klonen
SVG-Formen und -Gruppen mehrfach nutzen
<g id="birne">		
   <path d="m 62.13,88.57 c -4.2,2.45 -11.7,7.35 …" />		
   <path d="m 62.13,88.57 c -4.2,2.45 -11.7,7.35 …" />		
</g>

<use transform="translate(652,-16) rotate(-15) scale(0.8)" href="#birne" />

Eine Form kann selber bereits geklonte Elemente enthalten – z.B. die schwarzen Kerne der Melone.

Das Ergebnis des use-Tags ist ein identisches Element an exakt derselben Stelle, das mit x und y oder transform neu positioniert, rotiert, skaliert oder gespiegelt werden kann.

Weil SVG use eine Referenz oder einen Link auf ein vorhandenes Element setzt, braucht das SVG-Tag (in einer externen SVG-Datei) den Namespace für xlink:

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100%" height="100%" 
     viewBox="0 0 1045 627.1">

Ohne die Beigabe des Namespace kommt es zu einem Fehler Namespace prefix xlink for href on use is not defined.

Formen und Grupen in Inkscape kopieren

In Inkscape gibt es unter Bearbeiten den Befehl clone, um ein Element nicht einfach zu duplizieren, sondern durch ein sparsames use zu erzeugen.

SVG Elemente mit use kopieren

Ein use-Element ist eine exakte Kopie mitsamt allen Stilen. Farben (fill) und Rahmen (stroke) können nicht geändert werden, weder als Attribute noch durch ein style-Attribut.

use wiederholt einzelne Elemente und ganze Gruppen von Elementen. Wenn einzelne Elemente mit use kopiert werden, kann das style-Attribut des geklonten Elements angepasst werden: neben der Position und der Größe lassen sich fill, stroke-width und stroke individuell vorgeben.

SVG Puzzle mit vier Teilen
SVG-Elemente wiederholen

Das Original ohne Eigenschaften sitzt in einem defs-Tag und bleibt darum unsichtbar. Die Füllung kommt erst in der Kopie im use-Tag zum Einsatz.

<svg xmlns:xlink="http://www.w3.org/1999/xlink" 
     xmlns="http://www.w3.org/2000/svg" 
     viewBox="0 0 1183 728" 
     height="100%" width="100%">
    <circle r="364" cx="364" cy="364" fill="silver" />
    <defs>
        <path id="puzz" d="m 100,97 c -30,0 -54,24 -54,54.4 l 0, … z" />
    </defs>
    <use href="#puzz" fill="yellow" />
    <use transform="translate(690,50) rotate(90)" fill="blue" href="#puzz" />
    <use transform="translate(640,740) rotate(180)" fill="red" href="#puzz" />
    <use transform="translate(-80,580) rotate(-60)" fill="green" href="#puzz" />
</svg>

Der schwunghafte Stift besteht aus den Kopien eines langatmigen path-Elements: ein SVG use mit stroke-width:60px, der weiße Strich in der Mitte des Stifts ist ein path mit stroke-width:6px.

verschiedene Farben, different colors
SVG use mit verschiedenen Farben
<path id="p" style="fill:none" d="m 33.81,56.84 0,205.56 c 0,38.1 23.01,
   52.8 52.68,52.8 l 197.31,0 c 42,0 56.5,24.6 56 … " />
<use style="stroke-width:60px;stroke:#EFC12F" href="#p" />
<use style="stroke-width:6px;stroke:#fff" href="#p" />

Mit SVG use das HTML-Markup übersichtlich halten

SVG inline im Markup der Seite ist praktisch, aber kann die HTML-Seite auch regelrecht überschütten. Wird die SVG-Grafik ans Ende des Markups vor den schließenden body-Tag gesetzt, kann sie mit use an die gewünschte Position in die Seite gesetzt werden. Das Markup bleibt übersichtlich.

SVG Grafik inline
SVG use – SVG inline ans Ende der Seite, mit use an die gewünschte Stelle

Das SVG-Markup am Ende der Seite braucht ein style="display:none", damit die Grafik nicht am Ende der Seite wiederholt wird. Ein weiterer Vorteil dieses Verfahren: Selbst große Grafiken müssen nicht als externe Datei eingebunden werden – ganz im Sinne kurzer Ladezeiten.

  <svg height="100%" viewBox="0 0 533 382.5" width="100%">
	  <title>SVG inline ans Ende der Seite, mit use an die gewünschte Stelle</title>
	  <use href="#mypic" />
  </svg>

  <svg style="display: none" viewBox="0 0 533 382.5" width="100%">
     <g id="mypic"> 
        …
     </g>
  </svg>
  
 </body>
</html>

SVG spiegeln

transform="scale(-1,1)" spiegelt entlang der X-Achse

transform="scale(1,-1)" spiegelt entlang der Y-Achse.

Damit ein Element mit use einfach und intuitiv platziert (und gespiegelt) werden kann, liegt sein Mittelpunkt am besten bei (0,0).

SVG-Elemente spiegeln (mirror)
SVG-Elemente spiegeln (mirror) mit scale
<g id="wau">
…
</g>
<use transform="translate(440,140)" href="#wau" />
<use transform="translate(160,140) scale(-1,1)" href="#wau" />

xlink:href oder href?

Mit SVG 1.1 galt noch xlink:href für Links und Referenzen.

Eigentlich setzt der Standard xlink:href mit SVG2 auf die Liste der unerwünschten bis verbotenen Attribute und wünscht sich stattdessen ein einfaches href. Das funktioniert heute bereits in allen Browsern, nur Safari hat lange darauf warten lassen.

WebKit unterstützte auch in den neueren Versionen weiterhin den "xlink"-Namespace und erwartete ein "href"-Attribut mit dem Präfix xlink. Erst Safari 13 ist xlink-frei.

Suchen auf mediaevent.de