SVG vs. PNG: Vektor vs. Raster – Welches Format passt wann?

SVG und PNG sind beide unverzichtbare Grafikformate im Web – doch sie funktionieren grundlegend anders. Das Verständnis dieser Unterschiede hilft dabei, das richtige Format für jede Situation zu wählen und häufige Fehler wie verpixelte Logos oder unnötig große Dateien zu vermeiden.

Vektorgrafik vs. Rastergrafik: Der grundlegende Unterschied

Das Herzstück des Unterschieds liegt in der Darstellungstechnologie:

PNG ist eine Rastergrafik. Das Bild besteht aus einer festen Anzahl von Pixeln in einem rechteckigen Raster. Jeder Pixel hat eine definierte Farbe. Bei Verkleinerung oder Vergrößerung über die Originalgröße hinaus entstehen Qualitätsverluste: Das Bild wirkt unscharf oder pixelig. Eine PNG-Datei für ein Logo in 200×200 Pixeln sieht auf einem Retina-Display mit doppelter Pixeldichte bereits unscharf aus.

SVG (Scalable Vector Graphics) ist eine Vektorgrafik. Statt Pixel beschreibt SVG mathematisch Formen, Kurven, Linien und Texte. Ein Kreis wird nicht als Pixel gespeichert, sondern als mathematische Definition: Mittelpunkt, Radius, Farbe. Diese Beschreibung kann beliebig skaliert werden – von einem 16×16 px-Icon bis zu einem drei Meter breiten Messeaufsteller –, ohne jede Qualitätseinbuße.

Skalierbarkeit in der Praxis

Die praktische Konsequenz dieser technischen Grundlage ist enorm:

• Ein SVG-Logo sieht auf einem 4K-Monitor, auf einem iPhone und auf einem Plakat identisch scharf aus – ein einzige Datei genügt.
• Ein PNG-Logo muss in verschiedenen Auflösungen bereitgestellt werden: 1x, 2x (Retina), 3x (High-DPI-Smartphones) – das bedeutet mehr Dateien und mehr Verwaltungsaufwand.
• Webentwickler verwenden SVG daher standardmäßig für Logos, Icons, Illustrationen und alle grafischen Elemente, die keine fotografischen Inhalte sind.

Dateigröße: Kommt auf den Inhalt an

Es gibt keine pauschale Antwort auf die Frage, welches Format kleiner ist – das hängt vollständig vom Bildinhalt ab:

• Einfache Grafiken und Icons: SVG ist meist deutlich kleiner. Ein Icon als SVG: 1–5 KB. Dasselbe als PNG: 5–20 KB.
• Komplexe Illustrationen mit vielen Formen: SVG kann größer werden als PNG, da jede Form als XML-Code beschrieben wird.
• Fotografische Inhalte: SVG ist hier nicht geeignet. Fotos bestehen aus Millionen individueller Pixel und lassen sich nicht sinnvoll als Vektorgrafik beschreiben.

SVG-Dateien können außerdem mit Gzip oder Brotli komprimiert werden (da es sich um Textdateien handelt), was die Übertragungsgröße nochmals deutlich reduziert.

Browserunterstützung und Einbindung

Beide Formate werden von allen modernen Browsern vollständig unterstützt:

• PNG: Universelle Unterstützung seit den 1990er Jahren, keinerlei Einschränkungen.
• SVG: Vollständig unterstützt in allen modernen Browsern; Internet Explorer ab Version 9 hatte grundlegende SVG-Unterstützung.

SVG bietet zusätzliche Einbindungsoptionen: Es kann direkt als Inline-Code im HTML eingebettet werden, was CSS-Styling, JavaScript-Animation und Accessibility-Features ermöglicht. Als externe Datei kann es per <img>, <object> oder als CSS-Hintergrund eingebunden werden.

Weitere wichtige Unterschiede

Animierbarkeit

SVG kann nativ animiert werden – entweder über CSS-Animationen oder über JavaScript. Das ermöglicht interaktive Icons, animierte Logos und komplexe Animationen ohne GIF-Artefakte. PNG selbst ist statisch und nicht animierbar (animierte Variante: APNG).

Barrierefreiheit und SEO

SVG-Code kann semantisch angereichert werden: Textalternativen, Beschreibungen und ARIA-Attribute sind direkt im SVG möglich. Suchmaschinen können SVG-Inhalte lesen. PNG-Dateien sind für Suchmaschinen opaque – nur das alt-Attribut im <img>-Tag wird ausgewertet.

Editierbarkeit

SVG-Dateien sind XML-Textdateien und können in jedem Texteditor bearbeitet werden. Farben, Größen und Texte lassen sich direkt im Quellcode ändern. PNG-Dateien müssen in einem Bildbearbeitungsprogramm bearbeitet werden.

Vergleichsübersicht

Kriterium	SVG	PNG
Darstellungstechnologie	Vektor (mathematische Beschreibung)	Raster (Pixel)
Skalierbarkeit	Verlustfrei, beliebig skalierbar	Verlustreich, pixelgebunden
Geeignet für Fotos	Nein	Ja
Geeignet für Logos/Icons	Ideal	Eingeschränkt (Pixeldichte-Probleme)
Transparenz	Ja	Ja (Alpha-Kanal)
Animation	Ja (CSS/JS)	Nein (APNG für Animationen)
Dateigröße (einfache Grafik)	Sehr klein	Größer
Dateigröße (komplexe Grafik)	Kann groß werden	Konstant (pixelabhängig)
Browserunterstützung	Alle modernen Browser	Universell
CSS-Styling möglich	Ja (Inline-SVG)	Nein
Barrierefreiheit	Sehr gut (semantisch)	Über alt-Attribut
Komprimierung	Gzip/Brotli möglich	Verlustfrei (DEFLATE)

Wann welches Format verwenden?

SVG ist die richtige Wahl für:

1. Logos und Markenzeichen (skalierbar auf alle Größen)
2. Icons und Icon-Sets
3. Illustrationen, Diagramme und Infografiken
4. Animierte Grafiken und interaktive Elemente
5. Karten und technische Zeichnungen

PNG bleibt die bessere Wahl für:

1. Fotos mit Transparenz (freigestellte Produktbilder)
2. Screenshots und UI-Aufnahmen
3. Bilder aus Rastergrafik-Programmen ohne Vektorpendant
4. Komplexe Illustrationen, die sich nicht sauber vektorisieren lassen

Fazit

SVG und PNG lösen unterschiedliche Probleme und sind keine direkten Konkurrenten. Ein professionelles Webdesign verwendet beide: SVG für alle grafischen Elemente (Logos, Icons, Illustrationen) und PNG – oder besser noch AVIF/WebP – für fotografische Inhalte. Wer ein Logo nur als PNG-Datei hat, kann erheblich von einer Konvertierung in SVG profitieren: schärfere Darstellung auf allen Geräten, kleinere Dateigröße und mehr Gestaltungsfreiheit.

Direkt im Browser erledigen — die Datei verlässt Ihr Gerät nicht: Bild umwandeln