Scalable Vector Graphics

Vorlage:Infobox Dateiformat/Wartung/MagischeZahl fehltVorlage:Infobox Dateiformat/Wartung/Standard fehlt

Scalable Vector Graphics
Vorlage:Infobox Dateiformat/Wartung/Screenshot Format
Dateiendung:	.svg, .svgz
MIME-Type:	image/svg+xml[1]
Entwickelt von:	World Wide Web Consortium
Art:	vector image format
Erweitert von:	XML
Website:	SVG 1.1 SVG 1.2 Tiny (Mobile)

Scalable Vector Graphics (SVG, deutsch: skalierbare Vektorgrafik) ist die vom World Wide Web Consortium (W3C) empfohlene Spezifikation zur Beschreibung zweidimensionaler Vektorgrafiken. SVG, das auf XML basiert, wurde erstmals im September 2001 veröffentlicht. Einige der gebräuchlichsten Webbrowser können ohne nachträgliche Installation von Erweiterungen einen Großteil des Sprachumfangs darstellen. Beim Internet Explorer bis Version 8 ist dafür die Installation einer Erweiterung (Plug-in) erforderlich.

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

Da SVG ein XML-basiertes Dateiformat ist, können SVG-Dateien mit Hilfe eines Texteditors bearbeitet werden. Texte, die in SVG-Dateien verwendet werden, sind für gegebenenfalls erforderliche computerunterstützte Übersetzung leicht zugänglich. Es gibt jedoch auch spezielle Programme zur Bearbeitung, siehe Abschnitt SVG-Editoren. Die empfohlene Dateiendung ist .svg oder, wenn die Datei mit gzip komprimiert ist, .svgz. Der MIME-Typ ist image/svg+xml.^[2]

Geschichte

1998 wurden zwei Sprachen beim World Wide Web Consortium (W3C) zur Standardisierung eingereicht:

• Vector Markup Language (VML) von Microsoft und Macromedia.
• Precision Graphics Markup Language (PGML) von Adobe, IBM, Netscape und Sun.

Das W3C übernahm aber keine der beiden Sprachen als Empfehlung, sondern vereinigte sie und entwickelte sie unter eigener Regie weiter. Im September 2001 veröffentlichte das W3C unter dem Namen Scalable Vector Graphics (SVG) 1.0 Specification die erste Empfehlung (englisch recommendation). Diese Empfehlung wurde von Teilen der IT-Industrie als Standard akzeptiert. Microsoft folgte dem längere Zeit nicht und unterstützte in seinen Anwendungen nur die Vektorsprache VML. Die erste Version des Internet Explorers, die SVG nativ unterstützt, ist Version 9.^[3]

Derzeit ist die Spezifikation der Version 1.2, die seit Dezember 2008 vom W3C empfohlen wird, aktuell.

Dokument

Als XML-Dokument wird eine SVG 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 Tag </svg> abgeschlossen.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"
     version="1.1" baseProfile="full"
     width="800mm" height="600mm">
 
<!--Inhalt der Datei -->
 
</svg>

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

Koordinatensystem und -angabe

Vergleich der Koordinatensysteme einer Rastergrafik und einer SVG. Die Rastergrafik erlaubt nur ganzzahlige Koordinaten, SVG als Vektorgrafik erlaubt auch Gleitkommazahlen als Koordinaten.

Das Koordinatensystem hat seinen Koordinatenursprung in der linken oberen Ecke des Zeichenbereichs. Es handelt sich dabei um ein internes, dimensionsloses Koordinatensystem, bei dem die X-Achse nach rechts und die Y-Achse nach unten weist. Dieses Koordinatensystem wird durch die Attribute width (Breite) und height (Höhe) für die Ausgabe dimensioniert. Alle relativen und absoluten Größenangaben innerhalb der Grafik werden auf dieses interne Koordinatensystem bezogen.^[4] Als Einheiten können in SVG sowohl relative (wie em oder Prozent) als auch absolute Angaben (wie Meter oder Zoll) gewählt werden. Dafür stehen in SVG die von der Stylesheet-Sprache Cascading Style Sheets bekannten Einheiten^[5] zur Verfügung.

