SVG vs PNG vs WebP: der definitive Leitfaden für Webdesigner 2025

Was jedes Format wirklich ist

Vor dem Vergleich hilft es zu verstehen, was jedes Format speichert — denn sie lösen grundlegend unterschiedliche Probleme.

SVG — Scalable Vector Graphics

SVG ist eine XML-basierte Auszeichnungssprache, kein Pixelraster. Es beschreibt Formen, Pfade und Text als mathematische Anweisungen. Ein Kreis in SVG ist buchstäblich <circle cx="50" cy="50" r="40"/>. Das bedeutet, es rendert perfekt in jeder Größe und ist für Screenreader vollständig zugänglich.

PNG — Portable Network Graphics

PNG speichert ein verlustfreies Pixelraster mit voller Alpha-Kanal-Unterstützung. Es eignet sich hervorragend für Bilder mit scharfen Kanten, flachen Farben und Text. Der Kompromiss: Dateigrößen sind für fotografische Inhalte groß.

WebP — Googles modernes Format

WebP unterstützt sowohl verlustbehaftete als auch verlustfreie Kompression, Transparenz und Animation. Im verlustfreien Modus erzeugt es typischerweise 25–35% kleinere Dateien als äquivalente PNGs. Browser-Unterstützung ist nun universell in Chrome, Firefox, Safari (seit 2020) und Edge.

Anwendungsfall-Matrix: welches Format wo gewinnt

Das richtige Format hängt vom Asset-Typ ab, nicht von einer universellen Präferenz:

Asset-Typ	SVG	PNG	WebP
Logo / Wortmarke	✅ Bestes	⚠ Fallback	❌ Vermeiden
UI-Icon (inline)	✅ Bestes	⚠ Akzeptabel	❌ Vermeiden
App-Icon / Favicon	✅ Quelle	✅ Gut (ICO)	❌ Keine Unterstützung
Flache Illustration	✅ Bestes	⚠ Große Dateien	✅ Gut
Screenshot / UI	❌ Falsches Tool	✅ Bestes	✅ Ausgezeichnet
Fotografie	❌ Falsches Tool	⚠ Zu schwer	✅ Bestes
Animierte Grafik	✅ CSS/JS	❌ Keine Animation	✅ WebP anim
E-Mail-Bild	❌ Schlechte Unterstützung	✅ Universal	⚠ Begrenzte Unterstützung

Warum SVG für Logos und Icons überlegen ist

Das Argument gegen SVG ist normalerweise die Dateigröße — eine komplexe Illustration kann Hunderte von Kilobytes erreichen. Aber für Logos und UI-Icons gilt dieses Argument nicht:

• Auflösungsunabhängigkeit: eine einzige SVG-Datei bedient mobiles Retina, 4K-Desktop und Großformatdruck. Mit PNG benötigen Sie @1x, @2x, @3x-Varianten.
• CSS-Theming: SVG-Pfade erben currentColor, sodass eine einzelne Icon-Datei sich ohne neuen Export an Dark Mode und Hover-Zustände anpasst.
• Inline-Interaktion: in HTML eingebettet sind SVG-Elemente Teil des DOM — Sie können einzelne Pfade animieren und Event-Listener anhängen.
• Zugänglichkeit: SVG unterstützt <title>- und <desc>-Elemente, die Screenreader direkt konsumieren.
• Kompressions-Effizienz: ein typisches Logo-SVG gzippt ist 1–4 KB. Ein @2x PNG desselben Logos liegt selten unter 20 KB.

Wenn Sie eine Raster-Version benötigen — für eine Plattform, die SVG nicht akzeptiert, für ein OG-Bild oder einen Druckanbieter — ist die Konvertierung einen Klick entfernt.

Kostenloses Tool SVG zu PNG Konverter Konvertieren Sie jedes SVG in ein pixelperfektes PNG in beliebiger Auflösung. Unterstützt transparenten Hintergrund und benutzerdefinierte Skalierungsfaktoren.

Wann WebP PNG für Fotografie und Illustrationen schlägt

Für fotografische Inhalte und komplexe Rasterillustrationen hat WebP einen klaren Vorteil gegenüber PNG und einen Wettbewerbsvorteil gegenüber JPEG:

Der Kompressionsunterschied ist nicht akademisch. Ein Hero-Bild von 800 KB als PNG liegt typischerweise unter 200 KB als verlustbehaftetes WebP bei wahrnehmungsidentischer Qualität. Das hat direkten Einfluss auf Core Web Vitals — speziell Largest Contentful Paint (LCP).

