Schablonen für Elemente definieren

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

Vorlagen für Elemente werden in SVG mit dem <symbol>-Tag definiert. Sie können dann mit Hilfe des <use>-Tags referenziert und verwendet werden. Der Unterschied zwischen anderen benannten Objekten und Gruppen und den mit <symbol> definierten Symbolen besteht darin, dass alle anderen Objekte gerendert, das heißt berechnet, werden, auch dann, wenn sie hinter einem anderen Objekt versteckt liegen oder unsichtbar formatiert sind. Das kostet abhängig von der Komplexität und der Anzahl der Objekte eine Menge Zeit. Die mit <symbol> definierten Elemente werden jedoch nicht gerendert, sondern nur die aus ihnen erzeugten Objekte. Wenn Sie mit <symbol> 100 Elemente erstellen und davon in der Grafik nur 2 verwenden, werden auch nur die zwei Objekte berechnet, die Sie aus den definierten Vorlagen erzeugen.

Innerhalb des <symbol>-Tags können Sie Filter, Farbverläufe, Gruppen und natürlich alle elementaren SVG-Objekte verwenden, aus denen sich die Grafik zusammensetzt. Außerdem kann natürlich auch innerhalb des <symbol>-Tags ein <defs>-Bereich für das einzelne Symbol benutzt werden. Das ist wichtig, weil sonst beim Anwenden der Vorlage die Elemente angezeigt werden, die ursprünglich nicht sichtbar waren, weil sie im <defs>-Bereich definiert waren. Das können Sie ganz einfach vermeiden, indem Sie auch diese Elemente innerhalb des <symbol>-Tags in <defs> einfassen. Definiert wird die Vorlage vorzugsweise im <defs>-Bereich der Seite.

Haben Sie also bspw. ein komplexes Element bereits definiert, brauchen Sie im Prinzip die Definition nur in einen <symbol>-Tag einzufassen und eventuell den Endtag </defs> verschieben, wenn Sie einen verwendet haben. Das folgende Listing zeigt dies. Es verwendet die Grafik button.svg aus dem vorherigen Kapitel als Grundlage. Die hervorgehobenen Zeilen sind diejenigen, die Sie hinzufügen bzw. verschieben müssen (</defs>). Wenn, wie in diesem Fall, dem Symbol auch ein Filter zugewiesen werden soll, sollten Sie dazu zwei Symbole definieren: eines ohne Filter, das Sie dann über einen <use>-Tag in dem zweiten Symbol benutzen. Dem <use>-Tag können Sie dann Filter zuweisen.

<?xml version="1.0" standalone="no"?>
...
<svg width="300" height="800">
  <defs>
    <symbol id="bttnohne">
      <desc>Der Button</desc> 
      <circle cx="25" cy="25" r="25" style="stroke-width:1;stroke-opacity:0.8;stroke:rgb(222,0,0);fill-opacity:1;opacity:1;fill:url(#runderVerlauf);"/>
      <ellipse cx="25" cy="15" rx="20" ry="12" style="stroke-width:1;stroke:none;fill-opacity:1;opacity:1;fill:url(#linearerVerlauf)"/>
    </symbol>
    ...
    <symbol id="bttn">
      <use x="15" y="10" xlink:href="#bttnohne" style="filter:url(#SVGObjekt)"/>
    </symbol>
  </defs>
</svg>

Wenn Sie die Datei ausführen, wird allerdings nichts angezeigt. Das liegt daran, dass Sie nun zwar ein Symbol definiert, aber dieses noch nicht verwendet haben.

   

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de