SVG vs PNG vs JPG: Ein praktischer Formatvergleich
Drei Formate decken nahezu jeden Bedarf an digitalen Bildern ab. Es gibt kein einzelnes \"bestes\" Format — die richtige Wahl hängt von Ihrem Inhalt und Kontext ab.
Jetzt konvertierenEinführung
Wenn Sie mit Bildern im Web arbeiten, haben Sie mit ziemlicher Sicherheit schon SVG-, PNG- und JPG-Dateien jongliert. Diese drei Formate dominieren die digitale Bildwelt, wurden aber jeweils für grundlegend unterschiedliche Zwecke entwickelt. SVG speichert mathematische Anweisungen zum Zeichnen von Formen, PNG bewahrt jeden Pixel mit verlustfreier Komprimierung, und JPG tauscht feine Details gegen deutlich kleinere Fotodateien ein.
Die Wahl des falschen Formats führt zu unscharfen Logos, langsamen Seitenladezeiten oder ausgewaschenen Fotografien. Die richtige Wahl hält Ihre Website schnell, Ihre Grafiken scharf und Ihren Workflow einfach. Dieser Leitfaden vergleicht alle drei Formate nebeneinander, damit Sie für jedes Bild auf Ihrer Website eine fundierte Entscheidung treffen können — sei es ein Firmenlogo, ein Produkt-Screenshot oder ein Hero-Foto.
Für einen tieferen Einblick in die zugrunde liegende Technologie lesen Sie unseren Erklärer zu Raster vs. Vektor, der erläutert, warum der Unterschied zwischen Pixeln und Mathematik so entscheidend ist.
Formatübersicht
SVG — Scalable Vector Graphics
SVG ist ein XML-basiertes Vektorformat. Statt Pixeln enthält es mathematische Beschreibungen von Linien, Kurven und Formen. Das bedeutet, dass ein SVG auf jede beliebige Größe skaliert werden kann — vom 16-px-Favicon bis zum 10-Meter-Banner — ohne jeglichen Qualitätsverlust. SVG-Dateien sind Klartext und können daher in einem Code-Editor bearbeitet, mit CSS gestaltet, mit JavaScript animiert und mit Git versioniert werden. Mehr erfahren Sie in Was ist SVG?
PNG — Portable Network Graphics
PNG ist ein Rasterformat mit verlustfreier Komprimierung. Jeder Pixel des Originalbilds bleibt exakt erhalten, was PNG ideal für Screenshots, UI-Mockups und jedes Bild macht, das Transparenz über einen Alphakanal erfordert. Der Nachteil ist die Dateigröße: Verlustfreie Komprimierung kann bei komplexen Fotografien nicht mit verlustbehafteten Formaten mithalten.
JPG (JPEG) — Joint Photographic Experts Group
JPG ist ein Rasterformat, das für Fotografien entwickelt wurde. Seine verlustbehaftete Komprimierung analysiert Pixelblöcke und verwirft Details, die das menschliche Auge wahrscheinlich nicht bemerkt — die entstehenden Dateien sind oft 5 bis 10 Mal kleiner als ein vergleichbares PNG. JPG unterstützt keine Transparenz, und wiederholtes Bearbeiten und Speichern führt zu sichtbaren Artefakten — aber für den einmaligen Export fotografischer Inhalte ist das Verhältnis von Größe zu Qualität unschlagbar.
Vergleich im Überblick
Die folgende Tabelle vergleicht SVG, PNG und JPG anhand der Merkmale, die bei der Formatwahl am wichtigsten sind.
| Merkmal | SVG | PNG | JPG |
|---|---|---|---|
| Typ | Vektor (XML) | Raster | Raster |
| Skalierbarkeit | Unbegrenzt — kein Qualitätsverlust | Feste Auflösung; wird beim Vergrößern unscharf | Feste Auflösung; wird beim Vergrößern unscharf |
| Dateigröße (einfache Grafik) | Sehr klein (oft < 5 KB) | Klein bis mittel | Klein (aber verlustbehaftete Artefakte entstehen) |
| Dateigröße (Foto) | Unpraktisch groß | Groß (verlustfrei) | Klein (verlustbehaftete Komprimierung) |
| Transparenz | Ja (nativ) | Ja (Alphakanal) | Nein |
| Animation | Ja (CSS / SMIL / JS) | Nein (APNG ist eine separate Spezifikation) | Nein |
| Komprimierung | Text / gzip | Verlustfrei (DEFLATE) | Verlustbehaftet (DCT-basiert) |
| Bearbeitbarkeit | Vollständig — XML bearbeiten, mit CSS gestalten | Nur auf Pixelebene | Nur auf Pixelebene |
| Browser-Unterstützung | Alle modernen Browser | Universal | Universal |
| Bester Anwendungsfall | Logos, Icons, UI, Diagramme | Screenshots, transparente Overlays | Fotografien, komplexe Bilder |
Für einen detaillierten Vergleich zweier Formate lesen Sie unseren ausführlichen SVG-vs-PNG-Vergleich.
Wann welches Format verwenden
Selbst mit der Vergleichstabelle in der Hand beinhalten reale Entscheidungen Kompromisse. Der folgende Leitfaden ordnet gängige Bildaufgaben dem empfohlenen Format zu.
Wählen Sie SVG, wenn …
- Das Bild ein Logo, Icon oder Markenzeichen ist, das in jeder Größe scharf aussehen muss.
- Sie CSS-Theming benötigen — z. B. Farben von Icons für den Dunkelmodus umschalten.
- Die Grafik ein Diagramm, Schema oder eine Infografik ist, die aus Daten generiert wird.
- Sie einzelne Elemente animieren möchten (Hover-Effekte, Ladeanimationen).
Wählen Sie PNG, wenn …
- Das Bild einen Alphakanal erfordert (Transparenz oder Halbtransparenz).
- Sie einen Screenshot oder UI-Mockup exportieren, bei dem jeder Pixel zählt.
- Die Grafik Text über einem komplexen Hintergrund enthält und Sie scharfe Kanten ohne JPG-Artefakte benötigen.
Wählen Sie JPG, wenn …
- Das Bild ein Foto oder eine realistische Szene mit Millionen von Farben ist.
- Die Dateigröße entscheidend ist — JPG-Komprimierung ist deutlich aggressiver als PNG.
- Transparenz nicht erforderlich ist.
| Aufgabe | Empfohlenes Format |
|---|---|
| Website-Logo | SVG |
| App-Icon-Set | SVG |
| Hero-Fotografie | JPG |
| Produkt-Screenshot | PNG |
| Transparentes Overlay | PNG |
| Animierte Illustration | SVG |
| Social-Media-Foto | JPG |
| Datengesteuertes Diagramm | SVG |
Wenn Ihr Bild in die SVG-Spalte fällt, Sie aber nur eine JPG- oder PNG-Quelle haben, können Sie mit Any2SVG in SVG konvertieren — der browserbasierte Tracer funktioniert am besten bei sauberen, kontrastreichen Grafiken wie Logos und Strichzeichnungen.
Konvertierung zwischen Formaten
Das Verständnis der Konvertierungsprozesse hilft, realistische Erwartungen zu setzen.
JPG / PNG → SVG (Nachzeichnung)
Die Konvertierung eines Rasterbilds in SVG bedeutet Nachzeichnung — ein Algorithmus analysiert die Pixel und erzeugt Vektorpfade, die die ursprünglichen Formen annähern. Da es sich um eine Annäherung handelt, funktioniert die Nachzeichnung am besten bei Bildern mit klaren Kanten und wenigen Farben: Logos, Icons, Strichzeichnungen und einfache Illustrationen. Fotografien und Bilder mit komplexen Verläufen erzeugen aufgeblähte SVGs mit Tausenden von Pfaden, die selten dem Original treu bleiben.
SVG → PNG / JPG (Rasterisierung)
Die umgekehrte Richtung ist unkompliziert. Die Rasterisierung rendert die Vektoranweisungen in einer bestimmten Auflösung auf ein Pixelraster. Jeder Browser macht dies beim Anzeigen eines SVG automatisch, und Design-Tools wie Figma und Inkscape ermöglichen den Export in jeder gewünschten Größe. Das Ergebnis ist pixelgenau bei der exportierten Auflösung, verliert aber die Skalierbarkeit und Bearbeitbarkeit des Original-Vektors.
Eine geführte Anleitung zur häufigsten Konvertierung finden Sie in unserem PNG-zu-SVG-Tutorial.
Fazit
SVG, PNG und JPG sind keine Konkurrenten — sie sind komplementäre Werkzeuge. SVG ist unschlagbar für alles, was skaliert, thematisiert oder winzig gehalten werden muss: Logos, Icons, UI-Elemente und Datendiagramme. PNG ist die zuverlässige Wahl, wenn Sie Transparenz oder verlustfreie Pixeltreue benötigen. JPG bleibt der Champion für Fotografien und alle Bilder, bei denen die Dateigröße wichtiger ist als pixelgenaue Kanten.
Wenden Sie die einfache Regel an: Vektorgrafik → SVG, transparentes Bild → PNG, Foto → JPG. Wenn Sie zwischen Formaten wechseln müssen — insbesondere von Raster zu Vektor — erledigt Any2SVG die Arbeit direkt in Ihrem Browser, ohne Server-Upload und ohne Registrierung.