SVG vs PNG: Welches Format für Logos, Icons und UI?

SVG und PNG gehören zu den am häufigsten verwendeten Bildformaten im Web, lösen aber grundlegend verschiedene Probleme. SVG speichert Grafiken als mathematische Formen, die sich ohne Qualitätsverlust auf jede Größe skalieren lassen. PNG speichert Grafiken als festes Pixelraster, das jedes Detail eines Fotos oder Screenshots erfasst, aber beim Vergrößern über die native Auflösung hinaus unscharf wird.

Die Wahl des richtigen Formats ist wichtiger, als die meisten Entwickler denken. Ein als PNG gespeichertes Logo wird auf einem 4K-Display pixelig. Ein komplexes Foto als SVG wird zu einer riesigen, langsam ladenden Datei. Dieser Leitfaden stellt SVG und PNG nebeneinander, damit Sie jedes Mal die richtige Entscheidung treffen können. Wenn Sie zuerst einen allgemeinen Überblick benötigen, lesen Sie unsere Erklärung zu Raster- vs. Vektorgrafik.

Was ist SVG?

SVG (Scalable Vector Graphics) ist ein XML-basiertes Vektorbildformat. Anstatt Farbwerte für jeden Pixel zu speichern, beschreibt SVG Formen, Pfade und Text mithilfe mathematischer Koordinaten. Ein Kreis wird durch einen Mittelpunkt und einen Radius definiert, eine Linie durch zwei Endpunkte. Der Browser liest diese Anweisungen und rendert die Grafik in der benötigten Größe.

Da es keine Pixel zum Dehnen gibt, sieht ein SVG-Bild sowohl auf einem 320-Pixel-Handybildschirm als auch auf einem 5K-Retina-Monitor perfekt scharf aus. Die Datei ist reiner Text, was bedeutet, dass Sie sie in einem Code-Editor öffnen, Farben mit CSS anpassen, Elemente mit JavaScript animieren und mit gzip komprimieren können. Suchmaschinen können sogar in SVG eingebetteten Text lesen, was ihm einen Barrierefreiheitsvorteil gegenüber Rasterformaten verschafft.

SVG eignet sich am besten für Grafiken aus geometrischen Formen, klaren Kanten und flachen Farbflächen: Logos, Icons, Illustrationen, Diagramme und UI-Elemente. Es ist nicht für fotografische Inhalte konzipiert. Für einen tieferen Einblick lesen Sie Was ist SVG?

Was ist PNG?

PNG (Portable Network Graphics) ist ein Rasterbildformat, das Grafiken als Pixelraster mit verlustfreier Komprimierung speichert. Jeder Pixel behält seinen exakten Farbwert, sodass keine Kompressionsartefakte wie bei JPEG auftreten. PNG unterstützt auch volle Alphakanal-Transparenz und ist damit das bevorzugte Format, wenn Sie ein Foto oder eine detaillierte Grafik mit transparentem Hintergrund benötigen.

Da PNG auflösungsabhängig ist, sieht das Bild bei seinen nativen Abmessungen am besten aus. Vergrößern führt zu Pixelierung; Verkleinern verschwendet Bandbreite, da mehr Daten übertragen werden als der Bildschirm benötigt. Die Dateigrößen sind bei Fotos größer als bei JPEG, aber die verlustfreie Qualität macht PNG ideal für Screenshots, Software-UI-Mockups und jedes Bild, bei dem Schärfe und Farbtreue wichtiger sind als Downloadgeschwindigkeit.

PNG brilliert bei der Erfassung komplexer visueller Details, die Vektorformate nicht effizient reproduzieren können: Fotos mit Transparenz, Screenshots mit geglättetem Text und Kunstwerke mit Tausenden einzigartiger Farben und subtilen Verläufen.

Wann Sie SVG wählen sollten

Wählen Sie SVG, wenn die Grafik aus Formen, Linien und Volltonfarben besteht statt aus fotografischen Details. Hier sind die häufigsten Anwendungsfälle:

• Logos und Markenzeichen — Eine einzige SVG-Logo-Datei sieht auf Visitenkarten, Plakatwänden und Retina-Bildschirmen perfekt aus, ohne mehrere Auflösungsvarianten erstellen zu müssen. Erfahren Sie, wie Sie Ihr Logo als SVG erstellen.
• Icons und UI-Elemente — SVG-Icons sind leicht, mit CSS gestaltbar und auflösungsunabhängig. Eine Datei ersetzt ein ganzes Sprite-Sheet aus PNGs.
• Illustrationen und Infografiken — Flache Illustrationen und Datenvisualisierungen lassen sich natürlich in Vektorpfade umwandeln und halten die Dateigröße klein bei hoher Qualität.
• Diagramme und Schaubilder — SVG-Diagramme bleiben bei jedem Zoomfaktor lesbar, und interaktive Elemente können mit JavaScript hinzugefügt werden.
• Responsive Webgrafiken — SVG passt sich an jede Containergröße an, ohne Media Queries oder srcset-Komplexität.

Wenn Sie eine einfache PNG-Grafik haben, die als Vektor besser geeignet wäre, können Sie mit Any2SVG in Sekundenschnelle Ihr PNG in SVG umwandeln. Der browserbasierte Tracer führt die Konvertierung vollständig auf Ihrem Gerät durch.

Wann Sie PNG wählen sollten

Wählen Sie PNG, wenn das Bild fotografische Details oder Tausende einzigartiger Farben enthält, die nicht effizient als Vektorpfade dargestellt werden können:

• Fotos mit transparentem Hintergrund — Produktfotos, Porträts und zusammengesetzte Bilder, bei denen Sie sowohl fotografische Qualität als auch Transparenz benötigen.
• Screenshots und Software-Mockups — Screenshots enthalten geglätteten Text, Bedienelemente und Verläufe, die sich schlecht in SVG nachzeichnen lassen.
• Komplexe digitale Kunstwerke — Gemälde, Texturen und Bilder mit starken Verläufen bleiben als PNG kleiner und genauer als SVG.
• Pixel-Art — Pixel für Pixel gestaltete Kunst sollte im Rasterformat bleiben, um die beabsichtigte Rasterstruktur zu erhalten.

Selbst in diesen Fällen ist PNG nicht immer die endgültige Antwort. Wenn die Downloadgeschwindigkeit wichtiger ist als verlustfreie Qualität, ziehen Sie WebP oder AVIF als effizientere Raster-Alternativen in Betracht.

Fazit

SVG und PNG sind keine Konkurrenten — sie ergänzen sich. SVG ist die richtige Wahl für alles, was aus Formen und Linien besteht: Logos, Icons, UI-Elemente, Illustrationen und Diagramme. PNG ist die richtige Wahl für alles, was aus Pixeln besteht: Fotos mit Transparenz, Screenshots und komplexe Raster-Kunstwerke.

Die einfachste Faustregel: Wenn das Bild skaliert werden muss, verwenden Sie SVG. Wenn es fotografische Details erfassen muss, verwenden Sie PNG. Und wenn Sie eine Rastergrafik haben, die von Anfang an ein Vektor hätte sein sollen, ist die Konvertierung nur wenige Klicks entfernt.