SVG

SVG (Scalable Vector Graphics) ist ein XML-basiertes Format für zweidimensionale Vektorgrafiken, das vom W3C standardisiert wird. Dateien verwenden die Endung .svg und den Medientyp image/svg+xml. Eine SVG-Datei speichert keine Pixel. Sie beschreibt Formen, Pfade, Text, Verläufe und Filter als Markup, und der Betrachter zeichnet sie in jeder Größe.

Da SVG aus Text besteht, lässt es sich in einem Code-Editor bearbeiten, mit gzip komprimieren, mit CSS gestalten und mit JavaScript verändern. Browser stellen SVG nativ dar, und Designwerkzeuge exportieren es für Icons, Logos und Illustrationen. Eine SVG-Datei kann auch eingebettete Rasterbilder enthalten. Diese Teile verhalten sich dann wie jede andere Bitmap.

Vektor und Raster

	Vektor (SVG)	Raster (PNG, JPG, WebP)
Speichert	Formen und Pfade	Pixel
Skalierung	Scharf in jeder Größe	Wird beim Vergrößern unscharf
Geeignet für	Icons, Logos, Diagramme	Fotos, Screenshots
Dateigröße	Wächst mit der Komplexität	Wächst mit der Pixelanzahl

Einsatzbereiche von SVG

• Logos und Icon-Sets auf Websites.
• Diagramme und Grafiken, die per Code erzeugt werden.
• Illustrationen und einfache Animationen auf Webseiten.
• Favicons in Browsern, die SVG-Favicons unterstützen.

SVG und Screenshots

Ein Screenshot ist ein Raster aus Pixeln und daher von Natur aus ein Rasterbild. Wenn Sie ihn in eine SVG-Datei einbetten, wird er dadurch nicht skalierbar. Die eingebettete Bitmap wird beim Vergrößern weiterhin unscharf. Werkzeuge zum Nachzeichnen können einen Screenshot in Vektorpfade umwandeln. Das Ergebnis entspricht jedoch selten kleinem Oberflächentext und ist deutlich größer.

Wo SVG in screenshot-lastigen Workflows passt

SVG eignet sich gut für die Elemente rund um einen Screenshot: Pfeile, Hinweise, Logos und Diagramme, die das Bild erklären. Üblich ist ein PNG- oder WebP-Screenshot der Oberfläche, über den auf der Webseite SVG-Icons und Annotationen gelegt werden.

Häufige Fehler

• Ein großes PNG in eine SVG-Datei einbetten und sie als Vektordatei bezeichnen.
• SVG auf Plattformen hochladen, die nur PNG oder JPG akzeptieren.
• Unbekannte SVG-Dateien unbedacht öffnen, da SVG Skripte enthalten kann.

Ein Bild jetzt anpassen?

Konvertieren Sie einen Screenshot mit dem Image Converter zwischen PNG, JPG und WebP oder verringern Sie seine Größe mit dem Image Compressor.

Häufige Fragen

Kann ich einen Screenshot als SVG speichern?

Sie können ihn in eine SVG-Datei einbetten, er bleibt aber eine Bitmap. Verwenden Sie für Screenshots PNG.

Ist SVG kleiner als PNG?

Bei einfachen Formen meist ja. Bei detaillierten Bildern und Screenshots meist nein.

Quellen

• Scalable Vector Graphics (SVG) 2 (W3C)
• SVG (MDN)

Weiterführende Ressourcen

• Bildkonverter: Konvertierung zwischen PNG, JPG und WebP.
• Screenshot-Annotationswerkzeug: Pfeile und Beschriftungen auf einen Screenshot setzen.
• Exportformate: Rasterformate, die Temposhot exportiert.