Scalable Vector Graphics

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 ein Großteil des Sprachumfangs kann von den meistverwendeten Webbrowsern, mit Ausnahme des Internet Explorer, von Haus aus dargestellt werden. Beim Internet Explorer ist die Darstellung durch ein Plug-in wie den SVG-Viewer von Adobe möglich.

Scalable Vector Graphics
Dateiendung:	keine
www.w3.org/Graphics/SVG/

Animationen werden von SVG mittels SMIL unterstützt. Manipulationen des SVG-DOM sind mit Hilfe eingebetteter Funktionen via Skriptsprachen möglich. Zurzeit wird die Kombination und Integration von Standards des W3C untereinander in der Arbeitsgruppe Compound Document Formats erarbeitet.

Allgemein

Da SVG ein XML-basiertes Dateiformat ist, können SVG-Dateien mit Hilfe eines Texteditors bearbeitet werden. Dies bedeutet, dass die Texte, die in SVG-Dateien verwendet werden, auch für gegebenenfalls erforderliche computerunterstützte Übersetzung leichter zugänglich sind. Es gibt jedoch auch spezielle Programme zur Bearbeitung, zum Beispiel das freie Vektorgrafik-Programm Inkscape. Die empfohlene Dateiendung ist .svg oder, wenn die Datei mit gzip komprimiert ist, .svgz. Der MIME-Typ ist image/svg+xml.

SVG-Profile

In SVG gibt es 3 Profile, die für die Darstellung auf unterschiedlichen Ausgabegeräten abgestimmt sind. Sie werden im Wurzelelement (SVG) mit dem Attribut baseProfile angegeben. Sie sind abwärtskompatibel, da manche Elemente nicht implementiert sind.

• SVGF (baseProfile="full") ist für Computer als Ausgabegerät gedacht und unterstützt SVG komplett
• SVGB (baseProfile="basic") ist für PDAs
• SVGT (baseProfile="tiny") ist für Mobiltelefone

Geschichte

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

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

Diese beiden Standards wurden unter dem Namen Scalable Vector Graphics vereinigt und verbessert, sodass seit August 1998 das World Wide Web Consortium (W3C) an der Spezifikation der Vektorgrafiksprache SVG arbeitete und von der im September 2001 die erste Empfehlung (engl. recommendation) unter dem Namen Scalable Vector Graphics (SVG) 1.0 Specification veröffentlicht wurde.

Die ursprünglichen Sprachen VML und PGML wurden vom W3C abgelehnt und sind deshalb kein Standard. Microsoft weigert sich, SVG als Standard anzuerkennen. Der Windows Internet Explorer unterstützt folglich nur die Microsoft-eigene Vektorsprache VML.

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

Struktur

