SVG Tutorial

Das Container-Element symbol ist speziell für ein grafisches Objekt (ein Element oder eine Gruppe von Elementen) gedacht, das mit Hilfe des use-Elements referenziert werden kann, und ist deshalb innerhalb eines defs-Containers zu verwenden.

Anstelle von symbol könnte auch das g-Element verwendet werden, um ein Objekt innerhalb des defs-Containers zur mehrmaligen Verwendung festzulegen, da das symbol-Element die gleichen Eigenschaften besitzt, wie das g-Element.

Der eigentliche Unterschied ist, dass Gruppen, die nicht im Definitionsbereich platziert werden am Bildschirm zu sehen sind, während Symbole immer (!) erst referenziert werden müssen.
Weiterhin bewirkt die Verwendung des symbol-Elements eine bessere Strukturierung der Grafik, und daher eine bessere Lesbarkeit des Quellcodes.
Und Symbole sind Grundlage für Marker (Kapitel 9.9 Pfeilspitzen - das marker-Element) und Muster (Kapitel 11.3 Muster - das pattern-Element).

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" width="100" height="100"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>das symbol-Element</title>
  <desc>Referenzen - besondere Objekte: Symbole</desc>

  <defs>
    <symbol id="smilie1">
      <desc>ein Symbol-Smilie</desc>
      <circle cx="20" cy="20" r="15"
        fill="yellow" stroke="black" />
      <circle cx="15" cy="15" r="2"
        fill="black" stroke="black" />
      <circle cx="25" cy="15" r="2"
        fill="black" stroke="black" />
      <line x1="20" y1="18" x2="20" y2="23"
        stroke="black" stroke-width="2" />
      <path d="M 13 26 A 5 3 0 0 0 27 26"
        stroke="black" fill="none" stroke-width="2" />
    </symbol>
  </defs>

  <use xlink:href="#smilie1" transform="scale(2)" />
</svg>
      

Im obigen Beispiel werden 3 Kreise, eine Linie und ein Pfad (mehr dazu im Kapitel Pfade) mit Hilfe des symbol-Elements zu einem Objekt mit der eindeutigen Bezeichnung smilie1 gruppiert.

Dieses Objekt wird dann mit use referenziert und, durch die Verwendung des Attributs transform mit dem Wert scale(2), doppelt so groß am Bildschirm dargestellt - (Transformationen werden im Kapitel Transformationen näher erläutert).