SVG (Scalable Vector Graphics) ist ein auf XML basierendes Vektorgrafikformat, das zur Darstellung einer Vielzahl von Grafiken im Web und anderen Umgebungen verwendet wird.
Obwohl es bereits in den späten 1990er Jahren entwickelt wurde, fristet SVG eher ein Schattendasein. Schlecht unterstützt und weitgehend in den 2000er ignoriert, können 2017 alle modernen Webbrowser SVG darstellen - und die meisten Vektorzeichnungsprogramme bearbeiten.
SVG ist das einzige Grafikformat, dass am ehesten den aktuellen Anforderungen der Web-Entwicklung an Skalierbarkeit, Reaktionsfähigkeit, Interaktivität, Programmierbarkeit, Leistung und Zugänglichkeit entspricht.
SVG-Dokumente sind reine Textdateien, die Linien, Kurven, Formen, Farben und Text beschreiben. Da es menschenlesbar, leicht verständlich und modifizierbar ist, kann SVG-Code über CSS oder JavaScript manipuliert werden. Dies ermöglicht SVG eine Flexibilität und Vielseitigkeit, die von herkömmlichen PNG-, GIF- oder JPGs nie erreicht werden kann.
SVG ist ein W3C-Standard, d.h. es kann problemlos mit anderen offenen Standardsprachen und Technologien wie JavaScript, DOM, CSS und HTML interagieren. Solange das W3C die globalen Industriestandards setzt, dürfte SVG weiterhin der De-facto-Standard für Vektorgrafiken im Browser sein.
SVG verwendet Formen, Zahlen und Koordinaten und nicht ein Pixelraster, um Grafiken darzustellen. Damit ist das Format auflösungsunabhängig und stufenlos skalierbar und in jeder Größe klar und gestochen scharf anzusehen. Im Gegensatz dazu haben rasterbasierte Formate wie GIF, JPG und PNG feste Dimensionen, so dass beim Skalieren die Darstellung pixelig wird.
SVG ist vollständig editierbar und skriptfähig. Über CSS und/oder JavaScript können einer Zeichnung alle Arten von Animationen und Interaktionen hinzugefügt werden.
SVG-Dateien sind textbasiert und können durchsucht und indiziert werden. Dadurch sind sie für Screenreader, Suchmaschinen und andere Geräte lesbar.
Einer der wichtigsten Aspekte, die für das Web mit maßgebend sind, ist die Größe der verwendeten Dateien. SVG-Grafiken hier punkten, da die erzeugten Dateien sind meist kleiner sind, als Rastergrafiken.
Einsatzmöglichkeiten des SVG-Formates:
Einfache Illustrationen und Diagramme
Alles was traditionell mit Bleistiften erstellt wurde, sollte perfekt in das SVG-Format passen.
Logos und Icons
Logos und Symbole müssen in jeder Größe - vom Button bis zum Plakat - klar und scharf sein, was sie zu einem idealen Kandidaten für SVG macht.
Animationen
Sie können ansprechende Animationen wie zum Beispiel Formmorphing. Zudem kann SVG mit CSS-Animationen interagieren.
Interaktivität (Diagramme, Grafiken, Infografiken, Karten)
SVG kann verwendet werden, um Daten darzustellen und dynamisch,basierend auf Benutzeraktionen, zu aktualisieren.
Derzeit unterstützen die meisten modernen Webbrowser die wichtigsten und grundlegenden Funktionen der SVG.
Stand: 21.05.2019