Im Gegensatz zu den ganzzahligen Pixelkoordinaten bei Rastergrafiken (z. B. JPEG, PNG, BMP) sind SVG-Koordinaten Gleitkommazahlen. Das heißt, eine Koordinate in SVG kann im Prinzip beliebig genau sein. Pixel-Angaben in Rastergrafiken hingegen haben eine beschränkte Auflösung, sind sie doch in ihrem Wertebereich auf ganze Zahlen sowie die Abmessungen des Bildes beschränkt – entsprechend der Natur der Pixel, die ja kleine, gleichgroße, unifarbene Rechtecke sind. Bei rasterbasierten Ausgabemedien – zum Beispiel einem Monitor – bezeichnet eine SVG-Angabe wie (x = 100, y = 200) nicht den ganzen Bildschirmpixel, sondern dessen obere linke Ecke (oder eine der anderen Ecken der entsprechenden Nachbarpixel). Vorausgesetzt bei diesem Beispiel ist, dass die Skalierung des SVG-Dokuments passend gewählt ist.

Elemente

SVG unterstützt drei grundsätzlich unterschiedliche Typen von Elementen:

• Vektorgrafiken, aufgebaut aus grafischen Primitiven
• Rastergrafiken, z. B. PNG-Bilder, die extern eingebunden werden können.
• Text in einer bestimmten Schriftart, die dem Render-Programm zur Verfügung stehen muss.

Grafische Elemente

Alle grafischen Elemente in SVG bauen auf einfachen Grundelementen, so genannten grafischen Primitiven auf. Durch Kombination mehrerer grafischer Primitive lassen sich komplexe Objekte erzeugen. Für alle grafischen Elemente können Füllung, Art der Umrisslinie und Transparenz durch Attribute festgelegt werden. Die in SVG verfügbaren grafischen Elemente sind:

Rechteck, Kreis, Ellipse, Pfad und Polygon als Beispiel für grafische Primitive. Pfad und Polygon sind gefüllt.

Pfad

Das Element <path /> definiert eine Linie bestehend aus einer beliebigen Kombination von Strecken, Ellipsenbögen, quadratischen und kubischen Bézierkurven sowie Neupositionierungen, die mit Hilfe von relativen oder absoluten Koordinaten beschrieben werden. Der Pfad kann geschlossen, gefüllt und als Clipping-Pfad verwendet werden. Der Pfad ist das mächtigste Grafikelement in SVG. Praktisch alles, was durch andere Grafikelemente gezeichnet werden kann, kann durch ein Pfad-Element äquivalent dargestellt werden. Die weiteren Grafikelemente existieren, um eine bessere Nutzbarkeit zu gewährleisten. Sie können ebenso wie das Pfad-Element als Umriss gezeichnet, gefüllt und zum Clipping benutzt werden (mit Ausnahme des <image />-Elements).

Kreis

Das Element <circle /> definiert einen Kreis, der durch seinen Radius und durch die Position des Mittelpunktes beschrieben wird.

Ellipse

Das Element <ellipse /> definiert eine Ellipse, die durch ihre zwei Halbachsenradien sowie, analog zum Kreis-Element, durch die Position ihres Mittelpunktes beschrieben wird.

Rechteck

Das Element <rect /> definiert ein Rechteck über die Position seiner oberen linken Ecke, seiner Breite und seiner Höhe. Optional können die Ecken des Rechteckes abgerundet werden.

Linie

Das Element <line /> definiert eine einfache gerade Linie (Strecke), die über die Koordinaten ihrer beiden Endpunkte beschrieben wird.

Polygonzug

Das Element <polyline /> definiert eine beliebige Zahl von Punkten, die als Polygonzug durch Strecken verbunden werden. Die Punkte werden über Koordinatenpaare beschrieben.

Polygon

Das Element <polygon /> definiert ein Vieleck, das über seine Eckpunkte beschrieben wird. Wie beim Polygonzug werden auch hier die Eckpunkte als Koordinatenpaare angegeben und in der Reihenfolge ihrer Definition miteinander verbunden.

