SVG vs. PNG für Webgrafiken: Wann man die einzelnen Formate verwenden sollte

SVG und PNG dienen grundsätzlich unterschiedlichen Zwecken, sie überschneiden sich jedoch so stark, dass es zu Verwirrung kommt. Man speichert mathematische Formen. Der andere speichert Pixel. Die Wahl des Falschen kostet Sie entweder Qualität oder Leistung – manchmal sogar beides.

SVG (Scalable Vector Graphics) ist ein auf XML basierendes Vektorformat. Anstatt Pixeldaten zu speichern, beschreibt es Formen, Pfade und Text mithilfe mathematischer Koordinaten. Eine SVG-Datei ist im Wesentlichen Code – Sie können sie in einem Texteditor öffnen und die Anweisungen lesen, die dem Browser sagen, wie das Bild gezeichnet werden soll.

SVGs können mit CSS gestaltet und mit JavaScript bearbeitet werden. Sie können die Farben beim Schweben ändern, einzelne Elemente animieren und SVGs durch Anpassen der viewBox-Attribute reaktionsfähig machen. Für einfache Grafiken wie Logos und Symbole wiegen SVGs normalerweise 1–5 KB.

PNG (Portable Network Graphics) ist ein Rasterformat, das Bilder als Raster aus farbigen Pixeln speichert. Es verwendet eine verlustfreie Komprimierung, sodass die Qualität mit dem Original identisch ist – keine Komprimierungsartefakte wie bei JPEG. PNG unterstützt volle Transparenz (Alphakanal) und ist daher ein Favorit für Bilder, die einen transparenten Hintergrund benötigen.

PNG zeichnet sich durch die Wiedergabe komplexer Bilder aus: Screenshots, Fotos mit Transparenz, detaillierten Texturen und sanften Verläufen. Da jedoch jedes Pixel gespeichert wird, können PNG-Dateien groß sein. Ein 4K-Screenshot als PNG kann leicht 5 MB überschreiten.

Für ein typisches Firmenlogo könnte die SVG-Version 2–5 KB wiegen. Das gleiche Logo, das als PNG mit 2-facher Auflösung für Retina-Displays exportiert wird, könnte leicht 30–80 KB groß sein. Das ist ein 10-15-facher Unterschied.

Multiplizieren Sie dies mit allen Symbolen, Logos und UI-Elementen auf einer Seite, und SVG liefert eine deutlich geringere Nutzlast. Beim Testen auf einer E-Commerce-Website mit mehr als 60 Symbolen reduzierte der Wechsel von PNG zu SVG die symbolbezogene Bandbreite um 87 %.

Dieser Vorteil kehrt sich jedoch bei komplexen Grafiken um. Eine SVG-Illustration mit Tausenden von Ankerpunkten und detaillierten Pfaden kann tatsächlich die Dateigröße eines gut komprimierten PNG überschreiten. Wenn Ihr Designer eine Illustration mit Hunderten einzelner Elemente erstellt hat, überprüfen Sie beide Formate und vergleichen Sie sie.

Dies ist der SVG-definierende Vorteil. Ein SVG sieht pixelgenau aus, egal ob es mit 32 Pixel oder 3200 Pixel Breite angezeigt wird. Es gibt kein Auflösungskonzept – der Browser zeichnet die Vektorpfade in der benötigten Größe neu.

Dies ist auf Bildschirmen wichtig, die von Desktop-Monitoren mit 72 DPI bis hin zu Telefonen mit mehr als 460 DPI reichen. Eine SVG-Datei deckt jedes Gerät ab. Bei einem PNG ist dies nicht der Fall.

PNG hat ein festes Pixelraster. Zeigen Sie ein 200 x 200 PNG mit 400 x 400 Pixeln an (was auf Retina-Displays der Fall ist), und der Browser interpoliert, wodurch das Bild weich oder verschwommen aussieht. Die Problemumgehung besteht darin, PNGs mit 2-facher oder 3-facher Auflösung zu exportieren, aber dadurch erhöht sich die Dateigröße proportional – ein 3-facher Symbolsatz kann 9-mal größer sein.

PNG ist immer dann die richtige Wahl, wenn das Bild fotografisch oder fotografisch komplex ist. Screenshots, Produktfotos mit Transparenz, komplexe Texturen, Bilder mit Tausenden von Farben und subtilen Verläufen – all das gehört in Rasterformate.

PNG überzeugt auch bei Pixel-Art und Bildern, bei denen jedes Pixel in einer bestimmten Größe wichtig ist. Spiel-Sprites, Favicon-Details im Format 16x16 und Bilder, bei denen das Anti-Aliasing-Verhalten eine präzise Steuerung erfordert, eignen sich besser als PNGs.

SVG ist der klare Gewinner für Logos, Symbole, Illustrationen, Infografiken, Karten, Diagramme und UI-Elemente – alles, was aus klaren Formen, Linien und Volltonfarben besteht. Wenn die Grafik in Figma oder Illustrator erstellt wurde, bleibt beim Export als SVG die Quellqualität perfekt erhalten.

SVG zeichnet sich auch durch responsives Design aus. Mithilfe von CSS-Medienabfragen innerhalb der SVG-Datei selbst können Sie eine SVG-Illustration erstellen, die Elemente an verschiedenen Haltepunkten umfließt oder ausblendet. Symbole in SVG können ihre Farbe je nach Thema ändern (dunkler Modus/heller Modus), ohne separate Bilddateien bereitzustellen.

SVGs können tatsächliche Textelemente enthalten, die von Suchmaschinen indiziert werden können. Wenn Ihre Infografik Schlagzeilen und Beschriftungen als SVG-Text enthält, kann Google diese lesen. Dies ist ein bedeutender SEO-Vorteil gegenüber PNG, wo der gesamte Text in das Pixelraster integriert und für Crawler unsichtbar ist.

Für Bildschirmleseprogramme Inline-SVGs mit korrektem role und aria-label Attribute bieten eine bessere Zugänglichkeit als Rasterbilder. PNG-Bilder hängen vollständig von der Datei ab alt Attribut für Barrierefreiheit.

Müssen Sie zwischen den Formaten wechseln? Du kannst Konvertieren Sie SVG in PNG wenn Sie eine Rasterversion zum Teilen in sozialen Medien, E-Mail-Clients, die kein SVG rendern, oder Plattformen benötigen, die nur Rasterbilder akzeptieren.

In die andere Richtung gehen, das ist möglich Konvertieren Sie PNG in SVG für Bilder, die von der Vektorskalierbarkeit profitieren würden. Die Konvertierung funktioniert am besten bei einfachen Grafiken mit sauberen Kanten und begrenzten Farben. Detaillierte Fotos lassen sich nicht gut in SVG konvertieren.

Für schnelle Formatwechsel ohne Installation von Software, iformat.io wickelt beide Konvertierungen direkt in Ihrem Browser ab. Hochladen, Konvertieren und Herunterladen in weniger als 10 Sekunden.

Verwenden Sie SVG für Logos, Symbole, Illustrationen und alles mit klaren Formen – es lässt sich perfekt skalieren und hält die Dateien klein (typischerweise 1–5 KB). Verwenden Sie PNG für Screenshots, Fotos mit Transparenz und pixelgenaue Grafiken. Bei den meisten Webprojekten verringert die Konvertierung Ihres Symbolsatzes von PNG in SVG die Seitengröße und verbessert die Darstellung auf Bildschirmen mit hoher DPI. Testen Sie im Zweifelsfall beide Formate – der Vergleich der Dateigröße dauert 30 Sekunden und die richtige Wahl ist normalerweise offensichtlich.