Scalable Vector Graphics

Scalable Vector Graphics (SVG) ist eine Sprache zur Beschreibung zweidimensionaler Vektorgrafiken in XML. SVG unterstützt mittels SMIL Animationen. Manipulation des SVG-DOM sind mit Hilfe eingebetteter Funktionen beispielsweise via ECMAScript (JavaScript) [1] oder Tcl) möglich.

SVG wurde im September 2001 vom W3C als Empfehlung eingestuft.
Von der nächsten Generation der Webbrowser wird es wahrscheinlich nativ unterstützt werden. Zur Zeit ist dazu noch ein Plugin wie z.B. der SVG Viewer [2] von Adobe notwendig.
Eine Variante der Mozilla Suite unterstützt bereits eine Teilmenge von SVG ([3]). Opera enthält seit Version 8.0b3 ebenfalls eine partielle Implementierung.

Da SVG eine XML-Anwendung ist, kann diese mit einem Texteditor geöffnet und bearbeitet werden und wie jedes andere Dateiformat von geieigneten Programmen geöffnet werden, z. B. die freien Vektorgrafik-Programme Sodipodi und Inkscape, die es als ihr natives Datenformat einsetzen.

Eine SVG-Datei besitzt die Dateiendung *.svg und wenn diese mit gzip gepackt ist *.svgz.

SVG Grundstrukturen

Grundgerüst

Jede SVG-Datei beginnt, wie es bei XML-basierten Sprachen üblich ist, mit der XML-Deklaration und der Dokumenttypdeklaration, die den benutzten Namensraum beschreibt. Dazu wird bei letzterem ein Verweis auf die entsprechende DTD-Datei eingefügt. Danach kann schon das Starttag <svg> kommen. Die SVG-Datei wird durch das abschließende Endtag </svg> abgeschlossen.

<?xml version="1.0" encoding="iso-8859-1" standalone="no"?>  
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="300" height="300">	 


</svg>

Beim SVG-Starttag (<svg>) wird auch gleich die Breite und Höhe des Ausgabebildschirms definiert.

Graphische Primitiven

Alle graphischen Objekte in SVG bauen auf einfachen graphischen Grundelementen auf. Komplexere Objekte sind dabei aus mehreren einfachen Objekten zusammengesetzt.

Pfad

Der Pfad ist das eigentliche Grundelement in SVG. Aus ihm können alle anderen Objekte (Kreise, Rechtecke, Polygone etc.) aufgebaut werden. Da das aber teilweise sehr umständlich ist, hat man diese häufigen Formen extra mit eigenen Beschreibungen versehen, die im Anschluss aufgeführt werden.

Der Pfad wird im Attribut (d) entweder durch Koordinatenpaare (absolut) oder durch Vektoren (relativ) beschrieben. Großbuchstaben werden von Koordinaten gefolgt, Kleinbuchstaben von Vektoren. Diese Koordinaten und Vektoren geben die Anweisung wie der Pfad gezeichnet werden soll.

M/m - moveto = Stift dorthin bewegen
L/l - lineto = mit Stift dorthin zeichnen
Q/q - quadratische Bézierkurve (zwei Wertepaare: ein Stützpunkt, ein Zielpunkt)
C/c - kubische Bézierkurve (drei Wertepaare: zwei Stützpunkte, ein Zielpunkt)

Beispiel: Der absolut beschriebene Pfad...

<path d="M 10 10 L 20 20 18 22 C 24 28 14 25 10 40 Q 20 45 15.33 60" />

ist identisch mit dem relativen

<path d="M 10 10 l 10 10 -2  2 c  6  6 -4  3 -8 18 q 10  5  5.33 20" />

Für horizontale und vertikale Linien existiert eine entsprechend vereinfachte Notation, für Ellipsen und Kreise ist eine spezielle Notation mit sieben Werten erforderlich.

H/h - horizontal line = horizontale Linie zeichnen (X-Wert)
V/v - vertical line = vertikale Linie zeichnen (Y-Wert)
A - elliptical arc = Bogenkurve

Kreis

Der Kreis wird mindestens durch den Radius (r) definiert. Optional kann die Position des Mittelpunktes durch die Atribute cx und cy festgelegt werden. Füllung, Art der Umrisslinie oder Transparenz werden durch das Attribut style definiert.

<circle cx="100" cy="100" r="50" />

Ellipse

Die Ellipse wird durch die zwei Halbachsenradien definiert (rx und ry). Alle anderen Attribute sind die gleichen wie beim Kreis.

<ellipse cx="100" cy="100" rx="50" ry="20" />

Rechteck

Ein Rechteck kann auf nur eine konforme Art definiert werden. Diese Möglichkeit ist die Beschreibung durch die obere linke Ecke mit den Koordinaten (x und y) und die Breite (width) und Höhe (height).

<rect x="100" y="100" width="100" height="200" />