Text

Mit dem Element <text /> wird Text in die Grafik eingebettet. Das Textelement kann über Attribute, wie zum Beispiel Schriftgröße und Schriftart, Laufrichtung und Wortabstand formatiert werden. Text kann zudem über Unterelemente (<tspan />) strukturiert werden.

Zusätzlich zu den vektorgrafischen Grundelementen existiert die Möglichkeit, Rastergrafiken in die Vektorgrafik einzubetten.

Image

Das Element (<image />) bindet eine Rastergrafik ein, die über eine Pfadangabe, Breite und Höhe sowie die Position beschrieben wird.

Alle diese Elemente können durch das Gruppenelement (<g />) zusammengefasst werden. Transformationen und Styling, die auf das Gruppenelement angewendet werden, gelten für alle damit zusammengefassten Kind-Elemente.

Styling

Jedes Element kann durch Angabe von Styling-Eigenschaften in seiner optischen Erscheinung angepasst werden. Das geschieht durch das style-Attribut oder Attribute zu einzelnen Eigenschaften. Verändert werden können zum Beispiel Füllung, Konturlinie und Transparenz der Elemente, sowie bei Text die Eigenschaften der Schrift. Die Styling-Eigenschaften richten sich dabei in weiten Teilen nach den im XML-Umfeld weit verbreiteten Stylesheet-Sprachen XSL und Cascading Style Sheets.^[6]

Über zusätzliche Elemente können nicht nur Farben, sondern auch Farbverläufe und Muster verwendet werden.

Transformation

Jedes Element und jede Gruppe von Elementen kann durch eine Reihe affiner Transformationen in Position, Orientierung und Form verändert werden. Die Transformation wird einem beliebigen Element als Attribut angehängt. Zur Verfügung stehen Translation (Parallelverschiebung), Rotation, Skalierung, Scherung, sowie die Kombination verschiedener Transformationen in Form einer 3×3-Matrix. Die Matrix wird auf Punkte in projektiver Darstellung angewandt und stellt somit die Kombination einer linearen Abbildung in Form einer 2×2-Matrix mit einer Translation dar, ohne jedoch zwischen den beiden letzten Abbildungstypen unterscheiden zu müssen.^[7] Die Transformationen können beliebig kombiniert werden, wobei die Hintereinanderausführung von Transformationen der Multiplikation der Transformationsmatrizen entspricht.

Beispiele: Eine Parallelverschiebung hat in SVG die Darstellung

"translate(tx ty)" = "matrix(1 0 0 1 tx ty)" = $\begin{pmatrix} 1&0&t_x\\ 0&1&t_y\\ 0&0&1\\ \end{pmatrix}$,

eine Skalierung in x- und y-Richtung

"scale(sx sy)" = "matrix(sx 0 0 sy 0 0)" = $\begin{pmatrix} s_x&0&0\\ 0&s_y&0\\ 0&0&1\\ \end{pmatrix}$.

Eine Abbildung wirkt auf einen Punkt P – d.h. auf dessen projektive Darstellung in homogenen Koordinaten – indem diese von links mit der entsprechenden Abbildungsmatrix multipliziert wird. Wird P um T verschoben, so sind seine neuen Koordinaten

$T(P) = T\cdot P = \begin{pmatrix}1&0&t_x\\ 0&1&t_y\\ 0&0&1\\ \end{pmatrix} \cdot\begin{pmatrix}p_x\\ p_y\\ 1\\ \end{pmatrix} =\begin{pmatrix}p_x+t_x\\ p_y+t_y\\ 1\\ \end{pmatrix}$

analog für eine Skalierung mit S:

$S(P) = S\cdot P = \begin{pmatrix}s_x&0&0\\ 0&s_y&0\\ 0&0&1\\ \end{pmatrix} \cdot\begin{pmatrix}p_x\\ p_y\\ 1\\ \end{pmatrix} =\begin{pmatrix}s_x\cdot p_x\\ s_y\cdot p_y\\ 1\\ \end{pmatrix}$

