SVG vs PNG im Vergleich: Vektor- vs. Rasterbilder einfach erklaert
SVG und PNG loesen grundlegend unterschiedliche Probleme. SVG speichert Bilder als mathematische Formen, die unendlich skalieren, ohne an Qualitaet zu verlieren. PNG speichert Bilder als Pixelraster. Das falsche Format zu waehlen kostet entweder Performance oder visuelle Qualitaet.
Was SVG und PNG grundlegend unterscheidet
SVG ist ein XML-basiertes Format, das Bilder mit mathematischen Definitionen beschreibt. Beim Zoomen berechnet der Browser jede Form neu — das Ergebnis ist immer scharf.
PNG ist ein Rasterformat mit fester Aufloesung. Vergroessern ueber die nativen Dimensionen hinaus fuehrt zu Unschaerfe und Pixelbildung.
Wann SVG die bessere Wahl ist
- Logos — muessen bei jeder Groesse scharf sein. SVG loest das mit einer einzigen Datei.
- Icons — UI-, Navigations- und Social-Media-Icons. Ein E-Commerce-Shop reduzierte 50 Kategorie-Icons von 1,2 MB (PNG) auf 95 KB (SVG).
- Illustrationen und Diagramme — technische Zeichnungen, Flowcharts, Infografiken mit klaren Linien.
- Animationen — SVG-Elemente koennen mit CSS oder JavaScript animiert werden.
- Favicons — moderne Browser unterstuetzen SVG-Favicons. Erstellen Sie Ihre mit dem Favicon Generator.
Laut W3Techs verwenden 65,5% aller Websites SVG.
Wann PNG die bessere Wahl ist
- Fotos mit Transparenz — Produktfreisteller auf transparentem Hintergrund. (Fuer Fotos ohne Transparenz ist JPEG meist besser.)
- Screenshots — pixelgenaue UI-Elemente und Anti-Aliased-Text sind inhaerent Raster.
- Komplexe Grafiken mit vielen Farben — detaillierte digitale Gemaelde und Texturen.
Dateigroesse und Performance
| Grafiktyp | PNG | SVG | Ersparnis |
|---|---|---|---|
| Einfaches Icon (64x64) | ~25 KB | ~2 KB | 92% |
| Logo (500x200) | ~45 KB | ~8 KB | 82% |
| 50 Kategorie-Icons | ~1,2 MB | ~95 KB | 92% |
SVG-Dateien komprimieren mit Gzip/Brotli weitere 50-70%. Sie koennen direkt in HTML eingebettet werden. Fuer komplexe Bilder — Fotos, Texturen — bietet SVG keinen Vorteil. Verwenden Sie PNG, JPEG oder WebP und AVIF.
Schnelle Vergleichstabelle
| Eigenschaft | SVG | PNG |
|---|---|---|
| Bildtyp | Vektor | Raster (Pixelraster) |
| Skalierbarkeit | Unendlich | Feste Aufloesung |
| Transparenz | Ja | Ja |
| Ideal fuer Fotos | Nein | Ja |
| Ideal fuer Icons/Logos | Ja | Akzeptabel |
| Animation | Ja (CSS/JS) | Nein |
| Typische Groesse (Icon) | 1-5 KB | 10-50 KB |
So konvertieren Sie zwischen SVG und PNG
Unser Leitfaden zu Bilddateigroessen listet empfohlene Formate nach Anwendungsfall.
Haeufig Gestellte Fragen
Kann SVG PNG vollstaendig ersetzen?
Nein. SVG eignet sich hervorragend fuer Grafiken, Icons und Illustrationen, kann aber Fotos nicht effizient darstellen. Ein Foto als SVG waere entweder riesig (eingebettete Rasterdaten als Base64) oder wuerde alle fotografischen Details verlieren.
Sind SVG-Dateien sicher fuer Websites?
SVG kann JavaScript enthalten, daher koennte eine boeswillige SVG-Datei Code im Browser ausfuehren. Wenn Sie SVG-Uploads von Nutzern akzeptieren, sanitisieren Sie diese immer. Fuer selbst erstellte SVGs besteht kein praktisches Risiko.
Soll ich SVG oder Icon-Fonts fuer Website-Icons verwenden?
SVG ist die moderne Best Practice. Icon-Fonts haben Barrierefreiheitsprobleme, Styling-Einschraenkungen und den Overhead einer kompletten Font-Datei. Inline-SVG-Icons laden schneller und sind individuell per CSS stylebar.
Konvertieren Sie Ihre Bilder jetzt
Kostenlos, privat, in Ihrem Browser.