SVG vs PNG: Umfassender
Vergleichsleitfaden

Der grundlegende Unterschied

PNG (Portable Network Graphics) ist ein Rasterformat. Es speichert Bilder als Raster farbiger Pixel. Jedes Pixel hat eine feste Position, Farbe und Deckkraft. Die Gesamtanzahl der Pixel — die Auflösung — bestimmt, wie viel Detail das Bild enthalten kann. Ein 1000×1000 PNG enthält genau 1 Million Pixelwerte. Wenn Sie das Bild über seine native Auflösung hinaus vergrößern, muss die Software neue Pixel zwischen vorhandenen interpolieren (erfinden), was zu einem unscharfen Ergebnis führt.

SVG (Scalable Vector Graphics) ist ein Vektorformat. Es beschreibt Bilder mithilfe mathematischer Definitionen: Pfade, Kurven, Formen, Linien und Füllungen. Ein Kreis wird als Mittelpunktkoordinate und Radius gespeichert — nicht als Tausende angeordnete Pixel. Da das Bild durch Gleichungen statt durch ein festes Pixelraster definiert wird, kann es in jeder Größe mit perfekter Schärfe gerendert werden. Die Rendering-Engine berechnet die Mathematik für die Zieldimensionen einfach neu.

Es geht dabei nicht darum, dass ein Format „besser" als das andere ist. Es geht darum, dass jedes Format für unterschiedliche Inhaltstypen konzipiert wurde. PNG eignet sich hervorragend für fotografische und komplexe Rasterinhalte. SVG eignet sich hervorragend für geometrische Grafiken, Logos, Icons und Illustrationen.

Umfassender Vergleich

Wann sollten Sie SVG verwenden?

SVG ist die optimale Wahl für jede Grafik, die grundlegend geometrisch ist — aus Formen, Linien und Kurven statt aus fotografischen Pixeldaten besteht.

Logos und Corporate Design

Ein Unternehmenslogo erscheint überall: Website-Favicon (16px), Header-Bild (200px), Visitenkarte (300 DPI Druck), Messestand-Banner (10 Meter). Für jede Größe ein PNG bereitzustellen bedeutet, mehrere Dateien in unterschiedlichen Auflösungen zu pflegen. Mit SVG pflegen Sie eine einzige Datei, die in jeder Größe perfekt dargestellt wird. CSS kann die Farbe des Logos bei Hover, im Dark Mode oder beim Drucken ändern. Und die Datei ist typischerweise 2–15 KB — kleiner als sogar die kleinste PNG-Variante.

Icons und UI-Elemente

Icon-Sets (Navigation, Social Media, Feature-Icons) sind ideale SVG-Kandidaten. Jedes Icon ist eine einfache geometrische Form, die von folgenden Vorteilen profitiert:

• Auflösungsunabhängigkeit: Scharf auf 1x-, 2x- und 3x-Displays, ohne mehrere PNGs bereitzustellen
• CSS-Styling: Farben mit fill- oder stroke-Eigenschaften ändern — keine separaten Icon-Varianten erforderlich
• Animation: Hover-Effekte, Lade-Spinner, Micro-Interactions
• Winzige Dateigröße: Ein typisches Icon-SVG ist 200–500 Bytes. Ein Set von 50 Icons inline in HTML fügt weniger als 25 KB insgesamt hinzu.

Flache Illustrationen und Infografiken

Illustrationen mit Vollfarben, sauberen Kanten und geometrischen Formen lassen sich natürlich in das Vektorformat übertragen. Marketing-Illustrationen, Onboarding-Screens und Infografiken werden typischerweise in Vektorprogrammen (Illustrator, Figma) erstellt und als SVG exportiert. Das Ergebnis ist bei jeder Viewport-Breite scharf, mit CSS stylebar und dramatisch kleiner als entsprechende hochauflösende PNGs.

Diagramme und Datenvisualisierungen

Balkendiagramme, Liniendiagramme, Kreisdiagramme und interaktive Datenvisualisierungen sind von Natur aus vektorbasiert. Bibliotheken wie D3.js, Chart.js und Highcharts rendern direkt in SVG. Das Ergebnis ist auflösungsunabhängig, interaktiv (Tooltips, Klick-Events) und zugänglich (Screenreader können das SVG-DOM parsen).

Responsives Webdesign

