Symbolinstanzen formatieren

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

Wenn Sie Elemente der Seite aus Symbolen erzeugen, können Sie diese natürlich auch unterschiedlich formatieren, indem Sie Formatierungen mit dem style-Attribut angeben. Angewendet werden allerdings nur die Formatierungen, die nicht schon durch das Symbol definiert werden. Weisen Sie dem Symbol bspw. eine Füllfarbe zu, können Sie diese Farbe in den Instanzen nicht ändern. Sie können aber bspw. die Deckkraft der Instanzen setzen, wenn Sie die nicht schon im Symbol verwendet haben. Das folgende Beispiel verdeutlich das. Es erzeugt wieder die zwei Buttons als Instanzen des Symbols smButton und definiert dafür über das style-Attribut zusätzliche Formatierungen. Im ersten Fall wird neben der Deckkraft auch die Rahmenstärke und der Filter definiert, im zweiten Fall zusätzlich die Füllfarbe. In beiden Fällen wird allerdings lediglich die Eigenschaft opacity angewendet, weil alle anderen durch das Symbol vorgegeben werden.

<use x="0" y="0" xlink:href="#smButton" transform="translate(160 120) scale(0.7)" style="opacity:0.5;stroke-width:3px;filter:none"/>
<use x="0" y="0" xlink:href="#smButton" transform="translate(90 180) scale(0.7)" style="opacity:0.7;fill:red" />

Das Ergebnis zeigt die folgende Abbildung. Die beiden rot eingerahmten Buttons sind die mit den veränderten Formatierungen. Auswirkungen haben diese aber nur bei der Deckkraft.

Formatierte Instanzen des smButton-Symbols

Abbildung: Formatierte Instanzen des smButton-Symbols.

Durch geschickte Formatierung der Symbole können Sie also einerseits das Aussehen der Instanzen vereinheitlichen, andererseits aber auch ein Maximum an Komfort bei der Anpassung erreichen. Dies hängt vom Zweck der Symbole ab.

Nehmen Sie an, Sie entwerfen eine Symbolbibliothek für den Webauftritt einer Firma und definieren verschiedene Firmen- und oder Produktlogos, die von den einzelnen Anwendern nicht geändert werden dürfen. Dann legen Sie dazu einfach alle relevanten Formatierungen explizit fest. Handelt es sich jedoch um einfache geometrische Formen, die Sie lediglich wegen ihrer Komplexität als Symbole speichern, ist es natürlich sinnvoll, nur die Umrisse in Form eines Pfades vorzugeben. Bei der Verwendung des Symbols kann dann im Einzelfall die genaue Formatierung festgelegt werden. Benutzen Sie nämlich einen <path>-Tag ohne ein style-Attribut, können Sie alle anderen Formatierung bei der Verwendung des Symbols bestimmen. Das folgende Beispiel zeigt dies. Es definiert ein Symbol smStern und verwendet dies zweimal mit unterschiedlichen Formatierungen. Dies ist möglich, weil das Symbol ohne style-Attribut definiert ist.

<?xml version="1.0" standalone="no"?>
...
<svg width="400" height="800">
  <defs>
    <symbol id="smStern">
      <path d="M92.899 18 C99.2743 18.0367 95.7314 ... z"/>
    </symbol>
  </defs>
  <use x="0" y="0" xlink:href="#smStern" transform="translate(0 0) scale(0.5)" style="fill:none;stroke:red"/>
  <use x="0" y="100" xlink:href="#smStern" transform="translate(0 0) scale(0.5)" style="fill:blue;stroke:black"/>
</svg>

Ergebnis des angewendeten smStern-Symbols

Abbildung: Ergebnis des angewendeten smStern-Symbols.

Hinweis:
Bei dem definierten Symbol handelt es sich um den Stern aus der Symbolpalette von Jasc WebDraw.

   

<< 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