SVG nutzt die Syntax der Extensible Markup Language (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 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>

Es wird gelegentlich empfohlen, auf die Angabe des Dokumenttyps zu verzichten, da diese bei der Weiterverarbeitung unnötige Fehler produzieren kann. Ein Beispiel ist die Verwendung von RDF in den Metaangaben, die in der Spezifikation explizit erlaubt, jedoch von der DTD nicht unterstützt wird.

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

Koordinatensystem und -angabe

Koordinaten in SVG

Koordinaten in Rastergrafiken

Das Koordinatensystem hat seinen Koordinatenursprung in der linken oberen Ecke des Zeichenbereichs. Es handelt sich dabei um ein zweidimensionales kartesisches Koordinatensystem, bei dem die X-Achse nach rechts und die Y-Achse nach unten weist.

Im Gegensatz zu vielen anderen Grafikformaten (z. B. Bitmaps) sind SVG-Koordinaten Gleitkomma-Zahlen und nicht Ganzzahlen. Das heißt, eine Koordinate in SVG kann quasi beliebig genau sein, während der Wertebereich ganzzahliger Pixel-Angaben in Bitmaps durch die maximale Größe des Bildes beschränkt wird.

Bei bitmapbasierten Ausgabemedien, zum Beispiel 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 mathematische Breite von 800 Einheiten. Bei Pixelgrafiken wäre dies eine mathematische 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
<line x1="10" y1="300" x2="100" y2="300" stroke="#000000" stroke-width="1px" />
erzeugt, bei einer Skalierung von 1 : 1 im SVG-Tag, auf dem Monitor nicht etwa eine schwarze horizontale Linie von einem Pixel Breite auf der Pixelzeile 300, sondern eine dunkelgraue Linie mit zwei Pixel Breite auf den Pixelzeilen 299 und 300, weil die Linie genau auf dem Rand zwischen den beiden Zeilen liegt.
Erst eine Angabe von
<line x1="10" y1="300.5" x2="100" y2="300.5" stroke="#000000" stroke-width="1px" />
führt zum gewünschten Ergebnis.

Elemente

Dieses SVG-Bild besteht aus Vektorgrafiken und einem Text (SVG)

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

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

Grafische Primitive von SVG

Alle grafischen Objekte in SVG bauen auf einfachen grafischen Primitiven auf. Durch Kombination mehrerer grafischer Primitive lassen sich komplexe Objekte erzeugen. Für alle grafischen Primitiven können durch die Attribute Füllung, Art der Umrisslinie und Transparenz festgelegt werden. Einige der grafische Primitiven sind:

Pfad

Das Pfad-Element (<path />) ist eine Umrisslinie bestehend aus einer beliebigen Kombination von Linien, Bogenelementen und Beziekurven. Die Linien und Kurven der Umrisslinie werden in Form von Koordinaten und Vektoren beschrieben. Die Umrisslinie kann geschlossen und gefüllt werden.

Aus dem Pfadelement können alle anderen grafischen Primitive erzeugt werden, für die aus Gründen besser Nutzbarkeit zusätzlich eigene Elemente existieren.

ein Kreis in SVG

Kreis

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

Eine Ellipse in SVG, hier transformiert

Ellipse

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

ein Rechteck in SVG

Rechteck

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

Linie

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

Polyline

Das Polylinien-Element (<polyline />) definiert eine Linie, die neben den beiden Enpunkten zusätzliche Stützpunkte enthält. End- und Stützpunkte werden über Koordinatenpaare beschrieben. Die Linie verbindet die Stützpunkte in der Reihenfolge ihrer Definition im Quelltext.

Polygon

Das Polygon-Element (<polygon />) definiert ein Vieleck, das über seine seine Eckpunkte beschrieben wird. Wie bei der Polyline werden auch hier die Eckpuntke als Koordinatenpaare angegeben und in der Reihenfolge ihrer Definition miteinander verbunden.

Text

Das Text-Element (<text />) definiert ein Textfeld, zum Einfügen einzelner Zeichen und von Text in die Grafik. Das Textelement kann über weitere Attributen, wie zum Beispiel Schriftgröße und Schriftart, Laufrichtung, und Wortabstand formatiert werden. Text kann zudem über Unterelemente (<textspan />) strukturiert werden.

Einfügen von Rastergrafiken

Neben grafischen Primitiven zum Zeichnen von Vektordaten gibt es auch die Möglichkeit Rastergrafiken einzubinden.

<image x="50" y="50" width="860px" height="560px" xlink:href="http://www.example.com/example.png" />

Damit das funktioniert, muss der XML-Namensraum für xlink gesetzt werden:

<svg  ...   xmlns:xlink="http://www.w3.org/1999/xlink">
   <image ... xlink:href="..." />
</svg>

Animationen

Die XML-Elemente, die für die Auszeichnung von Animationen benutzt werden, stammen aus dem XML-Multimediastandard Synchronized Multimedia Integration Language (SMIL). 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 die Animation nach Beendigung wiederholt werden soll.

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

• attributeName (Das animierte Attribut)
• attributeType (XML-Teile oder Formatierungen in 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.

Beispiel einer Animation:

<path id="Pfad" d="M50,100 C50,50 125,50 125,100 S200,150 200,100" fill="orange" stroke="black" stroke-width="3px" stroke-linecap="round" />
<circle cx="-10" cy="-2.5" r="5" fill="yellow" stroke="white">
  <animateMotion id="kreis_ani" dur="5s" repeatCount="indefinite" begin="play.click" end="stop.click" rotate="auto">
    <mpath xlink:href="#Pfad" />
  </animateMotion>
</circle>

Grafische Effekte/Filter

Beispiel des feTurbulence-Filters. Links: Ohne Filter. Mitte: feTurbulence vom Typ „fractalNoise“. Rechts: feTurbulence vom Typ „turbulence“.

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

Einige der möglichen Filter:

• feTurbulence
• feDisplacement
• feGaussianBlur

Scripting

Scripting ist in SVG mittels ECMAScript (einer standardisierten Variante von JavaScript) möglich. 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.

Im folgenden Beispiel wird ECMAScript definiert, der bei Aufruf das betroffene Element um einen Pixel verbreitert. Die beiden Rechtecke in der Beispeilgrafik werden über einen Eventhandler mit dem Script verknüpft. Das Ergebnis sind zwei farbige Fortschrittbalken, die wachsen, wenn man die Maus über den Balken hin und her bewegt.

<?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="350" height="200">
  <defs> <!-- Definitionsbereich, hier mit Javascript -->
    <script type="text/ecmascript"><![CDATA[
    function wachsen(e)
    {
      var re = e.target;

      var breite = re.getAttributeNS(null, 'width');
      breite = breite + 1;
      if (breite > 250)
        breite = 10;

      re.setAttributeNS(null, 'width', breite);
    }
    ]]></script>
  </defs>
  <rect id="rechteck1" x="20" y="30" width="10" height="60"
      fill="blue" onmousemove="wachsen(evt)" cursor="pointer"/>
  <rect id="rechteck2" x="20" y="95" width="30" height="60"
      fill="red" onmousemove="wachsen(evt)" cursor="pointer"/>
 </svg>

Beispiel

Variable Resistor.svg

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

<?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="107" height="60" viewBox="-2 -5 105 55">
<!-- Anschlüsse links und rechts -->
<line x1="0" y1="25" x2="100" y2="25" fill="none" stroke="black"
     stroke-width="3px"/>
<!-- Das Widerstandsrechteck -->
<rect x="10" y="15" width="80" height="20" fill="white" stroke="black"
     stroke-width="3px" />
<!-- Der Schleifer -->
<polyline points="65 5  40 40  40 50" fill="none" stroke="black"
     stroke-width="3px"/>
<!-- Die Pfeilspitze wird gedreht -->
<polygon points="60 5  70 5  65 -5" stroke="black" stroke-width="3px"
     transform="rotate(33.7 65 5)" />
</svg>

Verbreitung

SVG-Unterstützung in Software

Viele Desktop-Umgebungen benutzen zunehmend SVG unter anderem als Format für Programmsymbole, Hintergrundbilder, Mauszeiger, weil sich SVG ohne Qualitätsverluste frei skalieren lässt. Bekannte Projekte sind das Oxygen Project für KDE und das Tango Desktop Project für GNOME. Generell ist zu bemerken, dass viele Betriebssysteme auf ihren grafischen Benutzeroberflächen vermehrt Vektorgrafiken benutzen; der zusätzliche Ressourcenverbrauch zum Rendern wird dabei durch steigende Hardwareressourcen kompensiert oder sogar schon von den Grafikkarten übernommen.

Programme, mit denen man SVG-Dateien erstellen und anzeigen kann, sind u. a.:

• Adobe Illustrator (proprietär; Windows, Mac OS)
• Adobe InDesign Layoutprogramm, nur Export, nur Version bis 5.x (proprietär; Windows, Mac OS X)
• Batik (frei; plattformunabhängig)
• Canvas X nur Export (proprietär; Windows, Mac OS X)
• CorelDRAW (proprietär; Windows)
• Gnuplot (frei)
• GeoGebra Geometrie-Software, Export (Java)
• Geonext Export (frei; Linux, Windows, Mac OS)
• GIMP GNU Bildbearbeitungsprogramm (frei; Linux/Unix, Windows, Mac OS X)
• Graphviz Graphendarstellung (plattformunabhängig)
• Inkscape Grafik- und Zeichenprogramm (GPL; Linux/Unix, Windows, Mac OS X)
• LilyPond Notensatzprogramm (GPL; Linux/Unix, Windows, Mac OS X)
• Karbon14 und nur Export KChart (Bestandteile von KOffice)
• Microsoft Visio (proprietär; Windows)
• OpenOffice.org (LGPL; Linux, Windows, Mac OS X, Solaris): Export nativ mit Einschränkungen, Import mit Plug-in
• Paint.NET (Windows) Import nativ
• PhotoLine Import (proprietär; Windows, Mac OS X)
• QCad 2D-CAD-Programm (proprietär/GPL; Windows, Linux, Mac OS X)
• Skencil (LGPL; Linux, Mac OS X, Solaris, FreeBSD)
• Sketsa (proprietär; plattformunabhängig)
• VectorMagic (proprietär; plattformunabhängige Flash-Anwendung)
• Xara Xtreme (proprietär; Linux, Mac OS X, Windows)

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-Erweiterungspack). Animationen mit absoluter Zeitangabe (Wallclock) unterstützt keiner der hier genannten Browser, auch mit Plugin nicht.

Rendering-Engine	Webbrowser	native Unterstützung			Unterstützung mit Plug-ins
		Grundformen	Scripting	Animationen
Presto	Opera 9.x	vollständig			—
Gecko	Firefox 3.0	vollständig		teilweise	—
	Firefox 2.0	teilweise	vollständig	keine	—
KHTML	Konqueror 4.1	vollständig		teilweise	—
WebKit	Safari 4	vollständig		teilweise	—
	Google Chrome (Beta)	teilweise		keine	—
	Amaya 10	vollständig	keine	teilweise	—
Trident	Internet Explorer 8	keine			vollständig mittels Adobe SVG-Viewer 3
	Internet Explorer 7	keine			vollständig mittels Adobe SVG-Viewer 3
	Internet Explorer 6	keine			vollständig mittels Adobe SVG-Viewer 3

Das US-amerikanische Software-Unternehmen Adobe Systems entwickelte einige Jahre einen Viewer für SVG, der gegenwärtig nach wie vor 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), die eine verbesserte Unterstützung der Standards und Verbesserungen bei der Integration in Mozilla Firefox beinhaltet. Das Projekt dürfte jedoch seit Sommer 2003 ruhen und mittlerweile hat Adobe offiziell bekanntgemacht, dass das Projekt eingestellt wurde. 2006 teilte Adobe mit, den Support des SVG-Viewers zum 1. Januar 2009 einzustellen. Beobachter gehen davon aus, dass diese Entscheidung mit der Akquise von Macromedia durch Adobe zusammenhängt. SVG in Verbindung mit SMIL wird als Konkurrenz zum proprietären Flash angesehen, für das Macromedia Bearbeitungswerkzeuge herstellte.

