PNG vs SVG - wann jedes Format verwenden

Veroeffentlicht am 19. April 2026

---

PNG und SVG sind die beiden bevorzugten Formate fuer Logos, Icons und UI-Elemente im modernen Web. Sie loesen dasselbe Problem - scharfe, klare Bilder auf jedem Bildschirm - aber auf grundlegend unterschiedliche Weise. PNG speichert Pixel; SVG speichert Zeichenanweisungen. Die richtige Wahl haengt davon ab, was Sie zeigen, wohin es geht und wie gross die endgueltige Wiedergabe sein muss. Dieser Leitfaden behandelt die Mechanik, die Kompromisse und die vier realen Entscheidungen, die bestimmen, welches Format gewinnt.

Wie jedes Format tatsaechlich funktioniert

PNG (Portable Network Graphics) ist ein Raster-Format. Eine PNG-Datei speichert ein Gitter aus farbigen Pixeln - jeder Pixel hat einen expliziten Rot-, Gruen-, Blau- und Alpha-Wert. Wenn Ihr Browser oder Bildbetrachter ein PNG oeffnet, liest er diese Pixelwerte aus der Datei und malt sie auf den Bildschirm in ihrer nativen Aufloesung. Ein PNG auf dem Bildschirm groesser zu machen streckt jeden Pixel, was den bekannten unscharfen Upscale produziert. Ein PNG zu schrumpfen tastet das Gitter neu ab; abhaengig vom Algorithmus koennen Kanten weicher werden.

SVG (Scalable Vector Graphics) ist ein Vektor-Format. Eine SVG-Datei ist ein XML-Dokument, das Formen, Linien, Kurven und Fuellungen beschreibt. Es gibt keine Pixel in der Quelle - nur Anweisungen wie "zeichne einen Kreis bei (20,20) mit Radius 15, rot gefuellt". Wenn der Browser das SVG rendert, berechnet er die Pixel zur Laufzeit in der Aufloesung, die das Display erfordert. Dieselbe SVG-Datei rendert scharf bei 16×16 fuer ein Favicon und bei 3000×3000 fuer ein Werbeplakat, ohne Qualitaetsverlust.

Vergleich nebeneinander

Wann PNG gewinnt

Fotografien. Eine Fotografie hat Millionen von schrittweise variierenden Pixelwerten - genau das, wofuer ein Rasterformat entwickelt wurde. SVG kann ein Foto nicht effizient darstellen; die Pixel als base64-Blob in ein SVG einzubetten, hebt die Vektorvorteile auf. Verwenden Sie PNG fuer Fotos, oder besser noch JPG oder WebP fuer nicht transparente Fotos, um die Dateigroesse weiter zu reduzieren.

Komplexe Illustrationen mit vielen Gradienten, Schatten und Pixel-Detail. Wenn Ihr Icon aussieht wie ein kleines Gemaelde - weiche Schatten, mehrstufige Gradienten, Texturueberlagerungen - ist ein PNG des abgeflachten Endrenders oft kleiner als das SVG mit den entsprechenden Filtern.

Screenshots von UI, Text oder Code. Screenshots sind von Natur aus Pixeldaten. PNG bewahrt die genaue Schaerfe des gerenderten Textes und der UI-Chrome ohne verlustbehaftete Kompressionsartefakte. Bevorzugen Sie verlustfreies WebP fuer Dateigroessenersparnis, wenn Ihr Publikum moderne Browser verwendet.

Wenn die Zielplattform SVG nicht unterstuetzt. Einige Dokumentformate (Word, einige E-Mail-Clients, aelteres PowerPoint) rendern SVG immer noch inkonsistent. Wenn das endgueltige Ziel keine SVG-Unterstuetzung garantieren kann, exportieren Sie das SVG zuerst in PNG in Zielaufloesung.

Wann SVG gewinnt

Logos. Ihr Logo muss bei 24×24 in einem Browser-Tab, 200×200 auf einem Login-Bildschirm und 2000×2000 auf einem Konferenzbanner gut aussehen. Eine einzige SVG-Datei macht alle drei mit perfekter Treue. PNG erfordert das Exportieren mehrerer Groessen (24, 48, 96, 200, 400, 1000, 2000) und die Auswahl der richtigen pro Kontext - eine Wartungslast.

