SVG vs. PNG: Welches Dateiformat für Logos, Icons und Screenshots?

Jedes Design-Tool stellt beim Export dieselbe Frage: SVG oder PNG? In der Größe, in der du gerade arbeitest, sehen beide identisch aus, also nimmt man einfach, was schon ausgewählt ist. Der Unterschied zeigt sich später: auf einem größeren Bildschirm, in einer langsameren Seite oder bei einer Markenfarbe, die sich ändern muss. Hier ist dasselbe Icon in beiden Formaten, was jedes davon kostet, und eine Tabelle für die Fälle, die in jedem Projekt vorkommen.

Was wirklich anders ist: Pfade oder Pixel

Ein SVG speichert Anweisungen: Zeichne diese Kurve, fülle sie mit dieser Farbe. Ein PNG speichert ein Raster aus farbigen Pixeln, ein Wert pro Punkt. Dieser eine Unterschied erklärt alles andere.

Anweisungen lassen sich in jeder Größe ausführen, also wird die Kurve jedes Mal glatt neu gezeichnet. Ein Raster hat eine feste Zahl an Punkten, also muss ein größerer Bildschirm sie strecken. SVG ist ein Vektorformat, PNG ein Rasterformat. Beide sind offene Standards des W3C, und das Export-Panel von Figma bietet beide nebeneinander an.

Dasselbe Herz, ganz nah herangezoomt

In normaler Größe sind die beiden Herzen identisch. Zoom hinein, und es sind plötzlich nicht mehr dieselben Dateien.

SVG, herangezoomt

PNG, herangezoomt

Das linke Herz wird in der neuen Größe aus seinem Pfad neu gezeichnet, also bleibt die Kante eine saubere Kurve. Das rechte Herz ist eine Darstellung desselben Icons mit 12 mal 12 Pixeln, vergrößert mit Nearest-Neighbor-Skalierung, daher sieht man jeden Pixel. Echte Bildschirme machen das weicher, sie verwischen statt zu blocken, aber die Ursache ist dieselbe: Die Datei hat dieses Detail nie enthalten.

Die Lösung für ein PNG ist, es größer zu exportieren, und genau das ist auch sein Preis.

Im Code umfärben: eine Datei, jede Farbe

Ein SVG ist Text. Seine Farbe ist ein Attribut, also kann ein Stylesheet sie ändern, ohne neuen Export.