Eine weitere Möglichkeit SVG zu nutzen bietet sich unter Zuhilfenahme von JavaScript-Bibliotheken wie dojo.gfx oder Raphaël. Beide Funktionieren nach folgendem Prinzip: Man beschreibt die Bildelemente in JS-Syntax, und die Bibliothek generiert entweder SVG oder eine andere, vom Browser unterstützte Darstellungsform (für den Internet Explorer z.B. VML). Das bedeutet allerdings, dass nicht alle Funktionen der jeweiligen Formate auf breiter Front unterstützt werden, sondern nur eine gemeinsame Teilmenge der Funktionen auf diese Weise zur Verfügung stehen.

Seit Sommer 2009 liegen erste Versionen des Projektes SVG Web vor, einer JavaScript-Bibliothek, die SVG mit Hilfe des Flashplugins darstellt, sofern der Browser keine nativen Fähigkeiten hierzu besitzt. SVG Web unterstützt in Teilen die Standards SVG 1.1, SVG-Animation, Fonts, Video und Audio sowie DOM-Manipulationen mittels JavaScript. Das Projekt verwendet dabei die standardkonformen SVG-Auszeichnungen. Eine große Unterstützung erfährt das Vorhaben durch den Botschafter für offene Standards bei Google, Brad Neuberg. Das Projekt kann in erster Linie als Replik auf die mangelnde Unterstützung von offenen Webstandards durch Microsofts Internet Explorer verstanden werden.

