SVG steht für Scalable Vector Graphics und bezeichnet ein Bildformat, das Grafiken nicht als Pixelraster, sondern als mathematische Beschreibung speichert. Genau darin liegt der große Unterschied zu Formaten wie PNG oder JPEG: Ein SVG-Bild lässt sich beliebig vergrößern, ohne dass es unscharf oder verpixelt wird. Wer im Web arbeitet, Logos gestaltet, Icons einbindet oder einfach verstehen möchte, warum viele Webseiten heute auf SVG setzen, findet hier eine klare Einordnung des Formats, seiner Funktionsweise und seiner tatsächlichen Vor- und Nachteile.
Was ist SVG genau?
SVG ist ein offener, textbasierter Standard, der vom World Wide Web Consortium (W3C) entwickelt wurde. Anders als bei einem Foto, das aus einzelnen Bildpunkten besteht, beschreibt eine SVG-Datei Formen, Linien, Kurven und Farben über XML-Code. Ein Kreis wird also nicht durch Tausende Pixel dargestellt, sondern durch eine einfache Anweisung mit Mittelpunkt und Radius.
Weil eine SVG-Datei im Kern eine Textdatei ist, lässt sie sich sogar mit einem einfachen Texteditor öffnen und direkt bearbeiten. Das unterscheidet SVG grundlegend von binären Bildformaten und macht es zu einem festen Bestandteil moderner Webentwicklung, etwa für Logos, Icons, Diagramme, Illustrationen und Infografiken.
Wie funktioniert SVG technisch?
Der Aufbau einer SVG-Datei folgt der XML-Syntax. Innerhalb eines übergeordneten svg-Elements werden geometrische Grundformen wie Rechtecke, Kreise, Linien oder Pfade definiert, dazu kommen Attribute für Farbe, Füllung, Transparenz oder Umrandung. Da es sich um Code handelt, lassen sich SVG-Grafiken auch direkt per CSS gestalten und per JavaScript animieren oder interaktiv verändern.
Diese enge Verbindung zu Webtechnologien ist einer der größten praktischen Vorteile: Ein SVG-Icon kann beim Hovern die Farbe wechseln, ein Diagramm kann live mit Daten aktualisiert werden, und Animationen lassen sich ohne zusätzliche Bilddateien direkt im Code umsetzen.
Vorteile von SVG gegenüber anderen Bildformaten
Der wichtigste Vorteil ist die Skalierbarkeit. Ein SVG-Logo sieht auf einem kleinen Smartphone-Display genauso scharf aus wie auf einem großen 4K-Monitor, weil das Bild bei jeder Bildschirmgröße neu berechnet wird, statt aus vorhandenen Pixeln vergrößert zu werden.
Hinzu kommt die Dateigröße: Für einfache Grafiken wie Icons oder Logos sind SVG-Dateien oft deutlich kleiner als vergleichbare PNG-Dateien, was sich positiv auf Ladezeiten auswirkt. Da der Inhalt als Text vorliegt, ist SVG zudem barrierefreier nutzbar, etwa in Kombination mit Screenreadern, und lässt sich leichter von Suchmaschinen auslesen und interpretieren als ein reines Pixelbild.
Ein weiterer Pluspunkt ist die Bearbeitbarkeit. Änderungen an Farben, Formen oder Effekten lassen sich oft direkt im Code vornehmen, ohne die Originaldatei in einem Grafikprogramm neu exportieren zu müssen.
SVG im Vergleich zu PNG und JPEG
Für Fotos und Bilder mit vielen Farbverläufen bleibt JPEG oder PNG meist die bessere Wahl, weil SVG für komplexe, fotorealistische Inhalte nicht sinnvoll ist. Die folgende Übersicht zeigt die wichtigsten Unterschiede:
| Merkmal | SVG | PNG | JPEG |
|---|---|---|---|
| Bildtyp | Vektorgrafik | Rastergrafik | Rastergrafik |
| Skalierbarkeit | verlustfrei | begrenzt | begrenzt |
| Ideal für | Logos, Icons, Diagramme | Grafiken mit Transparenz | Fotos |
| Dateigröße bei einfachen Formen | meist sehr klein | mittel | mittel |
| Bearbeitbarkeit per Code | ja | nein | nein |
| Eignung für Fotos | ungeeignet | geeignet | sehr geeignet |
Die Wahl des richtigen Formats hängt also immer vom Inhalt ab: Für ein Firmenlogo ist SVG fast immer die bessere Entscheidung, für ein Urlaubsfoto nicht.
SVG-Dateien erstellen und bearbeiten
SVG-Grafiken lassen sich mit gängigen Vektorprogrammen wie Adobe Illustrator, Affinity Designer oder dem kostenlosen Inkscape erstellen und als SVG exportieren. Da das Format offen ist, unterstützen auch viele Online-Tools den Export oder die direkte Bearbeitung im Browser.
Für kleinere Anpassungen reicht mitunter schon ein Texteditor, wenn man mit der XML-Struktur vertraut ist. In der Webentwicklung werden SVG-Dateien häufig zusätzlich mit Tools optimiert, die überflüssigen Code entfernen und die Dateigröße weiter reduzieren, ohne die visuelle Qualität zu verändern.
SVG im Webdesign und in der Praxis
Alle modernen Browser unterstützen SVG nativ, sodass die Grafiken ohne zusätzliche Plugins direkt angezeigt werden. Im Webdesign kommt SVG vor allem bei Logos, Navigationsicons, Illustrationen, Ladeanimationen und Datenvisualisierungen zum Einsatz. Auch responsive Webseiten profitieren, da sich SVG-Elemente flexibel an unterschiedliche Bildschirmgrößen anpassen, ohne an Schärfe zu verlieren.
Weil SVG-Inhalte textbasiert sind, können Suchmaschinen die enthaltenen Informationen leichter erfassen als bei reinen Pixelbildern, etwa wenn Text oder beschreibende Attribute im Code hinterlegt sind. Das kann sich positiv auf die Auffindbarkeit von Inhalten auswirken, ersetzt aber keine grundsätzliche SEO-Strategie.
Nachteile und Grenzen von SVG
So praktisch SVG ist, für jede Anwendung eignet es sich nicht. Bei sehr komplexen Grafiken mit vielen Details, Verläufen oder fotorealistischen Effekten kann die Datei größer und unübersichtlicher werden als ein vergleichbares Rasterbild, und die Darstellung im Browser kann rechenintensiver ausfallen.
Weil SVG-Dateien Code enthalten, sind sie außerdem grundsätzlich in der Lage, Skripte einzubetten. Aus Sicherheitsgründen sollten SVG-Uploads auf Webseiten deshalb sorgfältig geprüft und bereinigt werden, insbesondere wenn sie von externen Nutzern stammen. Für reine Fotografie ist und bleibt SVG ungeeignet, da sich fotografische Details nicht sinnvoll als Vektorformen beschreiben lassen.
Fazit
SVG hat sich als Standard für Logos, Icons und einfache Grafiken im Web fest etabliert, weil es Schärfe auf jedem Bildschirm, kleine Dateigrößen und flexible Gestaltungsmöglichkeiten miteinander verbindet. Wer eine Webseite plant, ein Logo gestalten lässt oder Icons einbindet, sollte SVG als naheliegende Option in Betracht ziehen und im Zweifel prüfen, ob das eigene Grafikprogramm oder der eigene Baukasten den Export im SVG-Format unterstützt.
