CSS, HTML und Javascript mit {stil}

SVG use – Elemente und Gruppen kopieren

svg use SVG-Formen und Objekte kopieren oder klonen

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,

Dabei kann ein SVG use-Element 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 Kopien der 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 use, SVG Formen klonen
<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)" xlink: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 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.

Puzzle mit 4 Teilen

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 xlink:href="#puzz" fill="yellow" />
    <use transform="translate(690,50) rotate(90)" fill="blue" xlink:href="#puzz" />
    <use transform="translate(640,740) rotate(180)" fill="red" xlink:href="#puzz" />
    <use transform="translate(-80,580) rotate(-60)" fill="green" xlink: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.

svg use, verschiedene Farben, different colors
<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" xlink:href="#p" />
<use style="stroke-width:6px;stroke:#fff" xlink: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 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 xlink:href="#svg-replace" />
  </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).

TWINS
<g id="wau">
…
</g>
<use transform="translate(440,140)" xlink:href="#wau" />
<use transform="translate(160,140) scale(-1,1)" xlink:href="#wau" />

textpath

textpath richtet einen Text mit xlink:href entlang eines Pfades aus.

svg textpath Text an Pfad ausrichten
<path id="p12" d="M 95,379 A … 95,379 Z" stroke="none" fill="none" stroke-width="0" />
<text x="170" y="500" font-size="60">
    <textPath xlink:href="#p12">Farbton</textPath>
</text>

Alternativ zu stroke=none, fill=none und stroke-width=0 kann der Pfad in ein defs-Element platziert werden, damit er in der Grafik nicht sichtbar ist.

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