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

Eigenschaft Beschreibung
fill Legt die Füllfarbe fest, bspw. fill:red;
stroke Legt die Farbe der Umrandung bzw. die Farbe einer Linie fest. Mit stroke:black wird die Umrandung schwarz angezeigt, mit stroke:none wird keine Umrandung angezeigt.
stroke-width Legt die Breite der Linie oder Umrandung in Pixeln fest. Der Wert kann eine ganze Zahl oder eine Dezimalzahl sein, bswp. stroke-width:0.5px oder stroke-width:2px.
stroke-opacity Legt die Deckkraft der Linie oder Umrandung fest. der Wert stroke-opacity:1 stellt 100% dar, stroke-opacity:0.5 entspricht 50%.
filter Legt einen Filter fest. Damit können Sie benutzerdefinierte Spezialeffekte zuweisen. Details dazu zeigt Lektion 6.
visibility Legt die Sichtbarkeit eines Element fest, Mögliche Werte sind: visible, hidden, collapse und inherit.
fill-opacity Legt die Deckkraft der Füllung fest. der Wert fill-opacity:1 stellt 100% dar, fill-opacity:0.5 entspricht 50%.


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

Eigenschaft Beschreibung
font-size Legt die Schriftgröße fest, bspw. font-size:36pt;
font-famliy Legt die Schriftart fest. Schriften, die aus mehreren Wörtern bestehen müssen in Hochkommata eingeschlossen werden, mehrere Schriften können nacheinander durch Kommata getrennt aufgeführt werden.
fill

Legt die Füllfarbe des Elements, in diesem Fall also der Schrift fest. Diese kann wahlweise mit rgb() oder mit dem Farbnamen angegeben werden.

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.

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: