Scalable Vector Graphics

Flag of Germany.svg als SVG
Der komplette Quelltext:

]]

Scalable Vector Graphics (SVG, deutsch Skalierbare Vektorgrafiken) ist ein Standard zur Beschreibung zweidimensionaler Vektorgrafiken in der XML-Syntax. SVG wurde im September 2001 vom W3C als Empfehlung veröffentlicht und viele aktuelle Webbrowser können von Haus aus einen Großteil des Sprachumfangs darstellen. Der verbreitete Internet Explorer benötigt zur Darstellung jedoch noch ein Plug-In, wie z. B. den SVG-Viewer von Adobe.

SVG unterstützt mittels SMIL Animationen. Manipulationen des SVG-DOM sind mit Hilfe eingebetteter Funktionen via Skriptsprachen möglich.

Da SVG ein XML-Dialekt ist, können SVG-Dateien mit Hilfe eines Texteditors bearbeitet werden. Es gibt jedoch auch spezielle Programme zur Bearbeitung, z. B. die freien Vektorgrafik-Programme Sodipodi und Inkscape. Eine SVG-Datei besitzt entweder die Dateiendung .svg oder, wenn sie mit gzip komprimiert ist, .svgz. Der MIME-Typ ist image/svg+xml.

Geschichte

Seit August 1998 arbeitete das World Wide Web Consortium (W3C) an der Spezifikation der Vektorgrafiksprache SVG, von der im September 2001 die erste Empfehlung (engl. recommendation) unter dem Namen Scalable Vector Graphics (SVG) 1.0 Specification veröffentlicht wurde.

Aktuell ist die Spezifikation der Version 1.1, seit dem September 2003 vom W3C empfohlen. Die SVG-Version 1.2 ist zur Zeit in Arbeit (Stand 2005) und steht aktuell als Entwurf zur Verfügung.

SVG-Unterstützung in Browsern

Betriebssystem	Browser	Plugin	Grundformen	Animationen	Animationen mit abs. Zeitangabe (Wallclock)	Scripting
Windows	Internet Explorer 6	nativ	keine
	Internet Explorer 6	Adobe SVG-Viewer 3	vollständig	vollständig	keine	vollständig
	Mozilla 1.7.x/Firefox 1.0.x	nativ	keine
	Mozilla 1.7.x/Firefox 1.0.x	Adobe SVG-Viewer 3	instabil	instabil	keine	instabil
	Firefox 1.5.x	nativ	vollständig	keine	keine	vollständig
	SeaMonkey 1.0	nativ	vollständig	keine	keine	vollständig
	Opera 8	nativ	teilweise	vollständig	keine	vollständig
	Opera 9 (Preview 2)	Adobe SVG-Viewer 3	vollständig	vollständig	keine	vollständig
Linux	Konqueror	KSVG-KPart	vollständig	teilweise	keine	vollständig
	Mozilla 1.7.x/Firefox 1.0.x	nativ	keine
	Mozilla 1.7.x/Firefox 1.0.x	Adobe SVG-Viewer 3	keine
	Firefox 1.5.x	nativ	vollständig	keine	keine	vollständig
	Opera 8	nativ	vollständig	vollständig	keine	vollständig
Mac OS X	Safari 2.0	nativ WebKit ^*	vollständig	keine	keine	vollständig
	Safari 1.3	nativ	keine
	Safari 1.3	Adobe SVG-Viewer 3	vollständig	vollständig	keine	vollständig
	Firefox 1.5.x, Camino 1.0	nativ ^*	vollständig	keine	keine	vollständig
	Mozilla 1.7.x/Firefox 1.0.x, Camino 0.x	nativ	keine
	Mozilla 1.7.x/Firefox 1.0.x, Camino 0.x	Adobe SVG-Viewer 3	instabil	instabil	keine	instabil

(Tabelle Stand Februar 2006, Angaben Mac OS X bedürfen noch einer Bestätigung/Vervollständigung)

Darüber hinaus existiert eine Betaversion des Adobe SVG-Viewers in der Version 6 (Preview 1, mit Datum Juli 2003), die eine verbesserte Unterstützung der Standards und Verbesserungen bei der Integration in Mozilla Firefox beinhaltet. Das Projekt scheint jedoch seit Sommer 2003 zu ruhen.

Die derzeitige Version des Adobe SVG-Viewers 3 steht hier zum Download bereit.

SVG-Grafiken in der Wikipedia

Auch für die Nutzung in der Wikipedia können SVG-Grafiken hochgeladen werden. Um auch Nutzern mit inkompatiblen Browsern die Betrachtung zu ermöglichen, werden die Grafiken momentan noch auf dem Server in PNG-Dateien – also in Rasterbilder – umgewandelt. Durch Anklicken einer solchen umgewandelten Grafik und erneutes Anklicken auf der Seite 'Bild:xyz.svg' gelangt man zur SVG-Version.