Für die Hintereinanderausführungen von T und S gilt in diesem Falle

$T\circ S = T\cdot S = \begin{pmatrix}s_x&0&t_x\\ 0&s_y&t_y\\ 0&0&1\\ \end{pmatrix}$

sowie

$S\circ T = S\cdot T = \begin{pmatrix}s_x&0&s_x\!\cdot\! t_x\\ 0&s_y&s_y\!\cdot\! t_y\\ 0&0&1\\ \end{pmatrix}$

die letzte Darstellung kann in SVG z. B. codiert werden als

"scale(sx sy) translate(tx ty)"

oder als

"matrix(sx 0 0 sy sx·tx sy·ty)"

Animation

Schematisches Beispiel einer Animation in SVG: Gleichzeitige Animation der Füllfarbe und der Transformationen eines Rechtecks über 5 Sekunden.

Da eine SVG-Datei intern eine DOM-Struktur aufweist, kann diese durch die vorhandenen Browser-Techniken, wie ECMAScript und CSS immer zur Laufzeit verändert und dadurch eine animierte Grafik generiert werden. Die Entwickler von Webkit haben auch einen Entwurf für CSS-Animationen entwickelt, der in den offiziellen CSS3-Standard beim W3C einfließen soll.^[8][9]

Beispiel einer animierten SVG mittels SMIL (Anklicken, um die Animation zu starten; funktioniert nicht in allen Browsern)

Durch XML-Multimediastandard Synchronized Multimedia Integration Language (SMIL) können aber auch die XML-Elemente für die Auszeichnung von Animationen benutzt werden. 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 der Zeitrahmen, Zustände während der Animation (optional), der Zustand nach der Animation, und ob die Animation nach Beendigung wiederholt werden soll. Für die Zeitangabe werden logische Begriffe wie begin (englisch: Start, Beginn) end (englisch: Ende) und dur (englisch „duration“: Dauer) verwendet. Start, Wiederholungen etc. können auch von Ereignissen wie Mausberührung oder -klick abhängig gemacht werden.

Die Eigenschaften eines Darstellers sind in SVG durch zwei Attribute festgehalten: attributeName gibt das animierte Attribut an, attributeType gibt die XML-Teile oder Formatierungen in CSS an. Im nebenstehendem Beispiel ist die Füllung (style-Attribut) eines Rechtecks sowie dessen Transformation (transform-Attribut) über die Dauer von 5 Sekunden animiert. Zu Beginn der Animation ist das Rechteck blau gefüllt und nicht verdreht, nach 5 Sekunden ist es grün gefüllt, etwas versetzt und um 150° verdreht. Die Zwischenzustände werden gleichmäßig animiert, im Beispiel schematisch durch vier Zwischenschritte dargestellt.

Grafische Effekte und Filter

Unschärfe-Filter in SVG. Links ohne, rechts mit Filter, angewandt auf eine Gruppe von Elementen.

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

Programmierung

Mit Hilfe der jeweiligen Implementierung des SVG-Viewers von ECMAScript (im Browser ist dies im allgemeinen eine Version von JavaScript) können in SVG Programme geschrieben werden. Mit dem Document Object Model von SVG (SVG-DOM) kann man die XML-Struktur einer Grafik manipulieren und so zum Beispiel neue Elemente per Mausklick erzeugen und einfügen oder in Größe und Gestalt verändern.

Beispiel

Das folgende Beispiel illustriert die Verwendung eines SVG-Dokuments zur Anzeige einer einfachen Vektorgrafik. Es zeigt das Grundgerüst eines SVG-Dokumentes sowie die Verwendung der grafischen Primitive line, rect und polygon. Das Polygon, welches zur Darstellung der Pfeilspitze verwendet wird, wird außerdem mit Hilfe einer Transformation um 135° um die Spitze gedreht.

Variable Resistor.svg

