SVG

SVG (Scalable Vector Graphics) ist ein auflösungsunabhängiges Bildformat, das mathematische Formen statt Pixel speichert. Es bleibt in jeder Größe scharf, ohne dass die Datei durch die Skalierung wächst.

Vektor und Raster

SVG und Formate wie PNG, JPG oder WebP unterscheiden sich grundlegend in der Bildbeschreibung.

Rasterformate speichern ein Raster aus einzelnen Pixeln mit jeweils einem Farbwert. Ein PNG mit 1000 × 1000 Pixeln enthält genau eine Million Pixel. Bei einer Vergrößerung auf 2000 × 2000 müssen neue Werte aus vorhandenen Pixeln berechnet werden; das Bild wird unscharf. Bei einer Verkleinerung fallen Pixel und möglicherweise Details weg.

SVG speichert dagegen Anweisungen: Zeichne an dieser Position einen Kreis mit diesem Radius, eine Linie von hier nach dort oder fülle diese Form mit jener Farbe. Weil Geometrie statt einzelner Pixel beschrieben wird, lässt sich die Grafik in jeder Größe scharf rendern. Ein 1 KB großes SVG-Symbol sieht bei 16 und 16.000 Pixeln gleich sauber aus.

Der Ursprung des Inhalts bestimmt das passende Verfahren. Formen, Text und Linien wie Symbole, Logos, Diagramme und Charts eignen sich für SVG. Fotos, Screenshots und gescannte Dokumente bestehen aus erfassten Pixeln und bleiben Rasterbilder.

Typische Einsatzbereiche

• Symbole und UI-Elemente: Ein SVG ersetzt mehrere PNG-Größen und bleibt auf Retina- und High-DPI-Displays scharf.
• Logos und Branding: Vom Favicon bis zum Druckmotiv skaliert ein Logo ohne Qualitätsverlust oder wachsende Dateigröße.
• Datenvisualisierung: Charts und Diagramme lassen sich zoomen, per CSS gestalten und mit JavaScript interaktiv machen.
• Illustrationen und Infografiken: Vektorgrafiken bleiben bei jeder Zoomstufe klar und können über CSS etwa an einen Dunkelmodus angepasst werden.
• Webanimationen: SVG mit CSS oder JavaScript vermeidet den Speicherbedarf animierter Rasterformate.

SVG und Screenshots

Beide Formate liegen an entgegengesetzten Enden des Spektrums. Ein Screenshot erfasst Pixel, SVG speichert Vektorformen. Eine echte Umwandlung ist ohne grundlegende Änderung des Inhalts nicht möglich.

Enthält eine Oberfläche SVG-Symbole oder -Logos, werden diese beim Screenshot gerastert. Das resultierende PNG oder WebP besitzt keine Vektordaten mehr.

In Dokumentationen sollten skalierbare Diagramme deshalb als eigene SVG-Dateien neben den Raster-Screenshots eingebettet werden. Einige Aufnahme- und Exportprogramme können Rasterbilder und Vektor-Overlays gemeinsam in ein Dokument oder eine Präsentation ausgeben.

Vektorbasierte Anmerkungsprogramme zeichnen Pfeile, Rahmen und Text als auflösungsunabhängige Overlays. Diese Markierungen bleiben beim Skalieren des Screenshots scharf, was bei Dokumentationen für verschiedene Bildschirmgrößen nützlich ist.

SVG in screenshotreichen Abläufen

SVG ist kein Aufnahmeformat, ergänzt erfasste Bilder aber häufig im Asset-Prozess. Logos, Symbole, Pfeile und Hinweise können Vektoren bleiben, während der UI-Screenshot darunter ein Rasterbild ist. So bleiben Marken-Overlays scharf, ohne den Screenshot in ein ungeeignetes Format zu zwingen.

Häufige Fehler

• Komplexe Entwürfe als SVG exportieren, obwohl Raster kleiner wäre. Tausende Pfade können eine größere Datei als ein komprimiertes PNG erzeugen. Vergleiche bei aufwendigen Motiven beide Formate.
• SVG für Fotos verwenden. Eingebettete Rasterdaten erzeugen zusätzlichen Ballast ohne Vorteil. Verwende für Fotos und Screenshots ein Rasterformat.
• SVG-Dateien nicht optimieren. Designprogramme exportieren oft unnötige Metadaten, versteckte Ebenen und doppelte Attribute. Ein Optimierer kann die Größe mitunter um mindestens 50 Prozent senken.
• Barrierefreiheit übersehen. Titel- und Beschreibungselemente machen SVG-Inhalte für Screenreader zugänglich. Ergänze passende Beschriftungen.