SVG, PNG, WebP und JPG im Vergleich erklärt

Vier Formate, vier Philosophien: SVG, PNG, WebP und JPG lösen jeweils ein anderes Problem. Wer sie verwechselt, bekommt aufgeblähte Fotos, matschige Logos oder fehlende Transparenz. Dieser Vergleich stellt die vier Formate technisch gegenüber, von der grundlegenden Frage Vektor gegen Pixel bis zur konkreten Format-Wahl für Icons, Fotos und Web-Grafiken.

Vektor gegen Pixel: die grundlegende Trennlinie

Die wichtigste Unterscheidung verläuft nicht zwischen den vier Formaten gleichmäßig, sondern zwischen SVG und dem Rest. SVG ist das einzige Vektorformat: Es speichert eine Grafik als XML-Beschreibung geometrischer Formen, die bei jeder Anzeige neu berechnet werden. PNG, WebP und JPG sind dagegen Rasterformate, sie speichern ein festes Pixelgitter.

Diese Trennlinie hat weitreichende Folgen. Eine SVG bleibt bei jeder Größe scharf, von 16 Pixeln bis zur Plakatwand, und ist bei einfachen Grafiken winzig. Ein Rasterbild hat eine feste Auflösung und wird beim Vergrößern unscharf. Dafür kann ein Rasterformat Fotos mit Millionen feiner Farbverläufe abbilden, woran ein Vektorformat scheitert.

Transparenz: drei von vier können es

Transparenz entscheidet oft über die Format-Wahl. Ein Logo, das sich nahtlos in jeden Hintergrund einfügen soll, braucht einen Alphakanal. Den bieten SVG, PNG und WebP. JPG ist hier der Ausreißer: Es kennt keine Transparenz und füllt durchsichtige Bereiche immer mit einer Volltonfarbe.

Das ist der häufigste Stolperstein in der Praxis. Wer ein transparentes Logo als JPG speichert, bekommt einen weißen Kasten drumherum. Auf einer farbigen Website fällt dieser Kasten sofort störend auf. Soll Transparenz erhalten bleiben, scheidet JPG also grundsätzlich aus.

Sobald Transparenz im Spiel ist, fällt JPG aus dem Rennen. Übrig bleiben SVG für Vektoren, PNG für verlustfreie Pixel und WebP für die kleinste transparente Datei.

Dateigröße und Kompression

Die Kompression unterscheidet die vier Formate deutlich. PNG und SVG arbeiten verlustfrei: Keine Bildinformation geht verloren, Kanten und Text bleiben sauber. JPG arbeitet verlustbehaftet, es wirft gezielt Details weg, die das Auge kaum bemerkt, und erreicht so bei Fotos sehr kleine Dateien, allerdings mit sichtbaren Artefakten an harten Kanten. WebP beherrscht beide Modi, verlustfrei und verlustbehaftet, und komprimiert dabei meist kleiner als die älteren Formate.

Die folgenden Werte zeigen typische Dateigrößen für ein und dasselbe Foto mit 1200 Pixeln Breite. Sie machen deutlich, wie stark sich die Formate bei Fotoinhalten unterscheiden:

Diese Zahlen gelten für Fotos. Bei einem Logo mit wenigen Farbflächen dreht sich das Verhältnis: Dort liefert SVG oft unter 5 KB, PNG bleibt klein und verlustfrei, während JPG durch Kompressionsartefakte an den Kanten sogar schlechter aussieht.

Browser-Support und Kompatibilität

Beim Browser-Support gibt es kaum noch Unterschiede. SVG, PNG und JPG werden praktisch überall unterstützt, von jedem Browser und nahezu jedem Programm. WebP wird inzwischen ebenfalls von allen aktuellen Browsern dargestellt, kann aber in sehr alter Software oder bestimmten Office-Versionen fehlen.

Für das Web ist die Support-Frage also weitgehend entschärft. Kritischer wird es außerhalb des Browsers: Einige Office-Programme und ältere E-Mail-Clients verstehen weder SVG noch WebP zuverlässig. Wer auf maximale Kompatibilität setzt, etwa beim Versand an unbekannte Empfänger, fährt mit PNG oder JPG am sichersten. Genau hier kommt die Umwandlung ins Spiel: Eine SVG, die in einem Office-Dokument fehlt, wird als PNG zuverlässig angezeigt.

Kanten, Text und Artefakte im Detail

Ein Aspekt entscheidet in der Praxis oft mehr als die reine Dateigröße: wie sauber ein Format harte Kanten und Text wiedergibt. Hier zeigt sich der Graben zwischen verlustfreien und verlustbehafteten Verfahren am deutlichsten.

