PNG vs. SVG: Was ist der Unterschied?
PNG und SVG sind beide gängige Bildformate im Web, speichern ein Bild aber auf grundlegend unterschiedliche Weise. Wenn Sie den Unterschied verstehen, fällt es leichter, das richtige Format für ein Logo, Icon, Foto oder eine Schneidedatei zu wählen.
Was ist eine PNG-Datei?
Eine PNG-Datei (Portable Network Graphics) ist ein Rasterbild: ein festes Raster aus farbigen Pixeln, ähnlich wie bei einem JPEG. Jedes Pixel speichert seinen eigenen Farbwert, und die Gesamtzahl der Pixel wird in dem Moment festgelegt, in dem die Datei erstellt wird. PNG unterstützt außerdem echte Alphatransparenz, weshalb es das Standardformat für Icons, Screenshots und Logos mit transparentem Hintergrund ist.
Da ein PNG nur ein Raster aus Pixeln ist, bedeutet eine Vergrößerung, dieselben Pixel über eine größere Fläche zu strecken — genau das führt zu Unschärfe oder sichtbaren „Blockartefakten", wenn man ein PNG über seine ursprünglichen Abmessungen hinaus skaliert.
Was ist eine SVG-Datei?
Eine SVG-Datei (Scalable Vector Graphics) beschreibt ein Bild als eine Reihe mathematischer Formen und Pfade — Linien, Kurven und Füllungen — statt als einzelne Pixel. Ein Kreis wird als „Kreis mit diesem Radius" gespeichert, nicht als Tausende einzelner farbiger Punkte.
Genau das macht SVGs unendlich skalierbar: Ein Browser oder ein Designprogramm zeichnet die Formen bei jeder benötigten Größe neu, sodass ein SVG-Logo auf einem Handy-Icon genauso scharf wirkt wie auf einer Plakatwand. SVGs sind außerdem reiner Text (XML) und lassen sich daher in jedem Texteditor oder Vektordesign-Tool bearbeiten.
PNG vs. SVG: Die wichtigsten Unterschiede
| PNG | SVG | |
|---|---|---|
| Zugrunde liegende Daten | Pixelraster | Mathematische Pfade & Formen |
| Skalierung | Qualitätsverlust über Originalgröße hinaus | Skalierbar auf jede Größe ohne Qualitätsverlust |
| Dateigröße | Größer bei einfachen Grafiken | Meist kleiner bei Logos/Icons |
| Bearbeitbarkeit | Nur Pixelbearbeitung (Photoshop usw.) | Formen direkt bearbeitbar (Illustrator, Inkscape) |
| Transparenz | Unterstützt (Alphakanal) | Unterstützt (Füllung/Deckkraft) |
| Am besten für | Fotografien, komplexe Texturen | Logos, Icons, Illustrationen, Schneidedateien |
Wann PNG und wann SVG verwenden
Als Faustregel gilt:
- Verwenden Sie SVG für Logos, Icons, Strichzeichnungen und alles, was in der Größe verändert oder geschnitten werden muss — einschließlich Dateien für Cricut-Projekte und Laserschneider.
- Verwenden Sie PNG für Fotografien und Bilder mit komplexen Verläufen oder Texturen, die sich nicht gut auf flächige Formen reduzieren lassen.
- Wenn Sie bereits ein PNG-Logo oder -Icon haben und ein SVG benötigen, müssen Sie es nicht von Hand neu zeichnen — Sie können es automatisch nachzeichnen lassen. Details dazu finden Sie unter wie Bild-Tracing funktioniert.
Häufig gestellte Fragen
Kann ich eine PNG-Datei einfach in .svg umbenennen?
Nein. Das Ändern der Dateiendung verändert nicht die zugrunde liegenden Daten — das Pixelraster eines PNGs muss in Vektorpfade nachgezeichnet werden, um wirklich zu einem SVG zu werden.
Ist SVG immer besser als PNG?
Nicht für jeden Anwendungsfall. SVG eignet sich besser für skalierbare Grafiken wie Logos und Icons, aber PNG (oder JPEG) bleibt die richtige Wahl für Fotografien, bei denen ein Vektor-Tracing realistische Details verlieren würde.
Unterstützen Browser SVG genauso wie PNG?
Ja. Jeder moderne Browser stellt SVG nativ dar, und es lässt sich überall einsetzen, wo auch ein <img>-Tag oder ein CSS-background-image funktioniert.
Verwandte Anleitungen
Ein tieferer Blick auf den Unterschied zwischen Raster und Vektor, über PNG und SVG hinaus.
Verwandeln Sie ein PNG-Design in ein schnittbereites SVG für Cricut Design Space.