SVG
SVG (Scalable Vector Graphics) ist ein XML-basiertes Dateiformat für Vektorgrafiken im Web. SVG-Grafiken bestehen nicht aus Pixeln, sondern aus mathematisch beschriebenen Formen – sie lassen sich deshalb beliebig skalieren, ohne an Qualität zu verlieren. Logos, Icons und Illustrationen im SVG-Format sind scharf auf jedem Bildschirm, haben kleine Dateigrösssen und lassen sich mit CSS und JavaScript animieren.
- Scalable Vector Graphics
Was ist SVG?
SVG steht für «Scalable Vector Graphics» – skalierbare Vektorgrafiken. Im Gegensatz zu Rasterformaten wie JPG oder PNG, die aus einem Raster von Pixeln bestehen, beschreibt SVG Grafiken mathematisch: als Punkte, Linien, Kurven und Formen. Browser können diese Beschreibungen in jeder Grösse perfekt darstellen – ob als 16-Pixel-Icon oder als 10-Meter-Plakatmotiv.
SVG-Dateien sind Textdateien im XML-Format – sie können mit einem Texteditor geöffnet und bearbeitet werden, direkt in HTML eingebettet werden und sind für Suchmaschinen lesbar. Das macht SVG zum idealen Format für Logos, Icons, Illustrationen und Diagramme im Web.
Funfact
SVG wurde bereits 1999 vom W3C standardisiert – doch erst mit der breiten Einführung moderner Browser um 2011 begann das Format seinen Siegeszug im Web. Zuvor versuchte Adobe mit dem proprietären Format «Flash» dieselbe Lücke zu füllen. Flash ist heute tot – SVG hat es überlebt und ist heute in praktisch jedem modernen Browser nativ unterstützt, ohne Plugin.
Wofür wird SVG eingesetzt?
- Logos: Scharf auf jedem Gerät, in jeder Grösse – vom Favicon bis zum Plakat
- Icons: Konsistente Darstellung auf Retina-Displays und normalen Bildschirmen
- Diagramme: Interaktive Charts und Infografiken direkt im Browser
- Animationen: Mit CSS oder JavaScript animierbar – ohne Video-Dateigrösse
- Karten: Interaktive Landkarten und Grundrisse im Web
- Illustrationen: Handgezeichnete Elemente oder technische Zeichnungen
Vorteile von SVG im Web
- Verlustfreie Skalierung: SVG-Grafiken sehen auf einem 27-Zoll-Monitor genauso scharf aus wie auf einem Smartphone – ohne mehrere Bildversionen in verschiedenen Auflösungen.
- Kleine Dateigrösse: Einfache Icons und Logos sind als SVG oft nur wenige Kilobyte gross – deutlich kleiner als ein gleichwertiges PNG in hoher Auflösung.
- Direkt im HTML einbettbar: SVG-Code kann direkt in den HTML-Quellcode eingefügt werden – das ermöglicht Farbänderungen per CSS und Animationen per JavaScript ohne externe Bilddatei.
- Barrierefreiheit und SEO: SVG-Elemente können mit Titeln und Beschreibungen versehen werden, die Screenreader vorlesen können. Der Inhalt ist für Suchmaschinen lesbar – anders als bei Bilddateien.