SVG passt sich automatisch an jede Container-Größe an. Eine Hero-Illustration, die auf dem Desktop 1200px ausfüllt und auf Mobilgeräten 360px, verwendet dieselbe SVG-Datei. Der Browser berechnet die Vektormathematik für jede Größe neu. PNG erfordert entweder überdimensionierte Bilder (Bandbreite auf Mobilgeräten verschwendend) oder mehrere srcset-Varianten (mehr Komplexität und mehr Dateien zu pflegen).

Wann sollten Sie PNG verwenden?

PNG eignet sich hervorragend für Inhalte, die von Natur aus rasterbasiert sind — Inhalte, die als Pixel erfasst oder erstellt wurden und nicht sinnvoll auf geometrische Formen reduziert werden können.

Fotografien

Eine Fotografie enthält Millionen einzigartiger Farbwerte mit weichen, kontinuierlichen Verläufen über Hauttöne, Himmel, Laub und Stoffe hinweg. Das Vektorformat kann diese Daten nicht effizient darstellen. Das Konvertieren eines Fotos in SVG würde Tausende winziger Pfade erzeugen, eine Datei, die 10–100x größer als das PNG wäre und dabei schlechter aussähe. Für fotografische Inhalte sind PNG (verlustfrei) oder JPEG (verlustbehaftet, kleiner) die richtigen Entscheidungen.

Screenshots und Interface-Aufnahmen

Screenshots enthalten gerendereten Text, UI-Elemente, Verläufe und anti-aliasierte Kanten, die zusammen als Pixel gemischt sind. Die spezifische Pixelanordnung ist entscheidend. PNG bewahrt diese exakt. Das Vektorisieren eines Screenshots würde eine unzuverlässige Interpretation der Pixeldaten erzeugen, keine originalgetreue Reproduktion.

Komplexe digitale Kunstwerke

Digitale Gemälde, Aquarelleffekte, texturreiche Illustrationen und Kunstwerke mit Tausenden von Farben und Verläufen werden als PNG besser bedient. Auch wenn das Original möglicherweise mit einigen Vektorelementen erstellt wurde, sind die gerenderten Ausgaben mit ihren Überblendungen, Effekten und Texturen grundlegend Rasterdaten.

Pixelgenaues Rendering

Wenn die exakte Pixelplatzierung entscheidend ist — Pixel-Art, Sprite-Sheets, niedrig auflösende Spiel-Assets — ist PNG das richtige Format. SVG-Rendering beinhaltet Anti-Aliasing und Subpixel-Berechnungen, die Elemente um Bruchteile eines Pixels verschieben können, was die präzise Ausrichtung zerstört, die Pixel-Art erfordert.

Web-Performance-Vergleich

Die Wahl des richtigen Formats für jedes Asset wirkt sich direkt auf die Ladegeschwindigkeit Ihrer Website und die Core Web Vitals-Scores aus.

Dateigröße

Für Icons und Logos gewinnt SVG deutlich. Ein typisches Icon:

• SVG: 200–800 Bytes (Klartext, komprimiert auf 100–400 Bytes mit gzip)
• PNG @1x: 1–5 KB
• PNG @2x (Retina): 3–15 KB
• PNG @3x (Hi-DPI): 5–25 KB

Ein einzelnes SVG ersetzt drei PNG-Dateien und ist dabei kleiner als die kleinste davon. Bei einer Website mit 20 Icons spart das 100–400 KB Bilddaten.

Für Logos:

• SVG: 2–15 KB (gzipped: 1–8 KB)
• PNG @2x: 20–200 KB

Komprimierung (Gzip/Brotli)

SVG ist XML-Text, der sich mit gzip (50–70% Reduktion) und Brotli (60–80% Reduktion) außergewöhnlich gut komprimieren lässt. Web-Server komprimieren SVG automatisch, sodass die Übertragungsgröße deutlich kleiner ist als die Datei auf der Festplatte. PNG verfügt über eine eingebaute Deflate-Komprimierung und profitiert nicht wesentlich von zusätzlichem gzip/Brotli.

Vorteile von Inline-SVG

SVG kann direkt in HTML mit einem <svg>-Tag eingebettet werden, wodurch der HTTP-Request vollständig entfällt. Für kritische Icons und Logos above the fold kann dies den Largest Contentful Paint (LCP) verbessern, da der Browser nicht auf einen separaten Bild-Download warten muss. PNG erfordert immer einen separaten HTTP-Request (oder eine Data URI, die die HTML-Größe um ~33% aufbläht).

