calable Vector Graphics (SVG, englisch für 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, sind Inhalte von SVG-Dateien für computerunterstützte Übersetzung und andere Weiterverarbeitungen leicht zugänglich. Sie können prinzipiell auch direkt mit einem Texteditor bearbeitet werden. Bequemer ist allerdings die Bearbeitung mit speziellen Programmen (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.[
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. Ab dem Internet Explorer 10 unterstützt Microsoft VML nicht mehr.
Derzeit ist die Spezifikation der Version 1.2, die seit Dezember 2008 vom W3C empfohlen wird, aktuell. Seit 2011 wird an SVG 2 gearbeitet, das einige Änderungen und Verbesserungen enthält. Dessen Fertigstellung soll bis 2016 erfolgen.
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>
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. 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 den ganzzahligen Pixelkoordinaten bei Rastergrafiken (z. B. JPEG, PNG, BMP) sind SVG-Koordinaten Gleitkommazahlen. 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, gleich groß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.
Animation
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.
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 nebenstehenden Beispiel ist die Füllung (style-Attribut) eines Rechtecks sowie dessen Transformation (transform-Attribut) über die Dauer von fünf Sekunden animiert. Zu Beginn der Animation ist das Rechteck blau gefüllt und nicht verdreht, nach fünf 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
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
Analog DHTML kann SVG mit Hilfe von DOM-Scripting dynamisch gemacht werden. Dabei wird das Document Object Model von SVG (SVG-DOM) manipuliert und es können zum Beispiel neue Elemente erzeugt und eingefügt oder in Größe und Gestalt verändert werden. SVG kann so auf Benutzereingaben wie Mausklicks und -bewegungen reagieren oder auch vollständig algorithmisch generiert werden. Das lässt sich etwa in Web-Anwendungen nutzen (vergleiche den Grafikeditor SVG-edit, Diagramme in Google Docs oder Kartenanwendungen).
Zur Manipulation von SVG definiert der SVG-Standard das SVG-DOM. Es erweitert das für alle XML-Arten gleiche Standard-DOM durch SVG-spezifische Datentypen und Funktionen, etwa für grafische Transformationen (Affine Abbildungen). Diese Schnittstelle ist für verschiedene Programmiersprachen standardisiert (für die standardisierte JavaScript-Teilmenge ECMAScript, Java, Perl und Python). In Web-Browsern wird JavaScript zur DOM-Manipulation verwendet.
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.
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" 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>
Quelle: Wikipedia (https://de.wikipedia.org/wiki/Scalable_Vector_Graphics)