PNG oder SVG? Ein Entscheidungsdiagramm für Designer, Entwickler und Marketer

Jedes Bild, das du veröffentlichst, ist eine Entscheidung — das falsche Format kostet dich Seitengeschwindigkeit, Renderingqualität oder beides. Dieser Leitfaden gibt dir die technische Tiefe, um jedes Mal sicher zwischen PNG und SVG zu wählen, mit echten Benchmarks und kopierbarem Code.

Wie Browser Jedes Format Tatsächlich Rendern

PNG: Pixelraster-Dekodierung

1. Der Browser lädt die Binärdatei, dekomprimiert den DEFLATE-Stream.
2. Die dekodierte Bitmap wird in eine GPU-Textur gerastert.
3. Die Textur wird bei nativen Pixeldimensionen zusammengesetzt. Vergrößere und der Browser interpoliert — hallo, Unschärfe.

SVG: DOM + Paint

1. Der Browser parst XML in einen DOM-Unterbaum (oder Bildkontext via <img>).
2. Jeder <path>, <rect>, <circle> wird gegen den aktuellen Viewport aufgelöst.
3. Vektoranweisungen werden on-the-fly gerastert bei jeder Auflösung — 1x, 2x, 100x. Immer scharf.

Tiefgehender Technischer Vergleich

Kompression

• PNG nutzt verlustfreies DEFLATE. Großartig für Volltonfarben, aber Fotos blähen auf — 1200x800 erreicht leicht 1–2 MB.
• SVG ist Klartext-XML, das sich mit Brotli spektakulär komprimiert. Ein 12 KB SVG überträgt sich routinemäßig mit 3 KB.

Transparenz

• PNG speichert einen 8-Bit-Alphakanal — glatte pixelweise Transparenz.
• SVG unterstützt opacity, fill-opacity, rgba(), plus Maskierung und Clipping-Pfade.

Animation

• PNG ist statisch (APNG existiert, hat aber begrenzte Tools).
• SVG unterstützt SMIL, CSS-Keyframes und JS-gesteuerte Animation — alles auflösungsunabhängig.

Performance-Benchmarks

Echte Zahlen aus einem Lighthouse-Audit 2026 (Moto G Power, Chrome 124, 4G-Drosselung):

Entscheidungsmatrix

Code-Beispiele zum Mitnehmen

Responsives SVG (skaliert mit Container)

<svg viewBox="0 0 120 40" role="img" aria-label="Logo"
     class="logo" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 35 L25 5 L40 35" fill="currentColor"/>
  <text x="50" y="30" font-size="16" fill="currentColor">vectosolve</text>
</svg>

<style>
  .logo { width: 100%; max-width: 240px; height: auto; color: #0f172a; }
  @media (prefers-color-scheme: dark) { .logo { color: #f8fafc; } }
</style>

Responsives PNG mit srcset

<img src="/images/hero-800.png"
  srcset="/images/hero-400.png 400w, /images/hero-800.png 800w, /images/hero-1600.png 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Dashboard-Screenshot mit Analytics" width="800" height="450" loading="lazy" decoding="async" />

Das <picture>-Element: Das Beste aus beiden Welten

<picture>
  <source srcset="/images/photo.avif" type="image/avif" />
  <source srcset="/images/photo.png" type="image/webp" />
  <img src="/images/photo.png" alt="Produkt mit transparentem Hintergrund"
       width="600" height="600" loading="lazy" />
</picture>

Browser-Support und Sonderfälle

SVG

• Voller Support in allen modernen Browsern seit ~2015.
• SVG-Schriften: <text> nutzt System-/Web-Schriften. Text zu Pfaden konvertieren für pixelperfekte Logos (aber Zugänglichkeit geht verloren).
• Externe Sprites: <use href="sprite.svg#icon"> funktioniert nicht cross-origin in einigen Safari-Versionen.
• Sicherheit: Inline-SVG kann JavaScript ausführen. Nie nicht vertrauenswürdige User-SVGs ohne Sanitizing einbetten.

PNG

• Universeller Support — alle Browser, E-Mail-Clients und Plattformen. Null Sonderfälle.
• Farbprofile: Eingebettete ICC-Profile rendern unterschiedlich in Safari vs Chrome. Bei Optimierung entfernen.
• APNG: In modernen Browsern unterstützt, aber schlechte Tools und größere Dateien als SVG/CSS-Animation.

Optimierungs-Checkliste

SVG

1. Durch SVGO oder VectoSolves Optimierer laufen lassen um Metadaten zu entfernen.
2. Versteckte Ebenen, ungenutzte <defs>, leere Gruppen entfernen.
3. Pfade vereinfachen — weniger Kontrollpunkte bedeuten weniger Bytes.
4. Mit Content-Encoding: br (Brotli) ausliefern.
5. Kritische SVGs inlinen um einen Netzwerk-Roundtrip zu eliminieren.

PNG

1. oxipng, pngquant oder Squoosh verwenden um Größe zu reduzieren.
2. Genau in den benötigten Dimensionen exportieren — keine 4000 px für einen 400 px Slot.
3. srcset mit 1x und 2x Varianten bereitstellen.
4. Explizite width/height setzen um CLS zu verhindern.
5. loading="lazy" für Bilder unter dem Fold hinzufügen.

Wann zwischen Formaten konvertieren

PNG zu SVG

Du hast ein Raster-Logo und brauchst eine skalierbare Version. Manuelles Nachzeichnen dauert 30+ Minuten. KI-Vektorisierung auf VectoSolve dauert Sekunden und produziert saubere, optimierte Pfade.

SVG zu PNG

Du brauchst einen Raster-Export für Social Sharing oder eine Plattform, die kein SVG akzeptiert. Nutze VectoSolves SVG-zu-PNG-Konverter zum Exportieren in beliebiger Auflösung mit transparenten oder festen Hintergründen.

„Das beste Bildformat ist dasjenige, das die kleinste Datei in der Qualität liefert, die dein Design verlangt. Alles andere ist Dogma." — Addy Osmani

Fazit

Es gibt kein universell „bestes" Format — nur das beste Format für die Aufgabe. SVG dominiert bei allem, was skaliert, animiert oder mit Code gestylt wird. PNG und seine modernen Verwandten (WebP, AVIF) dominieren bei fotografischen und hochkomplexen Bildern.

Der Entscheidungsbaum ist kurz: Vektorgrafik → SVG. Fotografie → Raster. Komplexe Illustration → beide benchmarken. Folge den Code-Beispielen, optimiere deine Assets und du lieferst Seiten, die schnell, scharf und zukunftssicher sind.

Musst du zwischen Formaten konvertieren? VectoSolve handhabt beide Richtungen — PNG-zu-SVG-Vektorisierung und SVG-zu-PNG-Export — damit du immer das richtige Format zur Hand hast.

Quellen und Weiterführende Lektüre

• MDN Web Docs — SVG — Vollständige Formatreferenz für SVG-Stärken und -Grenzen
• web.dev — Googles Bildoptimierungsguide mit Format-Entscheidungsbäumen
• CSS-Tricks: Using SVG — Praxisbeispiele wann SVG PNG schlägt und umgekehrt
• W3C SVG 2 Specification — Technische Spezifikation zu SVG-Fähigkeiten vs Rasterformate