• Verlustbehaftetes WebP vs JPEG: gleiche wahrgenommene Qualität, ~25–30% kleinere Dateigröße. Für fotografische Inhalte bevorzugen Sie WebP gegenüber JPEG.
• Verlustfreies WebP vs PNG: gleiche pixelperfekte Wiedergabetreue, ~25–35% kleiner. Für Screenshots und UI-Aufnahmen mit Alpha ist verlustfreies WebP die bessere Wahl.
• Animiertes WebP vs GIF: deutlich bessere Kompression für Animation. Wenn Sie Animation ohne JavaScript benötigen, ist WebP-Animation die moderne Antwort.
• Die PNG-Ausnahme: behalten Sie PNG für Assets, die maximale Tool-Kompatibilität benötigen — Figma-Exporte, Photoshop-Quelldateien und alles in Design-Übergabe-Workflows.

Der Hauptvorbehalt: WebP hat in einigen E-Mail-Clients und älteren Versionen von Apples nativen Apps begrenzte Unterstützung. Für Web-Lieferung gibt es keinen Grund mehr, PNG gegenüber WebP zu wählen.

Die Favicon-Ausnahme: warum ICO noch existiert

Favicons folgen anderen Regeln. Das klassische favicon.ico-Format bettet mehrere Auflösungen (16×16, 32×32, 48×48) in eine einzige Datei ein. Moderne Praxis schichtet drei Deklarationen: ein ICO für Legacy-Browser, ein 192×192 PNG für Android-Homescreens und ein SVG-Favicon für unterstützende Browser.

Die Quelle für all diese sollte Ihr ursprüngliches SVG sein. Ein ordentlicher Favicon-Generator konvertiert es in einem Schritt in alle notwendigen Formate.

Kostenloses Tool Favicon Generator Laden Sie ein SVG oder PNG hoch und erhalten Sie ein vollständiges Favicon-Paket: ICO, 16×16, 32×32, 192×192, 512×512 und Apple Touch Icon — bereit zum Einfügen in Ihr HTML.

E-Mail vs. Web vs. App — dasselbe Asset, unterschiedliche Regeln

E-Mail

E-Mail-Clients sind die konservativste Umgebung. SVG wird von Gmail, Outlook und Apple Mail blockiert. WebP wird in Outlook unter Windows nicht unterstützt. Die sichere Wahl: PNG für Logos und Illustrationen, JPEG für Fotografie.

Web

Modernes Web hat die größte Flexibilität. Verwenden Sie SVG für alle Logos, Icons und Illustrationen, die als Vektoren entstanden. WebP (verlustbehaftet) für Fotografie, WebP (verlustfrei) für Screenshots. PNG-Fallback nur wenn nötig.

Native App (iOS / Android)

iOS und Android unterstützen beide SVG über ihre jeweiligen Vektorgrafik-Formate. In der Praxis generieren App-Asset-Pipelines mehrere PNG-Dichten (1x, 2x, 3x) aus einer Vektorquelle. WebP wird nativ von Android 4.0+ und iOS 14+ unterstützt.

Base64-Einbettung: wenn Liefergrößen keine Rolle spielen

Es gibt ein spezifisches Szenario, in dem Sie ein Bild in Base64 konvertieren und direkt in HTML, CSS oder JavaScript einbetten: wenn das Asset winzig ist, ohne zusätzliche HTTP-Anfrage verfügbar sein muss und nicht unabhängig gecacht wird. Kleine SVG-Icons in CSS background-image und Lade-Spinner sind die kanonischen Fälle.

Base64-Kodierung erhöht die Dateigröße um etwa 33%, daher ist es nur für kleine Assets geeignet (unter ~10 KB). Für alles Größere ist die zusätzliche Anfrage günstiger als der Kodierungs-Overhead.

Kostenloses Tool Bild zu Base64 Konverter Konvertieren Sie jedes PNG, SVG, WebP oder JPEG in einen Base64-Data-URI — bereit zum Einfügen in CSS, HTML oder JavaScript.

Das Entscheidungsframework: ein Flussdiagramm in Prosa

Wenden Sie diese Regeln der Reihe nach an. Das erste Übereinstimmung gewinnt:

• Begann das Asset als Vektor? (Logo, Icon, in Figma/Illustrator gezeichnete Illustration) → Verwenden Sie SVG. Konvertieren Sie nur in PNG/WebP, wenn die Zielumgebung SVG nicht unterstützt.
• Ist es ein Foto oder ein komplexes Verlaufsbild? → Verwenden Sie verlustbehaftetes WebP. Greifen Sie nur für E-Mail oder Tools, die WebP ablehnen, auf JPEG zurück.
• Ist es ein Screenshot, eine UI-Aufnahme oder eine flache Illustration mit Alpha? → Verwenden Sie verlustfreies WebP. PNG als Fallback für E-Mail.
• Ist es ein Favicon? → Generieren Sie ein ICO + PNG + SVG-Paket aus Ihrer Vektorquelle. Verwenden Sie niemals WebP für Favicons.
• Geht es in eine HTML-E-Mail? → Verwenden Sie PNG (Logos) oder JPEG (Fotos). Vermeiden Sie SVG und WebP vollständig.
• Muss es ohne HTTP-Anfrage eingebettet werden? → Konvertieren Sie in Base64, aber nur wenn das Asset unter ~10 KB liegt.

Häufig gestellte Fragen