Möchte man die Ecken des Rechtecks abrunden, kann man das mit Hilfe der Attribute (rx und ry) bewerkstelligen.

Linie

Eine einfache gerade Linie wird durch die beiden Endpunkte in SVG beschrieben.

<line x1="100" y1="100" x2="200" y2="200" />

Polyline

Um eine Linie über mehrere Stützpunkte zu definieren, benutzt man die Beschreibung als Polylinie. Dabei werden die einzelnen Koordinatenpaare der Stützpunkte einfach fortlaufend hintereinander geschrieben. Die Linie wird von ersten Punkt aus zum zweiten gezogen und von dort weiter zum dritten Stützpunkt und so weiter.

<polyline points="100 100 200 200 300 40" />

Polygon

Ein Polygon (Vieleck) wird durch seine Eckpunkte beschrieben. Wie bei der Polyline werden auch hier alle Koordinatenpaare einfach hintereinander geschrieben.

<polygon points="100 100 100 200 150 200" />

Text

Zeichen, Text können mit Hilfe des Elements <text> definiert werden.

<text x="100" y="100" style="font-size:40">Hallo Welt!</text>

SVG-Viewer

Adobe SVG Viewer (www.adobe.com/svg)
Corel SVG Viewer (www.smartgraphics.com/Viewer_download.shtml)
Batik (xml.apache.org/batik)
KSVG als Plugin für den Konqueror oder andere KDE-Applikationen

SVG-Editoren

Freie Software

Dia gtk (Webseite) in Python programmierte Anwendung
Sodipodi (Webseite), Unix und Windows, unterstützt noch keine Animationen (englisch)
Inkscape (Webseite), ein Fork von Sodipodi, mit dem Ziel, eine bessere Benutzeroberfläche zu entwickeln.
Skencil (Website), in Python programmierte Anwendung

Konvertierung SVG -> Bitmap

librsvg ( http://librsvg.sourceforge.net/ ), SVG Library mit commandline tool "rsvg"; Basis für mozilla plugin
batik ( http://xml.apache.org/batik/ )

Proprietäre Software

Adobe Illustrator CS (www.adobe.de)
Corel Smart Graphics Studio (www.smartgraphics.com)
EvolGrafiX (www.pcxsoftware.de)
Jasc WebDraw (www.jasc.com)
sphinx SVG (www.in-gmbh.de)
SVG Composer (www.svgcomposer.com )

Programme, die SVG unterstützen

Adobe Illustrator 9/10
CATIA ab Version 5
CorelDRAW ab Version 10
Inkscape
Mozilla Firefox in der geplanten Version 1.1 (bereits in ersten Nightly-Builds enthalten)
Opera
OpenOffice.org
The GIMP ab Version 2

Das Vektorprogramm Freehand unterstützt SVG nicht, vermutlich weil es von der Firma Macromedia kommt, das Flash (ein Macromedia-Produkt) vorzieht.

SVG-Unterstützung in Browsern

Betriebssystem	Browser	Plugin	Grundformen	Animationen	Animationen mit absoluter Zeitangabe (Wallclock)	Scripting
Windows	Internet Explorer	nativ	nein	nein	nein	nein
	Internet Explorer	Adobe SVG-Viewer	ja	ja	nein	ja
	Mozilla 1.7.7/Firefox 1.0.3	nativ	nein	nein	nein	nein
	Mozilla 1.7.7/Firefox 1.0.3	Adobe SVG-Viewer	instabil	instabil	nein	instabil
	Firefox 1.1 (nightly builds)	nativ	ja	nein	nein	ja
	Opera	nativ	ja	ja	nein	ja
Linux	Konqueror	nativ	ja	nein	nein	nein
	Mozilla 1.7.7/Firefox 1.0.3	nativ	nein	nein	nein	nein
	Mozilla 1.7.7/Firefox 1.0.3	Adobe SVG-Viewer	nein	nein	nein	nein
	Firefox 1.1 (nightly builds)	nativ	nein	nein	nein	nein
	Opera	nativ	ja	ja	nein	ja

Konferenzen

SVG Open organisierte schon dreimal eine internationale Konferenz, die sich mit allem rund um das Thema SVG beschäftigte.

Zürich, Schweiz, 15.-17. Juli 2002
Vancouver, Kanada, 13.-18. Juli 2003
Tokio, Japan, 7.-10. September 2004

Nächste SVG Open ist vom 15.-18. August 2005 in Enschede in den Niederlanden.

Varianten

Eine Variante von SVG ist das NEVA-Dateiformat (.nva), welches vor allem bei Sharp-Handys eingesetzt wird. Dieses Format ist noch platzsparender als SVG.

Literatur

Marcel Salathé, SVG Scalable Vector Graphics, ...für professionelle Einsteiger, Verlag Markt+Technik, ISBN 3827261880
Literatur und Ressourcen zu SVG (PDF-Datei)

Siehe auch

Rich Internet Application

Weblinks