SVG vs. PNG: Welches Format sollten Sie nutzen?
Verwenden Sie SVG für Website-Icons, Logos und Benutzeroberflächen, da Vektorpfade auf jedem Bildschirm gestochen scharf bleiben. Nutzen Sie PNG für feste Pixelgrafiken in E-Mails oder sozialen Netzwerken.
Vektorgrafiken speichern Kanten als Berechnung und nicht als Pixel: dieselbe Datei bleibt von einem 16-px-Favicon bis zu einem 2048-px-Export gestochen scharf. PNG liefert dafür feste Pixel, was manche Ziele voraussetzen. Diese Seite wandelt SVG in Ihrem Browser in PNG und WebP mit den Größen 64px, 128px, 256px, 512px, 1024px, 2048px um, und jede Icon-Seite dokumentiert Lizenz und Autor. Verwenden Sie SVG für Interface-Icons und Logos, die Retina-Displays, Farbwechsel und responsive Layouts überstehen müssen; verwenden Sie PNG, wenn das Ziel ein festes Rasterbild verlangt, etwa Social Cards, App-Store-Einträge oder ältere E-Mail-Clients.
SVG, one file for every size
<svg viewBox="0 0 24 24" width="24" height="24" role="img" aria-label="Bell">
<path d="M12 3a6 6 0 0 0-6 6c0 4.5-1.5 5.5-1.5 5.5h15S18 13.5 18 9a6 6 0 0 0-6-6Z"/>
<path d="M10 19a2 2 0 0 0 4 0"/>
</svg>PNG, when a fixed pixel size is required
<img src="bell-512px.png" width="512" height="512"
alt="Bell notification icon">Geprüfte Fakten zu dieser Website
- Exportformate: Optimized SVG, PNG, WebP, React TSX, Vue 3 SFC, Svelte, CSS mask or data URI, SVG sprite
- Raster-Exportgrößen: 64px, 128px, 256px, 512px, 1024px, 2048px
- Upload-Limit pro Datei im Arbeitsbereich: 2 MB
- Lizenz und Autor stehen auf jeder Icon-Seite.