Icons in einer UI. SVG-Icons koennen mit CSS gestaltet (fill, stroke, opacity, filter) und beim Hover/Fokus animiert werden. Das gleiche Icon erbt die aktuelle Textfarbe durch Setzen von fill: currentColor. PNG-Icons erfordern separate Dateien pro Farbvariante.

Diagramme, Graphen und Infografiken. Alles, was aus Formen und Text gezeichnet ist - Organigramme, Architekturdiagramme, Flussdiagramme, statistische Plots - rendert sauber in SVG und bleibt scharf bei jeder Zoomstufe. Hineinzoomen in ein PNG-Diagramm offenbart schnell Aliasing.

Animierte UI-Elemente. SVG-Animation via SMIL, CSS-Uebergaengen oder JavaScript skaliert besser als APNG oder animiertes GIF fuer geometrische Formen (Lade-Spinner, Statusindikatoren, Mikro-Interaktionen). Dateigroessen bleiben klein, selbst fuer komplexe Animationen.

Die vier realen Entscheidungen im Alltag

Logo auf einer Marketing-Site. → SVG. Die gleiche Datei handhabt Header (klein), Hero (mittel) und Druck-/Plakatexport (gross) ohne separate Dateien oder Qualitaetsverlust. Fallen Sie nur auf ein PNG zurueck, wenn Sie das Logo in ein Dokumentformat einbetten muessen, das SVG ablehnt.

App-Icon / Favicon. → SVG fuer den Master; exportieren Sie zu PNG bei 16, 32, 48, 180, 192, 512 fuer die apple-touch-icon- und favicon.ico-Fallbacks. Beide Dateien gehen in das bereitgestellte Bundle; Browser waehlen die richtige pro Kontext.

Produktfoto. → PNG, wenn Transparenz wichtig ist (Ausschnitt auf Weiss oder einem gemusterten Hintergrund); andernfalls JPG oder WebP fuer die halbe Dateigroesse. Niemals SVG.

Diagramm oder Graph in Dokumentation. → SVG in den HTML eingebettet (so ist es zoombar, ueber Text im SVG zugaenglich und als einzelne Datei teilbar). Exportieren Sie nur zu PNG, wenn das Ziel ein PDF oder Word-Dokument ist, das die SVG-Treue nicht respektiert.

Konvertierungswege zwischen PNG und SVG

PNG → SVG ist eine "Tracing"-Operation. Das Zielformat benoetigt Formdefinitionen, also analysiert ein Tracer Kanten und Farbregionen im PNG und generiert annaeherungsweise Vektorpfade. Die Ergebnisse sind ausgezeichnet fuer Logos und einfache Icons (saubere Kanten, wenige Farben) und schlecht fuer Fotos (zu viele Farbregionen, um sinnvoll zu tracen). Verwenden Sie PNG to SVG - passen Sie den Glaettungsparameter an, betrachten Sie die Vorschau und iterieren Sie, bis die getracten Pfade dem Original entsprechen.

SVG → PNG ist eine "Rasterisierungs"-Operation. Der Browser (oder ein Konverter) wertet die SVG-Anweisungen bei einer bestimmten Aufloesung aus und schreibt Pixelwerte. Verwenden Sie SVG to PNG - waehlen Sie die Ausgabegroesse vor dem Export; im Gegensatz zur anderen Richtung ist Rasterisieren verlustfrei fuer die Zielgroesse, bedeutet aber, dass Sie sich auf eine einzige Aufloesung festlegen.

Hin- und Rueck-Konvertierungen (SVG → PNG → SVG) summieren Verluste in der PNG-Phase und dem nachfolgenden Trace. Halten Sie die SVG-Master-Quelle und exportieren Sie PNG-Varianten nach Bedarf; gehen Sie niemals in die andere Richtung, es sei denn, Sie haben keine SVG-Quelle zum Arbeiten.

Verwandte Werkzeuge

• PNG to SVG Converter - ein Rasterbild zu einem skalierbaren Vektor tracen.
• SVG to PNG Converter - einen Vektor zu PNG oder WebP in jeder Groesse rastern.
• Compress JPEG - Foto-Dateigroesse mit KI-abgestimmter Qualitaet reduzieren.
• Resize Image - exakte Pixeldimensionen mit bikubischer Interpolation festlegen.

← Zurueck zu Image Converter Tools