Übersicht
PNG ist das traditionelle Format für Grafiken, die Transparenz benötigen. WebP ist die moderne Alternative mit besserer Kompression. SVG ist ein Vektorformat, das ohne Qualitätsverlust auf jede Größe skaliert.
Für Logos und Icons ist SVG fast immer die richtige Wahl. Für komplexe Rastergrafiken sind PNG und WebP besser.
Direkter Vergleich
Skalierbarkeit
PNG: PNG ist Raster - das Hochskalieren führt zu Pixelbildung. Sie benötigen separate Dateien für jede Auflösung.
WebP: WebP ist ebenfalls Raster - dieselbe Skalierungsbeschränkung wie PNG.
Winner: SVG (unendliche Skalierung, kein Qualitätsverlust)
Dateigröße
PNG: PNG ist verlustfrei und größer. Ein komplexes Logo könnte 50-200KB groß sein.
WebP: WebP-verlustfrei ist 25-35% kleiner als PNG. Dasselbe Logo könnte 35-150KB groß sein.
Winner: SVG (oft nur 1-20KB)
Transparenz
PNG: PNG unterstützt vollständig die Alpha-Kanal-Transparenz.
WebP: WebP unterstützt vollständig die Alpha-Kanal-Transparenz mit besserer Kompression als PNG.
Winner: SVG / WebP
Animation
PNG: PNG unterstützt das animierte APNG-Format mit vollständiger Transparenz.
WebP: WebP unterstützt Animationen mit kleineren Dateigrößen als animierte GIF oder APNG.
Winner: SVG (CSS/JS-Animationen)
Browserunterstützung
PNG: PNG wird in 100% der Browser und Geräte unterstützt.
WebP: WebP wird in über 97% der Browser unterstützt.
Winner: PNG
Zwei Rasterformate und ein Vektorformat
PNG und WebP sind beide Rasterformate, die ein Pixelraster speichern, während SVG ein Vektorformat ist, das Formen mathematisch beschreibt.
PNG komprimiert verlustfrei mit DEFLATE und Vorhersagefiltern und unterstützt einen vollständigen Alphakanal.[1][2]WebP nutzt VP8-basierte Vorhersage mit sowohl verlustbehafteten als auch verlustfreien Modi plus Transparenz und liefert im Allgemeinen kleinere Dateien als PNG für dasselbe Bild.[3][4]SVG speichert XML-Zeichenanweisungen statt Pixeln, daher hat es keine feste Auflösung.[5]
Auflösung und Skalierung
SVG skaliert auf jede Größe mit perfekter Schärfe, da Formen zur Renderzeit neu berechnet werden, was es ideal für Logos und Icons macht, aber es kann fotografische Details nicht effizient darstellen.[6]PNG und WebP haben feste Pixelabmessungen und verschlechtern sich, wenn sie über diese hinaus vergrößert werden. Die Wahl zwischen den beiden Rasterformaten und SVG hängt daher zunächst davon ab, ob die Grafik ein skalierbares Bild oder ein Bild mit fester Auflösung ist.
Dateigröße und Komprimierung
Für pixelbasierte Grafiken schlägt WebPs moderne Codierung PNG bei der Dateigröße im Allgemeinen, während Transparenz erhalten bleibt, wohingegen PNG exakte verlustfreie Pixel und die breiteste Kompatibilität garantiert.[4][2]Die Größe einer SVG hängt von der Anzahl der Formen ab, nicht von den Anzeigeabmessungen, daher bleibt ein einfaches Icon bei jeder Größe klein; eine komplexe Illustration mit Tausenden von Pfaden kann jedoch die Größe eines gleichwertigen Rasterbildes überschreiten.[5]
Bearbeitbarkeit und Standardisierung
Da SVG textbasiert in XML ist, kann es in einem Code-Editor bearbeitet, mit CSS gestaltet, animiert und durchsucht werden; PNG und WebP sind undurchsichtige Pixel-Arrays, die nur als Bilder bearbeitbar sind.[5]PNG ist durch die W3C und IETF (RFC 2083) und ISO/IEC 15948 definiert; WebP durch IETF RFC 9649; SVG durch die W3C.[1][2][3]Alle drei werden von aktuellen großen Browsern unterstützt.
Applications
SVG wird für auflösungsunabhängige Grafiken, Logos, Diagramme und Icons verwendet und kann mit CSS gestaltet und animiert werden.[5]WebP wird für die Web-Bereitstellung fotografischer oder detaillierter Rasterbilder verwendet, die kleine Dateien benötigen. PNG wird verwendet, wenn garantierte verlustfreie Wiedergabe, Transparenz und universelle Unterstützung Vorrang vor der Dateigröße haben.[1]
Konvertieren zwischen PNG, WebP und SVG
Konvertieren Sie Bildformate kostenlos - läuft vollständig in Ihrem Browser, keine Uploads erforderlich.
Konvertieren Sie Bilder kostenlosQuellen
Häufig gestellte Fragen
Sollte ich SVG oder PNG für mein Logo verwenden?
Verwenden Sie SVG. Es skaliert auf jede Größe ohne Qualitätsverlust, ist kleiner und kann mit CSS gestaltet werden.
Kann ich PNG in SVG konvertieren?
Einfache Logos lassen sich gut in SVG nachzeichnen. Komplexe fotografische Bilder können nicht sinnvoll in SVG konvertiert werden.
Ist WebP besser als PNG für Logos?
WebP-verlustfrei ist 25-35% kleiner als PNG. Für Logos ist SVG besser als beide, wenn eine Vektordatei vorhanden ist.
Warum verwenden einige Seiten immer noch PNG anstelle von SVG?
SVG benötigt eine Vektordatei. Wenn ein Logo nur als Raster-PNG existiert, führt die Konvertierung in SVG zu schlechten Ergebnissen.
Unterstützt SVG Farbverläufe und Schatten?
Ja - SVG unterstützt Farbverläufe, Schatten, Filter, Masken und viele andere visuelle Effekte.