SVG vs PNG: Vollständiger Leitfaden zur Wahl des richtigen Formats

Warum die Wahl des Bildformats wirklich wichtig ist

SVG oder PNG? Wählen Sie falsch und Ihr Hero-Bereich lädt einen 2 MB großen Raster-Blob, der auf Retina-Displays matschig aussieht. Oder Sie verbringen Stunden damit, ein Foto in Vektorpfade umzuwandeln, die auf 14 MB XML anschwellen.

SVG und PNG sind keine Konkurrenten — sie sind komplementäre Werkzeuge für grundlegend verschiedene Aufgaben. Diesen Unterschied zu verstehen ist das Wirkungsvollste, was Sie für Performance, Barrierefreiheit und visuelle Qualität Ihrer Website tun können.

Wie SVG unter der Haube funktioniert

SVG (Scalable Vector Graphics) ist eine XML-basierte Auszeichnungssprache. Statt Farbwerte für jeden Pixel zu speichern, speichert es Anweisungen: „Zeichne einen Kreis bei (50, 50) mit Radius 40 und fülle ihn blau." Der Browser führt diese Anweisungen zur Renderzeit aus — die Ausgabe ist damit auflösungsunabhängig by Design.

<!-- Ein einfaches SVG-Icon — 247 Bytes -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#4F46E5" />
  <path d="M35 50 L45 60 L65 40" stroke="#fff" stroke-width="6"
        fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Da SVG im DOM lebt, können Sie es mit CSS stylen, mit JavaScript animieren und interaktiv machen — einzigartig mächtig für Visualisierungen und dynamische UIs.

• Mathematisches Rendering — scharf vom 16-px-Favicon bis zum 3-Meter-Plakat.
• Text bleibt Text — von Suchmaschinen indexierbar, von Screenreadern lesbar.
• Stylebar und skriptfähig — Farben dynamisch ändern, Hover-Effekte, Animationen.
• Hervorragende Kompression — gzip reduziert SVG um 60–80%, da XML repetitiv ist.

Wie PNG unter der Haube funktioniert

PNG (Portable Network Graphics) ist ein verlustfreies Rasterformat, das die exakte Farbe jedes Pixels speichert. Zeigen Sie ein 1000×1000-PNG an und der Browser mappt diese Millionen Werte auf Bildschirmpixel. Ist der Anzeigebereich größer, interpoliert der Browser — das verursacht die Unschärfe.

• Pixel-perfekte Wiedergabe — jeder Farbwert exakt erhalten.
• Volle Alpha-Transparenz — glatte Kanten auf jedem Hintergrund.
• Universelle Unterstützung — jeder Browser, E-Mail-Client und jedes OS verarbeitet PNG.
• Vorhersagbares Rendering — keine komplexe Pfadanalyse; der Browser zeigt direkt Pixel an.

Die definitive Vergleichstabelle

Eigenschaft	SVG	PNG	Gewinner
Skalierbarkeit	Unendlich — scharf bei jeder Auflösung	Fest — unscharf bei Vergrößerung	SVG
Dateigröße (einfach)	Winzig (oft < 1 KB für Icons)	Größer (oft 5–50 KB)	SVG
Dateigröße (komplex)	Riesig (Millionen Pfade)	Akzeptabel mit Kompression	PNG
Animation	CSS, SMIL, JS, Lottie, GreenSock	Nicht nativ (APNG nötig)	SVG
Barrierefreiheit	Title/desc/aria-labels im Markup	Nur alt-Attribut	SVG
Sicherheit	XSS-Risiko bei Inline-SVG	Kein Skript-Ausführungsrisiko	PNG

Performance-Benchmarks

Lade- und Renderzeiten für 24 UI-Icons (64×64 Darstellung):

Metrik	SVG-Sprite	Einzelne SVGs	PNG-Sprite	Einzelne PNGs
Gesamtgröße	12 KB	18 KB (24 Req.)	48 KB	96 KB (24 Req.)
Gzip-Transfer	4 KB	6 KB	44 KB	88 KB
Parse-Zeit	2,1 ms	3,8 ms	0,4 ms	0,6 ms
Erster Anstrich (3G)	120 ms	340 ms	180 ms	890 ms

Anwendungsmatrix

Wann SVG gewinnt

• Logos und Markenzeichen — eine Datei, jede Größe, für immer.
• Icons und UI-Elemente — mit CSS Custom Properties für Theming stylbar.
• Datenvisualisierungen — D3.js, Chart.js, Recharts erzeugen alle SVG.
• Animierte Illustrationen — Lottie, GreenSock oder reines CSS.
• Karten und Diagramme — zoombar, interaktiv, barrierefrei.

Wann PNG gewinnt

• Fotografien — Millionen einzigartiger Farben mit sanften Verläufen.
• Screenshots — Pixel-genaue Darstellung zählt.
• Komplexe Texturen — organische Details lassen sich nicht vektorisieren.
• E-Mail-Kampagnen — viele Mail-Clients unterstützen kein SVG.

Schnelle Entscheidungsregel: „Könnte ich das in Figma nur mit Formwerkzeugen nachbauen?" Wenn ja → SVG. Wenn Sie ein Foto importieren müssten → PNG. Raster in Vektor konvertieren? VectoSolves KI-Vektorisierer erledigt das in Sekunden.

SVG-Sicherheit: Der XSS-Vektor, den Sie kennen müssen

Inline-SVG kann JavaScript ausführen. Eine Datei mit <script>-Tags oder onload-Handlern führt beliebigen Code im Browser des Nutzers aus. Rendern Sie nie vom Nutzer hochgeladenes SVG inline ohne Sanitisierung.

Moderne Best Practices

1. SVG-Sprites für Icon-Systeme

Bündeln Sie Icons in ein Sprite und referenzieren Sie mit <use>. Ein Request, unbegrenzte Icons, vollständig stylebar.

2. Unermüdlich optimieren

• SVG: Durch VectoSolves Optimierer oder SVGO laufen lassen.
• PNG: pngquant oder oxipng für Lossy/Lossless-Kompression nutzen.

3. Raster in Vektor konvertieren, wenn es sinnvoll ist

Ein PNG-Logo, das SVG sein sollte? VectoSolve nutzt KI, um Rasterbilder in saubere Vektorpfade zu tracen — oft 90% kleiner.

Fazit: Es gibt kein „besseres" Format

SVG und PNG existieren, weil Bilder in zwei Kategorien kommen: konstruierte (Formen, Text, Geometrie) und erfasste (Fotos, Scans, Screenshots). Ordnen Sie das Format dem Inhalt zu, optimieren Sie aggressiv, und Sie liefern Seiten, die auf jedem Gerät schnell, scharf und barrierefrei sind.

Eigenschaft	SVG	PNG
Typ	Vektor (mathematisch)	Raster (pixelbasiert)
Skalierbarkeit	Unendlich — kein Qualitätsverlust	Fest — unscharf bei Vergrößerung
Ideal für	Logos, Icons, UI-Elemente	Fotos, Screenshots, komplexe Bilder
Typische Größe (Icon)	1–5 KB	10–50 KB
Animationsunterstützung	CSS + JS Animationen	Nur APNG (begrenzt)