Scalable Vector Graphics (kurz auch SVG, 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. Praktisch alle relevanten Webbrowser können einen Großteil des Sprachumfangs darstellen.

Wesentlicher Vorteil des vektor-basierten SVG-Formates gegenüber anderen Grafikformaten wie JPG, PNG oder TIFF ist – insbesondere im Responsiven Webdesign – die Skalierbarkeit ohne Qualitätsverlust, gegenüber der prinzipbedingt verlustbehafteten Skalierbarkeit von pixel-basierten Raster-Grafiken.

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 direkt mit einem Texteditor erstellt werden oder sind die Ausgabe von Programmen mit andersartigem Input, siehe etwa Gnuplot. SVG-Editoren erlauben eine bequeme Bearbeitung in der graphischen Ansicht.

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. Gründe für die Entwicklung einer neuen Sprache sind unter anderem einer detaillierten Anforderungsliste im ersten Arbeitsentwurf zu entnehmen.

Am 4. 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. Bereits am 3. August 2001 wurde ein erster Arbeitsentwurf für eine Modularisierung von SVG veröffentlicht, um für mobile Geräte mit geringerem Leistungsumfang dafür geeignete Teile von SVG als Empfehlung zugänglich zu machen. Dies führte dann letztlich zu Version 1.1 mit drei Profilen, 'Tiny' für Geräte mit geringer Leistung, 'Basic' für Geräte mit etwas höherem Leistungsumfang und 'Full', das den vollen Funktionsumfang von SVG 1.0 umfasst. Einmal abgesehen von Korrekturen von bekannten Fehlern deckt sich SVG Full 1.1 von den Funktionen und Merkmalen her mit SVG 1.0.

Am 14. Januar 2003 wurden die Empfehlungen zu SVG 1.1 und SVG Mobile veröffentlicht.

Diese Empfehlungen wurden danach noch überarbeitet. Die letzte Bearbeitung der mobilen Variante stammt von 2009. Für SVG 1.1 gibt es eine zweite Bearbeitung vom 16. August 2011.

Zunächst wurde geplant, SVG 1.1 mit der Version 1.2 zu erweitern. Dies wurde allerdings primär von Anbietern mobiler Geräte mit Interesse aufgenommen, während die Anbieter von Darstellungsprogrammen für Rechner sich erst einmal auf die Implementierung von SVG 1.1 konzentriert haben. Dadurch ist das Profil für SVG Full 1.2 nicht über einen Arbeitsentwurf hinaus gelangt.

An der mobilen Version von SVG 1.2 wurde allerdings weitergearbeitet. Inzwischen war bei mobilen Geräten auch eine deutliche Steigerung des Leistungsumfanges eingetreten, weswegen man sich auf ein Profil für den mobilen Markt beschränkt hat. Am 22. Dezember 2008 wurde dann für diese Version eine Empfehlung für ein Tiny-Profil veröffentlicht. Gegenüber 1.1 führt dies einige neue Merkmale und Funktionen ein, etwa von SMIL übernommene Elemente für Audio, Video und der Einbettung von anderen SVG-Dokumenten, das deklarative Entfernen von Elementen aus dem Dokument-Objekt-Modell, neue Erweiterungen für den Zugriff von Skripten auf das Dokument-Objekt-Modell, eingeschränkte Transformationen, Mal-Dienste für Farbe, die Möglichkeit eine Hintergrundfarbe für den Malbereich anzugeben, automatischer Textumbruch, Möglichkeit für interaktive Texteingabe und Änderung von Text. Außerdem ist es gelungen, in dieser Version einige Unklarheiten und Unstimmigkeiten hinsichtlich der deklarativen Animation zu beheben, was zum großen Teil dann auch in die zweite Bearbeitung von SVG 1.1 als Fehlerberichtigung übernommen wurde.

Derzeit aktuelle Spezifikationen sind also die Version SVG Tiny 1.2 und die zweite Bearbeitung von SVG 1.1. Seit 2011 wird an SVG 2 gearbeitet, das zahlreiche Änderungen und Erweiterungen enthalten sollte. Seit 15. September 2016 existiert eine Candidate Recommendation. Zum 7. August und 4. Oktober 2018 sind weitere Candidate Recommendations erschienen. Inzwischen wurden zahlreiche geplante Neuerungen und Erfordernisse für die Version 2 wieder gestrichen.

Dokument Als XML-Dokument wird eine SVG in einer Baumstruktur aus verschiedenen Elementen und diesen Elementen zugewiesenen Attributen aufgebaut. Eine SVG-Datei kann, wie bei XML-basierten Sprachen üblich, mit der XML-Deklaration beginnen. Darauf können Verarbeitungsanweisungen folgen, etwa solche zur Referenzierung externer Stilvorlagen.

Von der Angabe der Dokumenttypdeklaration wird einerseits abgeraten, andererseits wird sie für ein korrektes Dokument als erforderlich angesehen. Möglich und bei SVG seit den Anfängen üblich ist es, Abkürzungen in Form von Entitäten in der internen Dokumenttypdeklaration zu notieren, um so die Dateigröße reduzieren zu können. Die Empfehlungen enthalten ab Version 1.0 entsprechende Beispiele.

Auf diesen Kopfbereich folgt, wie bei allen XML-Dokumenten, das Wurzelelement; für SVG-Dokumente hat dieses den Namen svg. Um das Element und seinen Inhalt eindeutig dem SVG-Namensraum zuzuordnen und ihm so eine definierte Bedeutung zu geben, die mit den SVG-Empfehlungen zu tun hat, wird der Namensraum beim Wurzelelement mit der XML-Attributkonstruktion xmlns notiert.

<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="800mm" height="600mm" viewBox="-400 -300 800 600"> <title>Titel der Datei</title> <desc>Beschreibung/Textalternative zum Inhalt.</desc>

<!--Inhalt der Datei -->

</svg>

Mit den Attributen width (englisch: Breite) und height (englisch: Höhe) des SVG-Elementes svg wird die Größe der Grafik definiert. Werden diese Attribute nicht gesetzt, wird die Größe impliziert, jeweils entsprechend einem Attributwert von 100% für width und height, was 100 % der Höhe und Breite des verfügbaren Anzeigebereiches entspricht. Mit dem Attribut viewBox kann angegeben werden, welcher Bereich der Zeichenebene im Anzeigebereich dargestellt werden soll. Gegebenenfalls erfolgt also eine Transformation dieses Bereiches hin zum Anzeigebereich. Wird das Attribut nicht angegeben, deckt sich der Bereich mit dem Anzeigebereich, es findet also keine Transformation statt. Weil dem Autor die Größe des Anzeigebereiches nicht bekannt ist, ist die Verwendung von viewBox allgemein zu empfehlen, insbesondere wenn für width und height keine Angaben oder solche in Prozent notiert sind.

Koordinatensystem und -angabe mini|Vergleich der Koordinatensysteme einer Rastergrafik und einer SVG. Die Rastergrafik erlaubt nur ganzzahlige Koordinaten, SVG als Vektorgrafik erlaubt auch Gleitkommazahlen als Koordinaten.

Das anfängliche 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. Durch Verwendung des Attributes viewBox und bei den meisten Nachfahren des Wurzelelementes auch durch Verwendung des Attributes transform ergibt sich ein vom anfänglichen Koordinatensystem abweichendes aktuelles Koordinatensystem. Alle relativen und absoluten Längenangaben innerhalb der Grafik werden auf dieses aktuelle Koordinatensystem bezogen. Als Einheiten können in der Vollversion von 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 Stilvorlagen-Sprache Cascading Style Sheets bekannten Einheiten zur Verfügung. Bei den tiny-Versionen werden im Inhalt hingegen nur dimensionslose Längen verwendet. Lediglich für width und height des Wurzelelementes sind wie in der Vollversion Einheiten zulässig. Dieses Vorgehen ist allgemein für SVG-Dokumente auch in der Vollversion sinnvoll, weil so fehleranfällige Umrechnungen von Einheiten vermieden werden.

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 das ganze 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 hat unterschiedliche Typen von Elementen: Elemente mit grafischer Präsentation, aufgebaut aus grafischen Primitiven Text in einer bestimmten Schriftart, die dem Render-Programm zur Verfügung stehen muss. Gruppierungselemente einerseits für darzustellende Elemente, aber auch als Vorrat zur Referenzierung durch andere Elemente Elemente zur Bereitstellung von Textalternativen und Metainformationen Elemente zur Bereitstellung von Maldiensten wie Farben, Farbverläufen und Mustern, auch von Markierungen, Masken oder Filtern Elemente zur Animation Elemente zur Aufnahme von anderen Sprachstrukturen (Stilvorlagen, Skripte, darstellbare Fragmente aus anderen Namensräumen) Elemente zur Einbettung externer Dokumente (Vektorgrafiken oder auch Rastergrafik), interner und externer Dokumentfragmente Elemente zur Definition von Schriftarten und alternativen Darstellungen von Glyphen

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

Alle grafischen Elemente in SVG bauen auf einfachen Grundelementen, sogenannten grafischen Primitiven auf. Durch Kombination mehrerer grafischer Primitive lassen sich komplexe Objekte erzeugen. Für alle grafischen Elemente gibt es festlegbare Eigenschaften (Attribute). Insbesondere Fill-Attribute – legen die Darstellung der Fläche fest. Stroke-Attribute – legen die Darstellung der Rahmenlinie fest. Opacity-Attribute – legen die Transparenz des Elements fest. Marker – legen fest, ob ein Linienende besonders gestaltet wird (z. B. Pfeile, Querstriche etc.) Die meisten Eigenschaften können auch mittels CSS in einem Style-Attribut festgelegt werden, was offiziell favorisiert wird.

Die in SVG verfügbaren grafischen Elemente sind der Pfad und mehrere, der Vereinfachung dienende Elemente.

Pfad