SVG mit Style

SVG Grafiken bestehen aus normalen SVG-Quellcode. Wie in HTML können
Sie auch in SVG das style-Attribut verwenden und ihren Elementen
einen neuen Schwung geben.

SVG macht vieles für Webdesigner möglich, was zuvor noch
nicht möglich war. In diesem Artikel wird ihnen ein wenig die
Komplexität von SVG gezeigt.
Alle Elemente in SVG-Grafiken können Sie mit dem style-Attribut
formatieren. Dazu stehen zahlreiche Formatangaben zur Verfügung.
Einige davon haben Sie bereits kennen gelernt. Der Wert des style-Attributs
wird dabei komplette in Anführungszeichen eingefasst. Innerhalb
der Anführungszeichen werden die Angaben als Name:Wert-Paare
angegeben und die einzelnen Paare durch Semikolons getrennt.

Für die Werte der Angaben gelten folgende Regeln:

• Farben können wahlweise als Farbnamen, wie red, green oder blue
  angegeben werden, oder mit der rgb-Funktion. Ihr übergeben Sie
  als Parameter die Anteile der Farben für Rot, Grün und Blau. Diese
  Angaben müssen ganze Zahlen zwischen 0 und 255 sein. Die Farbe
  Schwarz geben Sie bspw. mit rgb(0,0,0)an und Weiß
  mit rgb(255,255,255).

• Dezimale numerische Werte geben Sie mit einem Punkt als Dezimalzeichen
  an. Wenn Sie bspw. die Transparenz auf 20% festlegen möchten,
  ist dazu die Angabe fill-opacity:0.2 erforderlich.

• Geben Sie Linienbreiten oder andere Angaben an, die in Pixel
  gemessen werden, müssen Sie die Maßeinheit Pixel angeben. Beispielsweise
  definieren Sie eine Linienbreite von 2 Pixeln mit stroke-width:2px.

Ein Beispiel für diese Formatierungen kann ihnen eine SVG
Grafik mit folgenden Code geben:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"

"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="200" height="200">
<rect y="20" x="20" width="60"
height="50" style="fill:orange;stroke:black;stroke-width:2px;"/>
<ellipse cy="30" cx="30" rx="25"
ry="20"
style="fill:rgb(0,128,255);stroke:black;stroke-opacity:0.5;fill-opacity:0.5"/>
</svg>

Im Browser mit dem SVG Viewer von Adobe sieht das wie folgt aus:

SVG Grafiken mit Style

Die verfügbaren Formierungsangaben sind abhängig vom Grafikelement.
Nicht gültige Angaben werden ignoriert. Während Sie für Textelemente
Schriftart- und Größe definieren können, ist das natürlich für Rechtecke
und Ellipsen nicht möglich. Die folgende Tabelle enthält wichtige
Angaben zur Formatierung von Grafikelementen. Dies ist allerdings
bei weitem keine vollständige Liste.

Texte erzeugen und formatieren

Auch Texte lassen sich natürlich in SVG-Grafiken verwenden. Sie
können sie ähnlich wie in HTML-Seiten mit style-Attribut formatieren
und hierzu stehen Ihnen auch ganz ähnliche Attribute zur Verfügung.
Es gibt in SVG-Grafiken mehrere Möglichkeiten Texte zu erstellen.
Die einfachste ist die Nutzung des <text>-Tags.
Zwischen <text> und </text>
wird dabei der Text eingeben. Dessen Position bestimmen ähnlich
wie bei Grafikelementen die Attribute x und y. Die Formatierung
geben Sie wieder über das style-Attribut an.

Texte mit SVG und Style

Diese beiden Textzüge wurden mit folgendem Code erzeugt: Die Drehung
des ersten Textes wird dabei durch das Attribut transform bestimmt.

Texte erzeugen und formatieren

<text x="140" y="-55" transform="rotate(35)"
style="font-size:36pt;font-family:'Arial Black';fill:blue;stroke:black;stroke-width:1px">SVG
</text>
<text x="55" y="+60" style="font-size:16pt;font-family:'Arial
Black';fill:red;stroke:black;stroke-width:1px">Scalable Vector
Graphic
</text>

Zusätzlich zu den bereits in der vorherigen Lektion erläuterten
Attributen zur Formatierung, wurden hier folgende Einstellungen
verwendet:

Das ist selbstverständlich nur eine kleine Auswahl der Möglichkeiten,
die Sie mit Texten haben. Sie können auch Hyperlinks erstellen,
Schriften einbetten, Texte an Elementen ausrichten, bspw. an einer
Schlangenlinie oder einem Kreis. 

Vielen dank an Helma Spona, die uns den SVG Onlinekurs auf S-V-G.net
zur Verfügung gestellt hat.