Google Core Web Vitals

Drei wichtige Metriken werden durch die Wahl des Bildformats beeinflusst:

• LCP (Largest Contentful Paint): Kleinere Bilddateien laden schneller. SVG-Logos und -Icons tragen weniger zum LCP bei als hochauflösende PNGs.
• CLS (Cumulative Layout Shift): SVG mit expliziten viewBox-Dimensionen ermöglicht dem Browser, Platz vor dem Rendering zu reservieren und Layout-Verschiebungen zu verhindern. PNG erfordert explizite width- und height-Attribute für denselben Vorteil.
• INP (Interaction to Next Paint): Weniger Bild-Requests bedeuten weniger Arbeit für den Haupt-Thread. Inline-SVG reduziert den HTTP-Overhead.

Konvertierung zwischen Formaten

PNG zu SVG (Vektorisierung)

Das Konvertieren von PNG zu SVG ist ein Vektorisierungs- (Tracing-)Prozess. Der Konverter analysiert Pixelgrenzen, erkennt Kanten und generiert Bézier-Kurven, die diese Kanten als mathematische Pfade approximieren. Dies funktioniert gut für:

• Logos mit Vollfarben auf sauberen Hintergründen
• Strichzeichnungen, Skizzen und handgezeichnete Designs
• Icons und einfache Illustrationen
• Text und Typografie

Es funktioniert nicht gut für Fotografien, komplexe Verläufe oder detaillierte Texturen. Das Ergebnis ist eine Interpretation, keine pixelgenaue Kopie.

SVG zu PNG (Rasterisierung)

Das Konvertieren von SVG zu PNG ist Rasterisierung — das Rendern der mathematischen Pfade in einer bestimmten Pixelauflösung. Dies ist ein unkomplizierter Prozess ohne Qualitätsverlust bei der gewählten Auflösung. Sie geben einfach die Zieldimensionen an, und der Renderer füllt die Pixel aus. Tools wie ImageMagick, Inkscape und jeder Web-Browser können SVG in PNG rastern.

Häufige Gründe für die Konvertierung von SVG in PNG:

• Social-Media-Plattformen, die keine SVG-Uploads akzeptieren
• E-Mail-Clients mit schlechtem SVG-Rendering
• Ältere Software, die nur Rasterformate unterstützt
• Generierung von Thumbnails mit fester Auflösung für Bildgalerien

Tipps zur SVG-Optimierung

SVG-Dateien, die aus Design-Tools exportiert werden, enthalten oft unnötige Daten, die die Dateigröße aufblähen, ohne die visuelle Ausgabe zu beeinflussen. Durch Optimierung kann die SVG-Dateigröße um 60–80% reduziert werden.

Editor-Metadaten entfernen

Illustrator, Figma und Sketch betten proprietäre Metadaten, Kommentare und Generator-Informationen in exportierte SVGs ein. Diese Daten sind für Browser unsichtbar, können aber 30–50% der Datei ausmachen. Tools wie SVGO (SVG Optimizer) entfernen diese automatisch.

Pfade vereinfachen

Vektoreditoren erstellen oft Pfade mit mehr Kontrollpunkten als visuell nötig. Die Reduzierung der Anzahl von Punkten in jedem Pfad (Pfadvereinfachung) kann das SVG dramatisch verkleinern und dabei visuell identische Ausgaben erzeugen. In Inkscape verwenden Sie Pfad > Vereinfachen (Strg+L). Das SVGO-Plugin convertPathData erledigt dies automatisch.

XML minimieren

Leerzeichen, Zeilenumbrüche und unnötige Attribute entfernen. Absolute Pfadkoordinaten in relative umwandeln (kürzere Strings). Standard-Attributwerte entfernen. SVGO erledigt all diese Optimierungen in einem einzigen Durchgang.

SVG-Symbole für Icon-Sets verwenden

Wenn Sie mehrere Icons auf einer Seite verwenden, definieren Sie diese einmal in einem SVG-<symbol>-Sprite und referenzieren Sie sie mit <use>. Dies vermeidet die Duplizierung derselben Pfaddaten auf der gesamten Seite.