Scalable Vector Graphics

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

Scalable Vector Graphics (SVG, deutsch skalierbare Vektorgrafiken) 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 ist dafür die Installation eines Plug-ins erforderlich.

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.

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

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.

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 (engl. recommendation). Diese Empfehlung wurde von Teilen der IT-Industrie als Standard akzeptiert. Microsoft folgte dem nicht und unterstützte in seinen Anwendungen auch weiterhin nur die Vektorsprache VML. SVG-Dateien können daher mit dem Internet Explorer nicht ohne ein Plug-in angezeigt werden.

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

Dokument

Als XML-Dokument wird eine SVG-Grafik 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 (engl.: Breite) und height (engl.: Höhe) des SVG-Starttags <svg> wird die Größe der Grafik definiert.

Koordinatensystem und -angabe

Vergleich der Koordinatensysteme einer Rastergrafik und einer SVG-Grafik. Die Rastergrafik erlaubt nur ganzzahlige Koordinaten, SVG als Vektorgrafik erlaubt auch Kommazahlen 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. 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 zur Verfügung.

Im Gegensatz zu Rastergrafiken (z. B. Bitmaps) sind SVG-Koordinaten Gleitkommazahlen 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.

Elemente

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 Elemente

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:

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

Pfad

Das Pfad-Element (<path />) ist eine Umrisslinie bestehend aus einer beliebigen Kombination von Linien, Bogenelementen und Bézierkurven. 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.

Kreis

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

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.

Rechteck

Das 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 Endpunkten 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 Attribute, wie zum Beispiel Schriftgröße und Schriftart, Laufrichtung, und Wortabstand formatiert werden. Text kann zudem über Unterelemente (<textspan />) strukturiert werden.

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

Image

Das Rastergrafik-Element (<image />) bindet eine Rastergrafik ein, die über eine Pfadangabe, Breite und Höhe, sowie optional 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. Dies kann durch das style-Attribut oder Attribute zu einzelnen Eigenschaften geschehen. 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.

Ü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 geometrischer Transformationen (genauer: affine Abbildungen) in Position, Orientierung und Form verändert werden. Die Transformation wird einem beliebigen Element als Attribut angehängt. Zur Verfügung stehen Translation, Rotation, Skalierung, Scherung, sowie die Kombination verschiedener Transformationen in Form einer $3\times 3$-Matrix, von der nur sechs Elemente zur Durchführung der vier genannten geometrischen Operationen genutzt werden (die Matrix stellt somit eine Komposition einer linearen Abbildungsmatrix mit einem Translationsvektor dar) Die Transformationen können beliebig kombiniert werden (Die Hintereinanderausführung von Transformationen entspricht der Multiplikation der Transformationsmatrizen).

Animation

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

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

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, angewendet auf eine Gruppe von Elementen.

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.

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 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, polyline und polygon. Die rechts dargestellte Grafik Variable Resistor.svg (Schaltbild eines Potenziometers) ist mit dem folgenden, kommentierten Quelltext erzeugt:

Variable Resistor.svg

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

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.

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", engl. „einfach, grundlegend“) ist für etwas leistungsfähigere MIDs gedacht, definiert aber nicht den kompletten SVG-Standard.

SVGF

(baseProfile="full", engl. „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, Mauszeiger. Der zusätzliche Ressourcenverbrauch zum Rendern wird dabei durch steigende Hardwareressourcen kompensiert oder bereits direkt von Grafikkarten übernommen. Beispielhafte Projekte sind das Oxygen Project für KDE und das Tango Desktop Project für GNOME.

Editoren

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

• Adobe Illustrator (proprietär; Windows, Mac OS)
• Batik (freie Software; plattformunabhängig)
• CorelDRAW (proprietär; Windows)
• Gnuplot (freie Software; plattformunabhängig)
• GIMP GNU Bildbearbeitungsprogramm (freie Software; Linux/Unix, Windows, Mac OS X)
• Graphviz Graphendarstellung (plattformunabhängig)
• Inkscape Grafik- und Zeichenprogramm (freie Software; Linux/Unix, Windows, Mac OS X)
• Microsoft Visio (proprietär; Windows)
• OpenOffice.org (freie Software; Linux, Windows, Mac OS X, Solaris): Export nativ mit Einschränkungen, Import mit Plug-in
• Paint.NET (Windows): Import nativ

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.

Rendering-Engine	Webbrowser	Unterstützung
Presto	Opera 10.0	93,98 %
WebKit	Safari 4.0	81,93 %
	Google Chrome 2.0	81,39 %
Gecko	Mozilla Firefox 3.5	60,40 %
	Mozilla Firefox 3.0	60,40 %
KHTML	Konqueror 4.2	29,64 %
Trident	Internet Explorer	keine

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 ist mittlerweile laut Adobe offiziell eingestellt, der Support des SVG-Viewers wurde zum 1. Januar 2009 eingestellt.

Einige JavaScript-Bibliotheken bieten die Möglichkeit, Bildelemente in JS-Syntax beschreiben und aus dieser Beschreibung entweder SVG oder eine andere, vom Browser unterstützte Darstellungsform zu generieren (für den Internet Explorer z.B. VML). 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.

Mit Acid3 liegt nun ein Browsertest vor, der SVG als Teil des Tests definiert.

Logo

Die einfachste Variante des SVG-Logos

Um ein einheitliches Markenzeichen für SVG zu schaffen, wurde von der Website SVG.org mit Unterstützung von unter Anderem Sun Microsystems und Opera ein Logowettbewerb innerhalb der SVG-Community ins Leben gerufen. Designer waren aufgerufen, eigene Vorschläge für ein SVG-Logo einzureichen. Das rechts abgebildete Gewinnerlogo soll in Software und auf Webseiten mit SVG-Bezug eingesetzt werden, um eine gesteigerte Wahrnehmung von SVG zu erreichen.

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.

• 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

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)