SVG vs PNG: Wann lohnen sich Vektorbilder im Web?
SVG und PNG können beide Transparenz, arbeiten aber grundverschieden. Wann du Vektor (SVG) statt Raster (PNG) wählen solltest – und wann nicht.
Bei Logos, Icons und Webgrafiken sind SVG und PNG die üblichen Verdächtigen. Beide können Transparenz – aber sie funktionieren grundverschieden, und die falsche Wahl führt schnell zu unscharfen Logos, unnötig großen Dateien oder Grafiken, die auf hochauflösenden Displays schlecht aussehen.
Der Kernunterschied: Vektor vs. Raster
PNG ist ein Rasterformat. Es speichert das Bild als festes Pixelraster – eine bestimmte Anzahl Punkte mit jeweils einer Farbe. Skalierst du über die Originalgröße hinaus, wird es unscharf, weil keine zusätzlichen Pixel da sind, die Details auffüllen könnten.
SVG ist ein Vektorformat. Es speichert das Bild als mathematische Anweisungen – „hier einen Kreis zeichnen", „mit dieser Farbe füllen", „von Punkt A nach Punkt B eine Linie ziehen". Bei jeder Größenänderung wird neu gerendert; das Ergebnis bleibt immer gestochen scharf.
Wann SVG die richtige Wahl ist
Logos. Ein Firmenlogo muss auf der Visitenkarte, der Website, einem Plakat und dem Smartphone gleichermaßen scharf wirken – in völlig unterschiedlichen Größen. SVG bedient all das aus einer Datei.
Icons und UI-Elemente. Navigationsicons, Schaltflächen und Interface-Grafiken laufen fast immer als SVG am besten. Sie sind extrem klein, auf Retina- und HiDPI-Displays scharf und lassen sich per CSS einfärben oder stylen.
Illustrationen mit flachen Farben oder Verläufen. Diagramme, Infografiken, Charts und geometrische Illustrationen sind Heimspiel für SVG.
Einfache Grafiken, bei denen die Dateigröße zählt. Ein einfaches SVG-Logo wiegt 2–5 KB. Dieselbe Grafik als hochauflösendes PNG kann 50–200 KB groß werden.
Wann PNG die richtige Wahl ist
Fotos und komplexe Bilder. Fotos enthalten Millionen Farben mit fließenden Übergängen – das mathematisch als Vektorpfade abzubilden ist unpraktisch. Hier gehört PNG (oder JPG/WebP) hin.
Screenshots. Screenshots sind von Natur aus Rasterbilder, Pixel für Pixel aufgezeichnet. PNG bewahrt jeden einzelnen Pixel.
Bilder mit teiltransparenten Pixeln. PNG unterstützt vollständiges Alpha inklusive Teiltransparenz – etwas, das SVG bei komplexen Bildern weniger natürlich abbildet.
Wenn SVG nicht zuverlässig dargestellt wird. Einige E-Mail-Clients und ältere Programme rendern SVG nicht zuverlässig. PNG ist dann das sichere Fallback.
Vergleichstabelle
| SVG | PNG | |
|---|---|---|
| Skaliert ohne Unschärfe | ja | nein |
| Transparenter Hintergrund | ja | ja |
| Geeignet für | Logos, Icons, Illustrationen | Fotos, Screenshots |
| Dateigröße (einfache Grafiken) | sehr klein | größer |
| Über Code oder CSS bearbeitbar | ja | nein |
| Unterstützung in E-Mail-Clients | begrenzt | universell |
SVG in PNG umwandeln
Manchmal brauchst du dein SVG doch als PNG – für E-Mail, für Plattformen ohne SVG-Unterstützung oder für eine bestimmte Pixelgröße eines App-Icons oder Social-Media-Bildes:
- SVG zu PNG – SVG in beliebiger Größe als PNG exportieren
- SVG zu JPG – als JPG (Hinweis: Transparenz geht verloren)
- SVG zu WebP – modernes Format mit Transparenzunterstützung
Häufige Fragen
Kann ich ein SVG wie ein normales Bild bearbeiten? SVGs sind XML-Textdateien. Du kannst sie in einem Texteditor oder in einem Vektorprogramm wie Figma, Illustrator oder dem kostenlosen Inkscape öffnen. Im Web lassen sie sich auch direkt per CSS stylen.
Sollte das Website-Logo SVG oder PNG sein? Fast immer SVG. In jeder Auflösung scharf, meist deutlich kleiner – und du kannst die Farbe per CSS ändern, ohne die Datei selbst anzufassen.
Mein SVG sieht super aus, aber das exportierte PNG ist unscharf. Warum? Beim Export von SVG nach PNG zählen die Pixelmaße. Ein 100×100-Pixel-Export wirkt auf einem 2×-Retina-Display unscharf. Exportiere mit doppelter Anzeigegröße (200×200 px für ein 100×100-Display), dann wird das Ergebnis knackig scharf.