Konferenzen

Die SVG Open ist eine internationale Konferenz, die sich mit allem rund um das Thema SVG beschäftigt. Mittlerweile hat sie bereits vier mal stattgefunden.

Zürich, Schweiz, 15.–17. Juli 2002
Vancouver, Kanada, 13.–18. Juli 2003
Tokio, Japan, 7.–10. September 2004
Enschede, Niederlande, 15–18. August 2005

Die nächste SVG Open findet vom 16.-19. Oktober 2006 in Victoria (Kanada) statt.

Struktur

SVG nutzt die Syntax der Extensible Markup Language (engl. für „erweiterbare Auszeichnungssprache“), XML. Die definierte Grafik ist somit in einer Baumstruktur aus verschiedenen Elementen und diesen Elementen zugewiesenen Attributen aufgebaut.

Jede SVG-Datei beginnt, wie bei XML-basierten Sprachen üblich, 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. Darauf folgt das Start-Tag „<svg>“. Die SVG-Datei wird durch das abschließende End-Tag „</svg>“ abgeschlossen.

Mit den Attributen "width" (engl.: Breite) und "height" (engl.: Höhe) des SVG-Starttags "<svg>" wird die Größe der Grafik definiert.

Elemente

Graphische Primitiven

Alle graphischen Objekte in SVG bauen auf einfachen grafischen Primitiven 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 bilden die Anweisungen, 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

ist identisch mit dem relativen

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 Attribute cx und cy festgelegt werden. Füllung, Art der Umrisslinie oder Transparenz werden durch das Attribut style definiert.

Ellipse : Die Ellipse wird durch die zwei Halbachsenradien definiert (rx und ry). Alle anderen Attribute entsprechen denen des Kreises.

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

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.

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

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

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


 Hallo Welt!

Animationen

Pfadanimation2.png Die Tags, die für die Auszeichnung von Animationen benutzt werden, stammen aus dem XML-Multimediastandard SMIL (Synchronized Multimedia Integration Language). Zustände, welche animiert werden können sind Transformation, Position, Sichtbarkeit, Farbe und Größe. Wichtig für das Verständnis von Animationen sind die Begriffe „Darsteller“ (das zu animierende Objekt) und „Drehbuch“ (die Zeitspanne der Animation).

Zeitangaben können von Millisekunden bis Stunden angegeben und verschieden ausgezeichnet werden. Für die meisten Animationstags wird ein Pflichtattribut benötigt, das die Art der Animation festlegt. Weitere grundlegende Komponenten sind, wie schon erwähnt, der Zeitrahmen, Zustände während der Animation (optional), der Zustand nach der Animation, und ob eine Wiederholung gestartet werden soll.

Die Eigenschaften eines Darstellers sind in SVG durch folgende Attribute festgehalten.

attributeName (was wird animiert)
attributeType (XML oder CSS)

Für die Zeitangabe werden logische Begriffe wie begin (engl.: Start, Beginn) end (engl.: Ende) und dur (engl. „duration“: Dauer) verwendet. Start, Wiederholungen etc. können auch von Ereignissen wie Mausberührung oder -klick abhängig gemacht werden.

Quellcode der Pfadanimation:

Quellcode des Play-Buttons:

Grafische Effekte/Filter

Turbulence.png Bekannte Grafikfilter sind aus DTP-Programmen übernommen worden und arbeiten nach dem Matrizen-Prinzip, bei dem Operatoren und Funktionen die Form der Matrix ausdrücken. Es wird, grob gesagt, jedes einzelne Pixel mit dem definierten Filtereffekt berechnet und auf das nächste übertragen. Auf diese Weise lassen sich Bilder und Grafiken auf verschiedenste Art und Weise bearbeiten.

Einige der möglichen Filter:

feTurbulence
feDisplacement
feGaussianBlur

Quellcode des Filters für den Himmel:

Scripting

scripting.png Interaktive Grafiken zu erstellen ist mit SVG relativ einfach. Man benötigt allerdings Kenntnisse in JavaScript, Perl, PHP, JSP etc. Man kann die DOM-Struktur einer SVG-Grafik manipulieren oder neue Elemente per Mausklick erschaffen. SVG-Grafiken lassen sich serverseitig generieren und können auch mit Datenbanken kommunizieren. Um Skripts in einem SVG-Dokument zu platzieren, hat man zwei Möglichkeiten. Entweder man definiert das Skript direkt im SVG-Dokument oder legt das Skript referenziert extern ab. Für aufwendige und häufig vorkommende Skripts ist es ratsam, die Programmcodes (Skripts) extern zu lagern, da es sehr schnell unübersichtlich werden kann, wenn alles in einem Dokument untergebracht wird. Um ein Beispiel zu geben, wie Events, Programmcode und SVG zusammenhängen, folgt die Darstellung eines Rechtecks, das mit jedem Mausklick weiter wächst (Beispiel als PNG abgespeichert).

