Vergleich18. April 20265 Min. Lesezeit

SVG vs PNG – Wann Vektor, wann Raster?

SVG und PNG werden oft für dieselben Aufgaben eingesetzt: Logos, Icons und Grafiken. Doch sie funktionieren grundverschieden. SVG ist Vektor, PNG ist Raster – und genau das entscheidet über Schärfe, Dateigröße und Flexibilität.

Vektor vs Raster – der grundlegende Unterschied

PNG speichert Pixel: ein Raster aus Farbpunkten in fester Auflösung. Skaliert man ein PNG hoch, sieht man irgendwann die Pixel oder unscharfe Kanten. SVG dagegen speichert mathematische Beschreibungen – Linien, Kurven, Flächen.

Folge: Ein SVG bleibt bei jeder Größe gestochen scharf, vom Favicon bis zur Plakatwand. Ein PNG braucht für jede Zielauflösung idealerweise eine eigene Datei oder zumindest hohe Ausgangs-Auflösung.

Wann SVG die bessere Wahl ist

Logos, Icons, einfache Illustrationen, Diagramme: SVG ist meist nur wenige Kilobyte groß, skaliert frei und kann via CSS gefärbt oder animiert werden. Browser und Designwerkzeuge unterstützen SVG zuverlässig.

Bonus: SVGs sind durchsuchbar und für Screenreader zugänglich, weil sie XML-Text enthalten. Für Inline-Icons in einer Website sind sie oft die performanteste Lösung.

Wo PNG weiter unschlagbar bleibt

Sobald es um Fotos, fotorealistische Renderings oder komplexe Illustrationen mit hunderten von Farben und Details geht, wird ein SVG riesig oder gar nicht erst sinnvoll. Hier punktet PNG mit kompakter Pixel-Repräsentation.

Auch in vielen Office-Programmen, älteren Editoren oder als Datei-Anhang ist PNG kompatibler. Faustregel: alles Geometrische → SVG, alles Pixelige → PNG (oder JPG/WebP).

Wann SVG plötzlich teuer wird

SVGs sind XML-Code — und der wird vom Browser geparst, gerendert und teilweise re-rendert bei jeder Animation. Komplexe SVGs mit hunderten Pfaden und Filter-Effekten kosten plötzlich mehr CPU als ein vergleichbares PNG-Bild.

Faustregel: Unter ~5 KB Datei-Größe bleibt SVG performant. Bei 50 KB+ SVGs prüf, ob ein PNG 2x oder ein WebP nicht performanter wäre. Tools wie SVGO können SVGs vor dem Deploy noch um 30-60 % schrumpfen.