Die rechts dargestellte Grafik Variable Resistor.svg (Schaltbild eines Potentiometers) ist mit dem folgenden, kommentierten Quelltext erzeugt:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns:ev="http://www.w3.org/2001/xml-events"
      version="1.1" baseProfile="full"
      width="700px" height="400px" viewBox="0 0 700 400">
 
        <!-- Anschlüsse links und rechts -->
        <line x1="0" y1="200" x2="700" y2="200" stroke="black" stroke-width="20px"/>
        <!-- Das Rechteck -->
        <rect x="100" y="100" width="500" height="200" fill="white" stroke="black" stroke-width="20px"/>
        <!-- Der Schleifer -->
        <line x1="180" y1="370" x2="500" y2="50" stroke="black" stroke-width="15px"/>
        <!-- Die Pfeilspitze -->
        <polygon points="585 0 525 25 585 50" transform="rotate(135 525 25)"/>
</svg>

Profile

In SVG gibt es drei Profile, die für die Darstellung auf unterschiedlichen Ausgabegeräten abgestimmt sind und jeweils unterschiedlich umfangreich den SVG-Standard definieren. Sie werden im Wurzelelement (SVG) mit dem Attribut baseProfile angegeben.^[10]

SVGT

(baseProfile="tiny") ist für stark beschränkte Mobile internet devices (MID) und Mobiltelefone gedacht. Es definiert nur eine kleine Untermenge des SVG-Standards.

SVGB

(baseProfile="basic", englisch „einfach, grundlegend“) ist für etwas leistungsfähigere MIDs gedacht, definiert aber nicht den kompletten SVG-Standard.

SVGF

(baseProfile="full", englisch „voll, vollständig“) ist für Computer als Ausgabegerät gedacht und unterstützt SVG komplett.

Durch die Benutzung von Profilen wird auch leistungsschwachen Geräten ermöglicht, mit standardkonformen SVG-Dateien zu arbeiten.

Verbreitung

Desktop

Einige Desktop-Umgebungen benutzen SVG als Format für Programmsymbole, Hintergrundbilder oder Mauszeiger. Der zusätzliche Ressourcenverbrauch zum Rendern wird dabei durch steigende Hardwareressourcen kompensiert, so etwa von Grafikkarten direkt übernommen. Beispielhafte Projekte sind das Oxygen Project^[11] für KDE und das Tango Desktop Project^[12] für GNOME.

Editoren

Sodipodi: 2.952 Byte	manuell: 194 Byte

Programme, mit denen SVG-Dateien erstellt und bearbeitet werden können, sind u. a.:

• Adobe Illustrator (proprietär; Windows, Mac OS)
• CorelDRAW (proprietär; Windows)
• Inkscape – Grafik- und Zeichenprogramm (freie Software; Linux/Unix, Windows, Mac OS X)
• LibreOffice – Nativer Import und Export mit Einschränkungen (freies Office-Paket, Abspaltung von OpenOffice.org)
• sK1 – Graphics und Druckvorstufe (freie Software; Linux/Unix)
• Sodipodi – Inzwischen eingestellt (freie Software; Windows/Unix)
• Xara Xtreme – Grafik- und Zeichenprogramm (freie Software für Linux/Unix; proprietär für Windows)

Die von Editoren erzeugten SVG-Dateien sind in der Regel wesentlich komplexer als manuell erzeugte Dateien (siehe Abbildung zum Vergleich). Grundformen (Rechtecke, Kreise etc.) sind mit ihren jeweiligen grafischen Elementen einfach zu definieren, wohingegen Editoren für derartige Aufgaben Pfad-Elemente meist sehr aufwendig einsetzen. Damit ergibt sich dasselbe Problem, das auch aus HTML oder grafischen Editoren für Programmiersprachen bekannt ist. Eine optimierte Kurzform ist bisher dem Menschen vorbehalten (Beispiel: Verschlankung der Grafik Hanse Rostock). Überlegt angewandt kann das Pfad-Element sehr sinnvoll sein, siehe dazu die Versionsgeschichte zur Entschlackung der Dateigröße des Hexagramm 64 von 4.824 auf zuletzt 217 Byte.

