SVG vs. PNG für Icons: Was sollten Sie verwenden?
Icons werden in völlig unterschiedlichen Größen angezeigt — ein 16px-Favicon, ein 48px-App-Icon, eine 200px-Feature-Grafik —, weshalb die Entscheidung zwischen SVG und PNG besonders wichtig ist.
Warum SVG bei Icons meist die Nase vorn hat
Icons sind fast immer einfache, flächige Formen — genau das, was Vektorpfade effizient darstellen. Ein SVG-Icon bleibt scharf, ob es bei 16px oder 160px gerendert wird, und eine einzige Datei deckt jede Größe ab, die ein responsives Layout benötigen könnte, statt separate PNGs für jede Auflösung zu exportieren.
SVG-Icons lassen sich mit CSS stylen
Da Füllung und Kontur eines SVGs einfach nur Attribute sind, können Sie ein Icon per CSS umfärben, um einen Hover-Zustand oder den Dunkelmodus abzubilden, ganz ohne zweite Bilddatei. Die Farben eines PNG-Icons stecken fest in seinen Pixeln, sodass eine andere Farbe eine komplett separat exportierte Datei bedeutet.
Vergleich der Dateigröße
| SVG-Icon | PNG-Icon | |
|---|---|---|
| Typische Größe (einfaches Icon) | 0,5–3 KB | 1–5 KB pro Auflösung |
| Mehrere Auflösungen nötig? | Nein — eine Datei skaliert | Ja — jede Größe einzeln exportieren |
| Per CSS umfärbbar? | Ja | Nein |
Wann PNG bei Icons weiterhin sinnvoll ist
Wenn ein „Icon" eigentlich ein kleines fotografisches oder sehr detailreiches Bild ist — etwa ein realistisches App-Icon mit Verläufen, Schatten und Textur —, kann PNG dieses Detail originalgetreuer wiedergeben als ein Vektor-Tracing. Bei rein grafischen, flächigen Icons ist SVG jedoch fast immer die bessere Wahl. Wenn Sie von einem vorhandenen PNG-Icon-Set ausgehen, können Sie es in SVG konvertieren und beide Formate zur Verfügung haben.
Häufig gestellte Fragen
Unterstützen alle Browser SVG-Icons?
Ja, alle modernen Browser stellen SVG nativ dar, auch als Favicons, Inline-Icons und CSS-Hintergrundbilder.
Kann ich ein SVG-Icon animieren?
Ja — SVG unterstützt CSS- und JavaScript-Animation einzelner Pfade, was bei einem statischen PNG nicht möglich ist.
Ist SVG größer oder kleiner als PNG für dasselbe Icon?
Bei einfachen, flächigen Icons ist SVG meist kleiner, besonders wenn man bedenkt, dass für unterschiedliche Anzeigegrößen mehrere PNG-Exporte nötig wären.
Bereit, Ihr eigenes Bild zu konvertieren? convert your PNG to SVG now.
convert your PNG to SVG nowWeitere Artikel
Der übergreifende Formatunterschied hinter diesem icon-spezifischen Vergleich.
Ein weiteres praktisches Beispiel, bei dem Vektorpfade mehr zählen als Pixel.