SVG – Scalable Vector Graphics

von Stefan Burow

Kaum eine Website kommt heutzutage ohne Grafiken aus. Doch durch die geringe Bandbreite der üblichen Internetanbindungen kommt es bei der Verwendung vieler grafischer Elemente zu erhöhten Transferzeiten. Abhilfe schaffen soll das Format SVG.

Wie der Name schon sagt ist “SVG” ein Vectorgrafikformat, das heißt die Informationen zur Darstellung der Grafik werden als Textinformationen “aufbewahrt”. Eine einfache Linie definiert sich über ihren Startpunkt (x,y) und den Endpunkt (x,y). Zur weiteren Beschreibung des Aussehens kommen Angaben wie Farbe und Dicke der Linie hinzu, aber dazu später mehr.

SVG wurde Anfang September 2001 als Standard verabschiedet. (Aktuell ist mit Stand vom 31.10.2001 die “Working Draft SVG 1.1″). Als Beschreibungssprache dient XML. Daraus ergibt sich zwingend, sich an die Konventionen von XML zu halten, also alle “Tags” sind zu beenden, Attribute gehören in doppelte Anführungszeichen und die Groß-/ und Kleinschreibung ist strikt einzuhalten. Eine typische SVG-Datei ist wie folgt aufgebaut:

 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE
svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/PR-SVG-20010904/DTD/svg10.dtd">

<svg>
 .... hier stehen die Objektbeschreibungen
 </svg> 

Grundlegende Elemente
Beschrieben werden Elemente wie Linie, Rechteck, Kreis, Ellipse, Polygone, Text und so fort. Eine Linie wird, wie oben beschrieben, folgendermaßen erzeugt:

      <line x1="160" y1="100" x2="210" y2="100" stroke-width="2"
stroke="black" />

Diese Linie beginnt 160px von links, 100px von oben und hat eine Länge von 50px sowie eine Dicke von 2px in der Farbe Schwarz. Die Maßeinheit “Pixel” ergibt sich aus der Tatsache, dass keine anderen Angaben gemacht wurden. Möglich sind Angaben wie in(Inch), pt(Points), pc(Pica), cm, und mm. Zu beachten ist, dass der Tag innerhalb der Anweisung geschlossen wurde. Kreise und Rechtecke lassen sich genauso einfach erzeugen:

Kreis

      <circle
cx="185" cy="70" r="10" fill="yellow" />

Mitte des Kreises ist 185px von links, 70px von oben und der Radius beträgt 10px die Füllfarbe ist gelb.

Rechteck

      <rect x="160" y="2" width="50"
height="50" fill="blue" stroke="black" stroke-width="2" />

Beschreibt ein blaues Quadrat mit schwarzem Rahmen.

Weitere Möglichkeiten und Vorteile von SVG
Bisher wurde noch kein großer Vorteil von SVG beschrieben außer der Möglichkeit, dass die Objekte mit Text beschrieben werden, was den Suchmaschinen die Möglichkeit der Indizierung dieser Angaben ermöglicht.

Ein weiterer Vorteil von SVG ist die geringe Dateigröße im Vergleich zu Bitmaps. Bei komplexen Darstellungen wird das besonders deutlich. Ein gutes Beispiel (Nur mit einem Plugin für SVG zu betrachten) dazu ist auf den Beipielseiten von Adobe zu finden. Dieses Bild (Dateigröße 2800 Bytes) zeigt auch die weiteren Möglichkeiten von SVG, wie Animationen und das freie Zoomen ohne Qualitätsverlust. Das Zoomen kann am Beispiel des Dr.Web Logos verdeutlicht werden.

Bitmap	SVG
Zoom 2-fach

Der Quelltext des Logos (Nur mit einem Plugin für SVG zu betrachten) sieht folgendermaßen aus:

       <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg
PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/PR-SVG-20010904/DTD/svg10.dtd">

<svg>
 <rect x="1" y="1" width="88" height="57" fill="yellow" stroke="none"
/>
 <polygon fill="yellow" stroke="black" stroke-width="2" points="43,1
1,50 86,50 " />
 <circle cx="35" cy="30" r="3" fill="black"/>

<circle cx="52" cy="30" r="3" fill="black"/>
 <line x1="20" y1="20"
x2="4" y2="7" stroke-width="2" stroke="black" />
 <line x1="25" y1="16"
x2="8" y2="2" stroke-width="2" stroke="black" />
 <line x1="66" y1="20"
x2="82" y2="7" stroke-width="2" stroke="black" />
 <line x1="60" y1="14"
x2="78" y2="2" stroke-width="2" stroke="black" />
 <line x1="35" y1="45"
x2="52" y2="45" stroke-width="2" stroke="black" />
 </svg>

Nach der Darstellung grafischer Elemente soll kurz auf die Möglichkeiten der Textdarstellung eingegangen werden. Analog zur Darstellung von grafischen Objekten wird auch Text dargestellt. Die Positionierung erfolgt wieder über die (x,y)-Koordinaten, danach folgt die Angabe des Textes und abschließend der End-Tag.

Beispiel

      <text
x="10" y="10">SVG macht</text>
 <text x="10" y="30">Spass!</text>

schreibt den Text 2-Zeilig untereinander. Selbstverständlich sind alle Möglichkeiten von SVG auch auf Text anzuwenden, Schriftarten, Schriftgrößen, Schrittweiten, Farben man kann Text sogar an Pfaden entlang fließen lassen. Selbstverständlich können SVG-Dateien auch in HTML-Seiten eingebunden werden. Dies geschieht auf folgende Weise:

       <embed src="svgdatei.svg"
width="100" height="100" type="image/svg+xml">

Noch komplexere Möglichkeiten von SVG sollen hier nur eine kurze Erwähnung finden. Zu diesen Möglichkeiten zählen Farbverläufe, Muster, Transparenzeffekte, Filter sowie Animationen. Folgendes Beispiel (Nur mit einem Plugin für SVG zu betrachten) erzeugt ein Quadrat, welches in Form und Farbe verändert wird.

       <rect x="300" y="2" width="100"
height="100" fill="yellow">
 <animate attributeName="width" to="150"
dur="3s" fill="freeze" />
 <animate attributeName="fill" from="yellow"
to="blue" dur="3s" />
 </rect>

SVG in der Praxis
Wie schon erwähnt, ist zum Betrachten von SVG ein Plugin von Adobe notwendig. Einzig der Referenz-Browser Amaya des W3C kommt ohne zusätzliche Software mit der Darstellung zurecht.

Weiterführende Links zu SVG

• SVG Seiten beim W3
• SVG-Spezifikation beim W3
• SVG-Spezifikation teilübersetzt von Stefan Schumacher
• SVG Seiten bei Adobe

Weitere Beiträge:

• 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
• Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
• Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
• Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
• Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
• 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
• Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.