Konferenzen

Die SVG Open ist eine internationale Konferenz, die sich mit allem rund um das Thema SVG beschäftigt.

• Mountain View, USA, 2. bis 4. Oktober 2009
• Nürnberg, Deutschland, 26. bis 28. August 2008
• 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

Das SVG-Logo

Die einfachste Variante des SVG-Logos

Um ein einheitliches Markenzeichen für SVG zu schaffen, wurde von SVG.org, unterstützt u. a. von Sun und Opera, ein Logowettbewerb ins Leben gerufen. Bis zum 1. Oktober 2006 waren Designer aufgerufen, eigene Vorschläge für ein SVG-Logo einzureichen. Dieses soll in Software und auf Webseiten, die SVG verwenden, eingesetzt werden. Am 17. Dezember 2006 wurde der Gewinner bekannt gegeben.

Literatur

• Alexander Adam: SVG, Scalable Vector Graphics. Franzis Verlag, 2002, ISBN 978-3-7723-6190-6. 
• 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

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

Wikibooks: SVG – Lern- und Lehrmaterialien

• 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
• Datenverdrahten Code und Informationen
• SVG.org Community-Website mit Wiki
• selfsvg.info Informationen und Tutorials
• Linkkatalog zum Thema SVG bei curlie.org (ehemals DMOZ)
• Tabellarische Auskunft über SVG-Unterstützung in Browsern (englisch)

Anmerkungen und Einzelnachweise

V – D

Standards des World Wide Web Consortiums (W3C)