.icon { fill: currentColor; } .icon:hover { fill: #FF3B30; }

Hover-Zustände, Dark Mode und Marken-Themes sind je eine Zeile. Ein PNG braucht pro Farbe und pro Größe eine neue Datei.

Dateigröße: Es kommt darauf an, was im Bild steckt

Wir haben das Herz von oben gemessen. Das SVG hat 290 Bytes. Das PNG in derselben visuellen Größe wächst mit den Pixeln.

Bei einfachen Formen bleibt das SVG konstant, während sich das PNG mit jeder ausgelieferten Größe vervielfacht. Bei detailreichen Bildern ist es umgekehrt. Wir haben eine Karte mit 1200 mal 800 Pixeln, Verlaufshintergrund und weichem Schatten exportiert: Das PNG kam auf 55.365 Bytes, ein JPG mit Qualität 80 auf 15.248 und ein WebP mit Qualität 80 auf 4.970. Weiche Verläufe und Schatten bestehen aus vielen Farbabstufungen, und ein SVG bräuchte dafür einen Filter oder unzählige Formen, um sie nachzuahmen.

Wann PNG die richtige Wahl ist

PNG ist die richtige Wahl, wenn das Bild nicht aus sauberen Formen besteht:

• Screenshots. Ein Browserfenster oder ein kompletter App-Screen mit weichen Schatten und echter Textdarstellung besteht von Natur aus aus Pixeln. Ein PNG hält sie exakt fest.
• Detailreiche Grafiken. Feine Textur, Körnung und gemalte Schattierungen lassen sich nicht auf Pfade reduzieren.
• Transparente Bilder, die nicht einfach sind. PNG unterstützt Transparenz, also funktioniert ein Freisteller mit weicher Kante auf jedem Hintergrund.

Eine Warnung: Ein PNG eines Logos ist ein PNG mit fester Größe. Behalte das SVG als Master und exportiere PNGs daraus nur dort, wo etwas kein SVG lesen kann.

Wann SVG die richtige Wahl ist

• Logos. Eine Datei für den Website-Header, das Favicon und die Plakatwand. Den ganzen Satz inklusive PDF, AI und EPS findest du unter Logo-Dateiformate erklärt.
• Icons. Ein Icon-Set für Tab-Leiste oder Toolbar, pro Zustand per CSS umgefärbt. Lucide, eines der meistgenutzten Open-Source-Icon-Sets, liefert jedes Icon als SVG aus.
• Einfache Formen und Illustrationen. Flächige Formen in Vollfarbe, Trennlinien, Badges und Diagramme.

Wo SVG an Grenzen stößt: Eine Datei mit Tausenden Formen wird schwer, und manche Orte wie E-Mail-Clients, Vorschauen beim Teilen in sozialen Netzwerken und ältere Apps zeigen sie womöglich nicht an. Nimm dort ein PNG.

Und was ist mit Fotos?

Weder noch. Ein Foto von einer Handykamera aus dem Jahr 2026 hat stufenlose Farbverläufe, genau das, was Vektoren schlecht können und wofür PNG riesig wird. Nimm JPG oder WebP, die Fotos weit besser komprimieren als PNG. WebP wird von aktuellen Browsern unterstützt.

SVG oder PNG: eine Entscheidungstabelle

FAQ

Ist SVG besser als PNG?

Für Logos, Icons und einfache Formen ja: Es ist bei jeder Größe schärfer und meist kleiner. Für Screenshots und detailreiche Grafiken ist PNG das bessere Format. Keines gewinnt in allen Fällen.

Sollte ich für ein Logo SVG oder PNG verwenden?

SVG. Behalte es als Master-Datei und exportiere daraus PNGs für Orte, die kein SVG anzeigen können, etwa manche E-Mail- und Social-Tools.

Ist SVG kleiner als PNG?

Bei einfachen Formen ja, wie das Herz oben zeigt: 290 Bytes gegen 393 bis 10.400 Bytes, je nach Größe. Bei detailreichen Bildern ist es umgekehrt, weil ein SVG viele Formen braucht, um sie zu beschreiben.

Kann ich ein PNG wie ein SVG umfärben?

Nicht sauber. Die Füllung eines SVG ist ein Textattribut, das du in CSS ändern kannst. Ein PNG besteht aus festen Pixeln, eine neue Farbe bedeutet also einen neuen Export.

Warum sieht mein PNG beim Hineinzoomen unscharf aus?

Ein PNG enthält ein festes Raster aus Pixeln. Wird es größer als seine eigene Größe angezeigt, streckt der Bildschirm diese Pixel, und die Kanten verwischen oder werden blockig. Exportiere in größerer Größe oder nimm SVG, wenn das Bild eine einfache Form ist.

Sind JPG oder WebP für Fotos besser als PNG?

Ja. Sie komprimieren Fotos weit besser, deshalb lädt die Seite schneller. Behalte PNG für Screenshots, scharfen Text und Grafiken.

Quellen

• Scalable Vector Graphics (SVG) 2, W3C.
• Portable Network Graphics (PNG) Specification, W3C.
• Image file type and format guide, MDN Web Docs.
• Dateigrößen von uns mit sharp gemessen: ein 24-mal-24-Herzpfad als SVG und als PNG in fünf Größen sowie eine 1200-mal-800-Karte mit Verlauf und Schatten als PNG, JPG und WebP mit Qualität 80.
• Zuerst als Karussell auf UX Brainy veröffentlicht.