Der Quellcode mit implementiertem JavaScript-Code

Hier wurde eine Funktion definiert, welche die DOM-Struktur der SVG-Datei hierarchisch durchläuft. Als erstes wird das Dokument aufgerufen. Die Funktion getElementById() ruft nun das Rechteck auf, das den Namen „jack“ trägt. Sobald die Funktion das Element „jack“ gefunden hat, wird darauf zugegriffen und dessen Attribute können verändert werden. In dieser Funktion wird das Attribut width mit der Funktion getAttribute() angesteuert und im weiteren mit einer relativ eindeutigen Formel verändert. Nach dem Definitionsbereich ist das Rechteck mit der ID jack aufgeführt; im selben Tag wird der Eventhandler onclick mit der Funktion wachsen(evt) auf das Rechteck definiert.

Beispiel

Variable Resistor.svg Ein kleines Beispiel illustriert die Verwendung der einzelnen Elemente gut. Das rechts dargestellte Bild Variable Resistor.svg hat den folgenden kommentierten Quelltext:

Koordinaten

SVG_Coordinates.svg Bitmap_Coordinates.svg

Im Gegensatz zu vielen anderen Grafikformaten (z. B. Bitmaps) sind SVG-Koordinaten Zahlen vom Typ Gleitkomma und nicht vom Typ Integer. Bei Medien mit Pixeln, beispielsweise einem Monitor, bezeichnet eine SVG-Angabe wie x = 100 y = 200 nicht den ganzen Bildschirmpixel, sondern die Grenze zwischen den Pixeln. Daher bedeutet z. B. eine Angabe von viewBox="0 0 800 600" im öffnenden SVG-Tag eine mathem. Breite von 800 Einheiten. Bei Pixelgrafiken wäre dies eine mathem. Breite von 801 Einheiten, da die Spalten 0 und 800 mitgezählt würden. Bei dünnen Linien ist hier in SVG besondere Vorsicht geboten. Eine Angabe

erzeugt, bei einer Skalierung von 1 : 1 im SVG-Tag, auf dem Monitor nicht etwa eine schwarze horiz. Linie von 1 Pixel Breite auf der Pixelzeile 300, sondern eine dunkelgraue Linie mit 2 Pixel Breite auf den Pixelzeilen 299 und 300, weil die Linie genau auf dem Rand zwischen den beiden Zeilen liegt. Erst eine Angabe von

führt zum gewünschten Ergebnis.

Literatur

Marcel Salathé, SVG Scalable Vector Graphics, ...für professionelle Einsteiger, Verlag Markt+Technik, ISBN 3827261880

Weblinks

Scalable Vector Graphics (SVG) Specification beim World Wide Web Consortium (englisch)
svg.tutorial.aptico.de (sehr gute Seite mit Tutorial zu SVG)
SELFSVG – SVG-Grafiken selbst erstellen (das Analogon zum bekannten SELFHTML)
about-svg.de (viele kommentierte Beispiele für SVG)
Scale-a-vector.de (mit unvollständigem Tutorial aber zahlreichen Zusatzinformationen)
SVG Authoring Guidelines (kurze Seite (englisch) mit guten Tipps zur Vermeidung von üblichen Fehlern)
Literatur und Ressourcen zu SVG (Sehr umfangreiche PDF-Datei. Vom selben Autor ist die Seite SVG – Learning by coding mit über 200 selbsterklärenden Beispielen.)
Online-Konverter SVG zu PNG/JPG/TIFF

Computergrafik | Datenformat | Beschreibungssprachen | XML

Scalable Vector Graphics | SVG | Scalable Vector Graphics | SVG | SVG | Scalable Vector Graphics | Scalable Vector Graphics | Scalable Vector Graphics | گرافیک برداری مقیاس‌پذیر | SVG | Scalable Vector Graphics | SVG | SVG | Scalable Vector Graphics | Scalable Vector Graphics | SVG | SVG | Scalable Vector Graphics | SVG | SVG | SVG | Scalable Vector Graphics | SVG | Scalable Vector Graphics | Scalable Vector Graphics | SVG | SVG | SVG | SVG

Gourt Home::Gourt :: Scalable Vector Graphics