SVG Tutorial

Das defs-Element ist ein Container-Element dessen einzige Aufgabe es ist einen Bereich festzulegen. Innerhalb dieses Bereichs (Containers) können Objekte definiert werden, die in der Grafik von anderen Objekten referenziert (verwendet) werden können, z.B. einzelne Elemente, Gruppen, Symbole, Farbverläufe oder Filtereffekte.
Dabei ist zu beachten, dass im Definitions-Container eingeschlossenen Elemente oder Objekte nicht direkt in der Grafik dargestellt werden, sondern erst wenn sie innerhalb der Grafik von anderen Elementen referenziert werden.
Es wird empfohlen, die Elemente die Referenzen darstellen, immer innerhalb des defs-Containers zu platzieren.

Mit dem use-Element wird eine Instanz einer bereits bestehenden Vorlage erzeugt, d.h. sie können mit dem Element use andere Elemente bzw. Objekte referenzieren.

Die Attribute x und y verlegen den Standort der Instanz, dabei ist der Nullpunkt der Nullpunkt des Elements und nicht der gesamten SVG-Grafik.

Beispiel Quellcode

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="250" height="120">
  <title>das defs-Element und das use-Element</title>
  <desc>Referenzen mit use</desc>

  <!-- Im Definitionsbereich (defs-Container) wird ein Farbverlauf
  und eine Linie definiert -->
  <!-- Die hier festgelegten Objekte werden erst
  nach Referenzierung angezeigt -->
  <defs>
    <linearGradient id="farbverlauf">
      <stop offset="0%" stop-color="red" />
      <stop offset="99%" stop-color="#33cc33" />
    </linearGradient>

    <line id="li"
      x1="5" y1="50" x2="205" y2="70"
      stroke="black" stroke-width="2" />
  </defs>

  <!-- Das Rechteck referenziert den Farbverlauf -->
  <rect x="5" y="5" width="200" height="40"
    style="fill:url(#farbverlauf);" />

  <!-- 5 Instanzen der Linie -->
  <use xlink:href="#li" />
  <use x="10" y="10" xlink:href="#li" />
  <use x="20" y="20" xlink:href="#li" />
  <use x="30" y="30" xlink:href="#li" />
  <use x="40" y="40" xlink:href="#li" />
</svg>
      

Im obigen Beispiel wird im defs-Container ein Farbverlauf mit der ID farbverlauf und eine Linie mit der ID li definiert.

Der Farbverlauf wird durch die Eigenschaft fill vom rect-Element referenziert. Der Farbverlauf soll hier allerdings nur als Beispiel für die Referenzierung (Verwendung) von, im defs-Bereich, definierten Objekten dienen. Farbverläufe werden in Kapitel Verläufe und Muster vorgestellt.

Die Linie wird durch das Attribut xlink:href vom use-Element verwendet. Jedes use-Element erzeugt genau eine Instanz der Linie li aus dem Definitionsbereich der Grafik. Die erste Instanz der Linie wird an der orginalen Position dargestellt. Die weiteren Instanzen werden durch die Attribute x und y entlang der x-Achse bzw. der y-Achse verschoben.