SVG vs PNG im Vergleich: Vektor- vs. Rasterbilder einfach erklärt
SVG und PNG lösen grundlegend unterschiedliche Probleme. SVG speichert Bilder als mathematische Formen, die unendlich skalieren, ohne an Qualität zu verlieren. PNG speichert Bilder als Pixelraster. Das falsche Format zu wählen kostet entweder Performance oder visuelle Qualität.
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 Auflösung. Vergrößern über die nativen Dimensionen hinaus führt zu Unschärfe und Pixelbildung.
Wann SVG die bessere Wahl ist
- Logos — müssen bei jeder Größe scharf sein. SVG löst 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 können mit CSS oder JavaScript animiert werden.
- Favicons — moderne Browser unterstützen 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. (Für Fotos ohne Transparenz ist JPEG meist besser.)
- Screenshots — pixelgenaue UI-Elemente und Anti-Aliased-Text sind inhärent Raster.
- Komplexe Grafiken mit vielen Farben — detaillierte digitale Gemälde und Texturen.
Dateigröße 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 können direkt in HTML eingebettet werden. Für 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 Auflösung |
| Transparenz | Ja | Ja |
| Ideal für Fotos | Nein | Ja |
| Ideal für Icons/Logos | Ja | Akzeptabel |
| Animation | Ja (CSS/JS) | Nein |
| Typische Größe (Icon) | 1-5 KB | 10-50 KB |
So konvertieren Sie zwischen SVG und PNG
Unser Leitfaden zu Bilddateigrößen listet empfohlene Formate nach Anwendungsfall.
Häufig Gestellte Fragen
Kann SVG PNG vollständig ersetzen?
Nein. SVG eignet sich hervorragend für Grafiken, Icons und Illustrationen, kann aber Fotos nicht effizient darstellen. Ein Foto als SVG wäre entweder riesig (eingebettete Rasterdaten als Base64) oder würde alle fotografischen Details verlieren.
Sind SVG-Dateien sicher für Websites?
SVG kann JavaScript enthalten, daher könnte eine böswillige SVG-Datei Code im Browser ausführen. Wenn Sie SVG-Uploads von Nutzern akzeptieren, sanitisieren Sie diese immer. Für selbst erstellte SVGs besteht kein praktisches Risiko.
Soll ich SVG oder Icon-Fonts für Website-Icons verwenden?
SVG ist die moderne Best Practice. Icon-Fonts haben Barrierefreiheitsprobleme, Styling-Einschränkungen und den Overhead einer kompletten Font-Datei. Inline-SVG-Icons laden schneller und sind individuell per CSS per CSS anpassbar.
Konvertieren Sie Ihre Bilder jetzt
Kostenlos, privat, in Ihrem Browser.