Leitfaden für skalierbare Vektorgrafiken – Teil 1

Style-Sheet-Eigenschaften können global oder pro Element festgelegt werden, im Rahmen des style-Attributs jedes Elements. Zum Beispiel legt fill die Farbe fest, mit der das Rechteck gefüllt wird, und stroke definiert die Eigenschaften der Umrisslinie einer Form. Farben können in SVG mit Namen oder als Hexadezimal-Code angegeben werden. Die Eigenschaft fill-opacity legt die Transparenz der Füllfarbe einer Form in Prozent der normalen Transparenz fest.

<rect style="fill:#336699; stroke:#224488;
 stroke-width:1; fill-opacity:0.5"/>

Transformationen und Filter

Sobald man ein paar SVG-Formen erstellt hat, wird man diese verschieben oder ihre Größe ändern wollen. Die Eigenschaft translate(x, y) verschiebt das Koordinatensystem an eine neue Position. Man beachte, dass es zwar so aussieht, als ob sich die Form bewegt hat, in Wirklichkeit wurde aber das Koordinatensystem der Form verschoben. Wenn man dies berücksichtigt, lässt sich Verwirrung bei komplexeren Transformationen vermeiden.

<g transform="translate(25,25)"> </g>

Die Eigenschaft scale () vergrößert (> 1) oder verkleinert (zwischen 0 und 1) die Form und rotate() dreht die Form und das aktuelle Koordinatensystem um die angegebene Gradzahl.

<g transform="scale(0.25)"> <g transform="rotate(180)">
<use x="0" y="0" xlink:href="#coords" />
</g></g>

SVG verfügt über eine Reihe eingebauter Filter, mit denen man interessante und faszinierende Effekte erzeugen kann.

Abbildung B: CSS-Eigenschaften

Die mittlere Grafik in Abbildung B ist ein Beispiel für die Verwendung von mehreren Filtern, um einen Schlagschatten zu erzeugen.

<feGaussianBlur in="SourceAlpha" 
stdDeviation="2" result="blurredAlpha"/>
 <feOffset in="blurredAlpha" 
dx="2" dy="2" result="offsetBlurredAlpha"/>

Das Attribut stdDeviation legt fest, wie verschwommen der Schatten aussehen soll, und die Attribute dx und dy des feOffset-Elements geben Tiefe und Richtung des Schattens an. Filter werden im Abschnitt <defs> einer SVG-Datei festgelegt. Mit filter:url(#url) kann man das Element mit dem Filter verknüpfen.

<rect style="filter:url(#DropShadow);"/>

SVG ermöglicht zwei Arten von Farbverläufen: linear und radial. Ein linearer Verlauf ist eine stufenweise Transformation von einer Farbe zu einer anderen entlang einer Geraden, während ein radialer Verlauf die Transformation kreisförmig, ausgehend von einem Mittelpunkt durchführt. Farbverläufe werden im Abschnitt <defs> einer SVG-Datei festgelegt. Mit stroke:url(#url) kann man das Element mit dem Filter verknüpfen.

Die <stop>-Elemente legen die Farben für den Farbverlauf fest. offset-Attribute bestimmen Länge und Änderungsrate des Verlaufs.

<stop offset="0%" style="stop-color:#ffffff"/>
<stop offset="100%" style="stop-color:#336699;"/>