SVG-Unterstützung in Browsern

SVG wurde in erster Linie für das World Wide Web entworfen. Viele Webbrowser können es ohne weiteres darstellen, d. h. sie benötigen kein SVG-Zusatzprogramm (Browser-Plug-in). Verschiedenen Quellen zufolge wird SVG bei ca. 50 % der Internetnutzer unterstützt.^[13]

Rendering-Engine	Webbrowser	SVG 1.1-Unterstützung[14]
Presto	Opera 11.01	95,44 %
WebKit	Safari 5.0	82,48 %
	Google Chrome 10.0	89,23 %
Gecko	Mozilla Firefox 4.0	82,30 %
Trident	Internet Explorer 9.0	59,64 %
	Internet Explorer bis Version 8.0	keine[15]

Das amerikanische Software-Unternehmen Adobe Systems entwickelte vor einigen Jahren einen Viewer für SVG, der noch immer in verschiedenen Browsern auf mehreren Plattformen genutzt werden kann. Über die aktuelle Version hinaus existiert eine Betaversion des Adobe SVG-Viewers in der Version 6 (Preview 1, mit Datum Juli 2003),^[16] die eine verbesserte Unterstützung der Standards und Verbesserungen bei der Integration in Mozilla Firefox beinhaltet. Das Projekt ist mittlerweile laut Adobe offiziell eingestellt, der Support des SVG-Viewers wurde zum 1. Januar 2009 eingestellt.^[17] [18]

Einige JavaScript-Bibliotheken (z. B. dojo.gfx, Raphaël, SVG Web) bieten die Möglichkeit, Bildelemente in JS-Syntax zu beschreiben. Über diesen Umweg kann dann automatisch ein vom Browser unterstütztes Darstellungsformat generiert werden (z. B. VML oder Flash), falls dieser keine SVGs unterstützt. Wenn doch, dann wird direkt eine SVG generiert. All das kann jedoch bedeuten, dass nicht alle Möglichkeiten, die SVGs eigentlich bieten, so genutzt werden können.

Mit Acid3 liegt ein Test vor, der Browser in gewissem Rahmen darauf prüft, ob sie SVGs darstellen können.

SVG Open

Seit 2002 findet einmal jährlich die Konferenz SVG Open statt, bei der in Vorträgen und Workshops aktuelle Entwicklungen im Umfeld von SVG vorgestellt werden.

• Cambridge, USA, 17. Oktober bis 20. Oktober 2011^[19]
• Paris, Frankreich, 30. August bis 1. September 2010^[20]
• Mountain View, USA, 2. bis 4. Oktober 2009^[21]
• Nürnberg, Deutschland, 26. bis 28. August 2008^[22]
• Minato, Tokio, Japan, 4. bis 7. September 2007
• Enschede, Niederlande, 15. bis 18. August 2005
• Tokio, Japan, 7. bis 10. September 2004
• Vancouver, Kanada, 13. bis 18. Juli 2003
• Zürich, Schweiz, 15. bis 17. Juli 2002

Literatur

• Alexander Adam: SVG, Scalable Vector Graphics. Franzis Verlag, 2002, ISBN 978-3-7723-6190-6.
• Francis Hemsher: SVG Companion. 2011 (englisch, Barnes & Noble E-Book).
• Marcel Salathé: SVG – Scalable Vector Graphics … für professionelle Einsteiger. Markt+Technik, München 2001, ISBN 978-3-8272-6188-5.
• Helma Spona: SVG – Webgrafiken mit XML. vmi-Buch, 2001, ISBN 978-3-8266-7181-4.

Weblinks

 Wikibooks: SVG – Lern- und Lehrmaterialien

 Commons: SVG-Beispiele – Album mit Bildern und/oder Videos und Audiodateien

 Commons: Hand-SVGs – Sammlung von Grafiken, die mit Text-Editoren manuell erstellt wurden

 Commons: Vereinfachungen – Beispiele für manuell vereinfachte Grafiken