JPG wurde für Fotos entworfen und teilt ein Bild in Blöcke von acht mal acht Pixeln, die es einzeln komprimiert. Bei weichen Farbverläufen funktioniert das hervorragend. An scharfen Übergängen, etwa zwischen schwarzem Text und weißem Grund, entstehen aber sichtbare Schatten und Farbflecken, die sogenannten JPG-Artefakte. Ein Screenshot mit Text oder ein Logo mit klaren Konturen sieht als JPG deshalb schmutzig aus, selbst bei hoher Qualitätsstufe.

PNG und WebP im verlustfreien Modus kennen dieses Problem nicht. Sie speichern jeden Pixel exakt, Text bleibt rasiermesserscharf, Kanten sauber. SVG steht ohnehin außer Konkurrenz: Da es Formen statt Pixel speichert, gibt es schlicht keine Kantenartefakte, egal wie stark man hineinzoomt. Für alles mit Schrift, Linien oder Flächen gilt deshalb: Finger weg von JPG.

Sobald Text oder harte Kanten im Bild sind, scheidet JPG aus. Es wurde für weiche Fotos gebaut und macht aus scharfen Konturen Matsch. Nimm SVG, PNG oder verlustfreies WebP.

Wie die Formate zusammenspielen

In einem realen Projekt nutzt du selten nur ein Format, sondern lässt sie zusammenarbeiten. Das Vektororiginal ist die Quelle, aus der alle anderen Varianten entstehen. Aus einer einzigen SVG erzeugst du das scharfe Web-Icon, das transparente PNG für die Präsentation und das komprimierte WebP für die schnelle Ladezeit, ohne je Qualität zu verlieren, weil die Vektorquelle verlustfrei bleibt.

Genau hier liegt der praktische Wert der Umwandlung. Du verwaltest ein Original und produzierst daraus bedarfsgerecht die passenden Pixelformate. Verlierst du den Faden, welche Datei in welcher Größe wo gebraucht wird, hilft eine einfache Regel: Im Web so klein wie möglich (WebP oder optimiertes PNG), bei der Weitergabe so kompatibel wie nötig (PNG oder JPG), und als Master immer die SVG. So bleibt jede Ausgabe ersetzbar und nachproduzierbar.

Die vier Formate in der Übersicht

Der direkte Vergleich fasst alle Eigenschaften zusammen:

Eigenschaft	SVG	PNG	WebP	JPG
Typ	Vektor	Pixel	Pixel	Pixel
Skalierung	verlustfrei, jede Größe	feste Auflösung	feste Auflösung	feste Auflösung
Kompression	verlustfrei	verlustfrei	beides möglich	verlustbehaftet
Transparenz	ja	ja	ja	nein
Dateigröße Foto	ungeeignet	sehr groß	sehr klein	klein
Dateigröße Logo	winzig	klein	klein	mittel, mit Artefakten
Browser-Support	nahezu 100 %	nahezu 100 %	alle aktuellen	nahezu 100 %
Ideal für	Logos, Icons, Diagramme	Grafiken mit Transparenz	Web-Fotos optimiert	klassische Fotos

Welches Format wofür: die Entscheidungshilfe

Aus den technischen Unterschieden ergibt sich eine klare Zuordnung. Wer diese Logik kennt, wählt ohne Zögern das richtige Format:

• Logos und Icons: SVG. Verlustfrei skalierbar, winzig, bei jeder Größe scharf. Wenn SVG nicht unterstützt wird, wandelst du in PNG um, damit die Transparenz erhalten bleibt.
• Diagramme und technische Grafiken: SVG für die Bearbeitung, PNG als Lieferformat für Programme ohne SVG-Unterstützung.
• Fotos im Web: WebP, wenn Performance zählt und die Zielgruppe moderne Browser nutzt. JPG als universell kompatible Alternative.
• Fotos zur Weitergabe oder zum Druck: JPG. Klein genug, überall verständlich, für klassische Fotoinhalte gut geeignet.
• Grafiken mit Transparenz und harten Kanten: PNG. Verlustfrei, voller Alphakanal, überall darstellbar.

So setzt du den Vergleich praktisch um

Der rote Faden ist einfach: Vektor schlägt Pixel bei Formen, Pixel schlägt Vektor bei Fotos, und Transparenz schließt JPG aus. SVG ist dabei dein Arbeitsformat, aus dem du je nach Ziel das passende Pixelformat erzeugst. PNG ist der zuverlässige Allrounder, wenn Transparenz und Kompatibilität zusammenkommen müssen.

Wenn du eine SVG hast und ein universell einsetzbares Pixelbild brauchst, wandelst du sie auf svg-png.de in ein PNG um, kostenlos und direkt im Browser, ohne Upload und ohne Anmeldung. Die Transparenz bleibt erhalten, die Zielgröße wählst du selbst. So hast du am Ende beide Welten parat: die skalierbare SVG als Original und das überall lauffähige PNG für jeden Empfänger, jede Plattform und jedes Programm.