PNG vs SVG - wann jedes Format verwenden
freetoolonline.com Editorial Team
PNG speichert Pixel; SVG speichert Zeichenanweisungen. Wählen Sie PNG für Fotos und alles mit Pixeldetails, und SVG für Logos, Icons und Diagramme, die in jeder Größe scharf bleiben müssen. Die richtige Wahl hängt von Skalierbarkeit, Dateigröße und Zielplattform ab.
Wie jedes Format tatsächlich funktioniert
PNG (Portable Network Graphics) ist ein Raster-Format. Eine PNG-Datei speichert ein Gitter aus farbigen Pixeln - jeder Pixel hat einen expliziten Rot-, Grün-, Blau- und Alpha-Wert. Wenn Ihr Browser oder Bildbetrachter ein PNG öffnet, liest er diese Pixelwerte aus der Datei und malt sie auf den Bildschirm in ihrer nativen Auflösung. Ein PNG auf dem Bildschirm größer zu machen streckt jeden Pixel, was den bekannten unscharfen Upscale produziert. Ein PNG zu schrumpfen tastet das Gitter neu ab; abhängig vom Algorithmus können Kanten weicher werden.
SVG (Scalable Vector Graphics) ist ein Vektor-Format. Eine SVG-Datei ist ein XML-Dokument, das Formen, Linien, Kurven und Füllungen beschreibt. Es gibt keine Pixel in der Quelle - nur Anweisungen wie "zeichne einen Kreis bei (20,20) mit Radius 15, rot gefüllt". Wenn der Browser das SVG rendert, berechnet er die Pixel zur Laufzeit in der Auflösung, die das Display erfordert. Dieselbe SVG-Datei rendert scharf bei 16×16 für ein Favicon und bei 3000×3000 für ein Werbeplakat, ohne Qualitätsverlust.
Vergleich nebeneinander
Vergleich nebeneinander bei PNG vs SVG wann nutzen: PNG speichert ein Pixelgitter; SVG speichert Formen und Text als Vektoren die bei jedem Zoom scharf bleiben.
| Attribut | PNG | SVG |
|---|---|---|
| Kodierung | Pixelraster (Raster) | Zeichenanweisungen (Vektor) |
| Skalierbarkeit | Verliert Qualität beim Vergrößern | Unendlich, verlustfrei |
| Dateigröße (einfaches Logo) | ~20-80 KB | ~2-8 KB |
| Dateigröße (komplexe Illustration) | Moderat (~150 KB) | Kann anschwellen (~500 KB+) |
| Dateigröße (Fotografie) | Groß (~1-3 MB) | Nicht geeignet |
| Transparenz | Ja (Alphakanal) | Ja (Opazität pro Form) |
| Animation | Via APNG (begrenzte Unterstützung) | SMIL + CSS (breite Unterstützung) |
| Browser-Unterstützung | Universell | IE9+, alle modernen |
| In Texteditor bearbeitbar | Nein | Ja (es ist XML) |
| CSS-Styling zur Laufzeit | Nein | Ja (Farben, Striche, Filter) |
Wann PNG gewinnt
Wann PNG gewinnt bei PNG vs SVG: Fotos, Screenshots und weiche Verläufe brauchen Pixel - SVG würde aufblähen oder falsch aussehen wenn Sie ein Foto in Pfade zwingen.
Komplexe Illustrationen mit vielen Gradienten, Schatten und Pixel-Detail. Wenn Ihr Icon aussieht wie ein kleines Gemälde - weiche Schatten, mehrstufige Gradienten, Texturüberlagerungen - 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 Schärfe des gerenderten Textes und der UI-Chrome ohne verlustbehaftete Kompressionsartefakte. Bevorzugen Sie verlustfreies WebP für Dateigrößenersparnis, wenn Ihr Publikum moderne Browser verwendet.
Wenn die Zielplattform SVG nicht unterstützt. Einige Dokumentformate (Word, einige E-Mail-Clients, älteres PowerPoint) rendern SVG immer noch inkonsistent. Wenn das endgültige Ziel keine SVG-Unterstützung garantieren kann, exportieren Sie das SVG zuerst in PNG in Zielauflösung.
Wann SVG gewinnt
Wann SVG gewinnt bei PNG vs SVG: Logos, Icons und einfache Diagramme bleiben auf Retina scharf und klein in Bytes wenn das Artwork wirklich Vektor ist.
Icons in einer UI. SVG-Icons können 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-Übergängen oder JavaScript skaliert besser als APNG oder animiertes GIF für geometrische Formen (Lade-Spinner, Statusindikatoren, Mikro-Interaktionen). Dateigrößen bleiben klein, selbst für komplexe Animationen.
Die vier realen Entscheidungen im Alltag
Die vier realen Entscheidungen im Alltag für PNG vs SVG sind Markenzeichen, UI-Icon, Foto-Hero und Chart - SVG für die ersten beiden wenn sauber, PNG oder WebP fürs Foto, SVG oder Canvas für Charts.
App-Icon / Favicon. → SVG für den Master; exportieren Sie zu PNG bei 16, 32, 48, 180, 192, 512 für die apple-touch-icon- und favicon.ico-Fallbacks. Beide Dateien gehen in das bereitgestellte Bundle; Browser wählen die richtige pro Kontext.
Produktfoto. → PNG, wenn Transparenz wichtig ist (Ausschnitt auf Weiß oder einem gemusterten Hintergrund); andernfalls JPG oder WebP für die halbe Dateigröße. Niemals SVG.
Diagramm oder Graph in Dokumentation. → SVG in den HTML eingebettet (so ist es zoombar, über Text im SVG zugänglich 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 benötigt Formdefinitionen, also analysiert ein Tracer Kanten und Farbregionen im PNG und generiert annäherungsweise Vektorpfade. Die Ergebnisse sind ausgezeichnet für Logos und einfache Icons (saubere Kanten, wenige Farben) und schlecht für Fotos (zu viele Farbregionen, um sinnvoll zu tracen). Verwenden Sie PNG to SVG - passen Sie den Glättungsparameter 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 Auflösung aus und schreibt Pixelwerte. Verwenden Sie SVG to PNG - wählen Sie die Ausgabegröße vor dem Export; im Gegensatz zur anderen Richtung ist Rasterisieren verlustfrei für die Zielgröße, bedeutet aber, dass Sie sich auf eine einzige Auflösung festlegen.
Hin- und Rück-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 Größe rastern.
- Compress JPEG - Foto-Dateigröße mit KI-abgestimmter Qualität reduzieren.
- Resize Image - exakte Pixeldimensionen mit bikubischer Interpolation festlegen.
Verwandte Leitfäden
- PNG to SVG: when to vectorize a raster image - Welche Logos und Icons sich sauber tracen lassen und welche nicht.
- SVG to PNG: when to rasterize an SVG - Auswahl der richtigen Exportauflösung und wann Rasterisierung sinnvoll ist.
Why trust these tools
- Ten-plus years of web tooling. The freetoolonline editorial team has shipped browser-based utilities since 2015. The goal has never changed: get you to a working output fast, without an install.
- No install, no sign-up. Open a tool and get a working output in seconds - nothing to download and no account to create. Tools that need heavy processing run it on our service, so even a low-powered machine gets the job done.
- Analytics stops at the page view. We measure which pages get visited, not what you type or upload inside a tool. There is nothing to sign in to and no profile is attached to your input.
- Open-source core components. The processing engines underneath (libheif, libde265, pdf-lib, terser, clean-css, ffmpeg.wasm, and others) are public and audit-able. We link to each one in its tool page's footer.
- Free, with or without ads. All tools are fully functional without sign-up. The Disable Ads button in the header is always available if you need a distraction-free run.