PNG oder SVG: welches Format passt wann?
PNG oder SVG: Wie beide Formate funktionieren, Transparenz, Dateigröße, Skalierungsverhalten und die passenden Einsatzbereiche – samt Methoden zur Umwandlung zwischen PNG und SVG.
1. Der Kernunterschied: Pixelraster gegen mathematische Pfade
Ein PNG ist eine Bitmap: Es zerlegt das Bild in einzelne Pixel und speichert für jedes die Farbe. Ein PNG zu vergrößern heißt letztlich, Pixel zu dehnen – daher Treppenstufen und Unschärfe. Ein SVG ist eine Vektorgrafik: Es beschreibt Formen mit mathematischen Anweisungen wie Koordinaten und Bézier-Kurven, und der Browser zeichnet die Grafik in der neuen Größe neu, sodass sie bei jeder Skalierung scharf bleibt. Aus dieser einen Tatsache folgt praktisch jeder Unterschied zwischen den Formaten.
Bei der Transparenz unterstützt PNG einen Alphakanal und kann einen transparenten Hintergrund speichern. SVG ist von Natur aus transparent: Solange kein Hintergrundrechteck gezeichnet wird, bleibt alles außerhalb der Grafik durchsichtig. Randnotiz: JPG kennt keine Transparenz – der weiße Hintergrund ist dort eine tatsächlich gemalte Farbe.
2. Dateigröße und Ladeverhalten
Bei einfachen Grafiken wie Symbolen und Logos wiegt eine SVG-Datei oft nur wenige KB, und ein einziges File passt zu allen Bildschirmdichten. PNG braucht dagegen für scharfe Darstellung auf Retina-Displays meist @2x- und @3x-Versionen, was die Größe vervielfacht. Bei Fotos kehrt sich das Bild um: Sehr farbreiche Verläufe erzeugen bei der Vektorisierung eine Unmenge an Pfaden, sodass die SVG am Ende deutlich größer als JPG oder WEBP wird – ein Missverhältnis.
Der Grund liegt in der Kompression: PNG speichert Pixel verlustfrei, sodass komplexere Bilder größere Dateien ergeben. SVG ist reiner Text, in dem sich wiederkehrende Pfadbefehle und Koordinaten sehr gut komprimieren lassen. Deshalb verhalten sich zwei vermeintlich verlustfreie Formate so unterschiedlich.
| Einsatzbereich | Empfohlenes Format | Begründung |
|---|---|---|
| Website-Symbole / Logos | SVG | Ein File für alle Auflösungen, per CSS einfärbbar |
| Fotos | JPG / WEBP | Kleine Dateien bei fotografischer Qualität |
| Screenshots | PNG | Pixelgenau und verlustfrei komprimiert |
| Datendiagramme | SVG | Scharf skalierbar, programmierbar und interaktiv |
| Profilbilder in sozialen Netzwerken | PNG / JPG | Die meisten Plattformen akzeptieren nur Rasterbilder |
3. Wann PNG die richtige Wahl ist
- Fotos, komplexe Lichtsetzung und feine Verläufe;
- Screenshots und Oberflächenaufnahmen, die pixelgenau sein müssen;
- Situationen, in denen die Plattform nur Rasterbilder annimmt, etwa Avatar-Uploads in manchen Backoffice-Bereichen;
- Als Kompatibilitätsreserve, wenn sehr alte Umgebungen SVG nicht unterstützen.
4. Wann SVG die richtige Wahl ist
- Website-Symbole und Logos: ein File für alle Auflösungen, auf Retina-Displays weiterhin scharf;
- Grafiken, deren Farbe per CSS oder JavaScript geändert werden soll oder die eine Strichzeichnungs-Animation benötigen;
- Datendiagramme: Visualisierungs-Bibliotheken wie ECharts erzeugen standardmäßig SVG;
- Druck, Lasergravur und Schilderplotter, bei denen das Gerät Vektorpfade liest.
5. Lassen sich PNG und SVG gegenseitig umwandeln?
Ja. PNG in SVG: Nutzen Sie das PolySVG-Tool „PNG in SVG“ oder das Tool „Bild in SVG“, laden Sie die Datei hoch und klicken Sie auf Generieren, um zu vektorisieren – bei Symbolen und Logos gelingt das ausgezeichnet, Fotos erhalten einen illustrativen Stil. Die Umwandlung ist kostenlos, und bei transparenten PNG bleibt der transparente Hintergrund erhalten. Die erzeugte SVG lässt sich anschließend im Editor einfärben und von ihrem Hintergrund befreien, was den Arbeitsablauf abrundet. SVG in PNG: Öffnen Sie die Datei im Online-SVG-Editor und exportieren Sie ein PNG in beliebiger Auflösung – ideal für Dokumente oder Vorschaubilder.
Wichtig zu wissen: Die Umwandlung von PNG in SVG ist kein einfaches Speichern unter einem anderen Format, sondern eine Vektorisierung, die die Konturen neu zeichnet. Grafische Materialien ergeben saubere Pfade, Fotos werden zu Farbflächen verdichtet. Sehen Sie sich das Ergebnis zuerst im Tool an und vergewissern Sie sich, dass der Stil Ihren Erwartungen entspricht.
Entscheidung in einem Satz: Für Symbole, Logos und Diagramme SVG, für Fotos und Screenshots PNG/JPG/WEBP. Im Zweifel gilt bei grafischen Inhalten SVG. Wer mehr erfahren möchte, liest Was ist SVG und Drei Methoden, um ein Bild in SVG zu verwandeln.
Häufige Fragen
Sollten Website-Symbole PNG oder SVG sein?
Bevorzugt SVG: Ein File passt zu allen Bildschirmdichten, es ist klein und per CSS einfärbbar. PNG dient nur als Reserve, wenn eine Plattform SVG nicht unterstützt.
Bleibt ein transparentes PNG nach der Umwandlung in SVG transparent?
Ja. Mit dem PolySVG-Tool „PNG in SVG“ bleiben transparente Bereiche vollständig erhalten, es wird kein Weiß hinzugefügt.
Eignen sich Fotos für eine Umwandlung in SVG?
Nicht, wenn eine fotografische Wiedergabe das Ziel ist. Die Vektorisierung verdichtet ein Foto zu Farbflächen und erzeugt einen illustrativen Stil; für Fotos bleiben JPG und WEBP die bessere Wahl.