• Scalable Vector Graphics (SVG) Specification beim World Wide Web Consortium (englisch)
• Scalable Vector Graphics Tiny (SVGT) Specification beim World Wide Web Consortium (englisch)
• Tutorial zum Thema SVG mit Beispieldateien
• SVG.org Community-Website mit Wiki
• selfsvg.info Informationen und Tutorials
• Links zum Thema SVG im Open Directory Project
• Tabellarische Auskunft über SVG-Unterstützung in Browsern (englisch)

Einzelnachweise

1. ↑ M Media Type registration for image/svg+xml
2. ↑ Introduction - SVG 1.1 - 20030114>
3. ↑ Dean Hachamovitch: HTML5, Hardware Accelerated: First IE9 Platform Preview Available for Developers
4. ↑ SVG – Coordinate Systems, Transformations and Units. W3C, 14. Januar 2003, abgerufen am 10. September 2009. 
5. ↑ SVG – Basiseinheiten. CSS4You, 20. Oktober 2006, abgerufen am 3. September 2009. 
6. ↑ SVG – Styling. W3C, 14. Januar 2003, abgerufen am 10. September 2009. 
7. ↑ SVG – The transform attribute. Abgerufen am 28. August 2009. 
8. ↑ CSS Animation. Surfin’ Safari, 31. Oktober 2007, abgerufen am 22. Juni 2010. 
9. ↑ CSS Animation. Surfin’ Safari, 5. Februar 2009, abgerufen am 22. Juni 2010. 
10. ↑ Mobile SVG Profiles: SVG Tiny and SVG Basic. W3C, abgerufen am 29. August 2009. 
11. ↑ siehe auch: „Oxygen Project“ in der englischsprachigen Wikipedia; Homepage der Entwickler
12. ↑ siehe auch: „Tango-Desktop-Project“ in der englischsprachigen Wikipedia; offizielle Homepage
13. ↑ Webanalyse: Verbreitung von Webtechnologien und Plugins. webmasterpro.de, abgerufen am 4. September 2009. 
14. ↑ codedread.com: SVG Test Suite results. 24. März 2011, abgerufen am 27. März 2011 (englisch). 
15. ↑ Mit geeigneten Plug-ins (siehe Abschnitt „SVG-Unterstützung in Browsern“) ist eine Unterstützung des SVG-Standards im Internet Explorer möglich.
16. ↑ http://www.adobe.com/svg/viewer/install/beta.html
17. ↑ Adobe - Adobe SVG Viewer download area
18. ↑ Adobe stellt SVG-Viewer ein
19. ↑ Homepage SVG Open 2011
20. ↑ Homepage SVG Open 2010
21. ↑ Homepage SVG Open 2009
22. ↑ Homepage SVG Open 2008

Standards des World Wide Web Consortiums

Empfehlungen (Recommendations): ATAG | Canonical XML | CSS | CharMod | CC/PP | DDR Simple API | DOM | EXI | Element Traversal | EMMA | GRDDL | HTML | ITS | MathML | OWL | P3P | PICS | PLS | PNG | POWDER | RDF | RDF-Schema | Ruby | SISR | SKOS | SML | SMIL | SOAP | SOAP MTOM | SPARQL | SRGS | SSML | SVG | SSML | UAAG | VoiceXML | WCAG | Webarch | WebCGM | WSDL | WS-Adressing | WS-Policy | XHTML | XML | XInclude | XKMS | XLink  | XML Base | XMLEnc-Decrypt | XML Events | XML Information Set | XML Namespace | XML Schema | XML Signature | XOP | XForms | XPath | XPointer | XProc | XQuery | XSL | XSLT

Arbeitsentwürfe (Working Drafts) und Kandidaten (Candidate Recommendations): Capture API | CCXML | CDF | Clipboard API | Contacts API | Cross-Origin Resource Sharing | CURIE | EARL | File API | HTML5 | HTML Canvas | HTML Microdata | Indexed Database API | InkML | LTLI | RIF | Selectors API | System Information API | WAI-ARIA | Web IDL | Web Sockets API | Web SQL Database | WICD | Widgets | XFrames | XBL