Ein SVG ist ein Vektor: Es beschreibt eine Grafik mit Mathematik statt mit Pixeln und skaliert daher verlustfrei auf jede Größe. Ein PNG ist ein Raster: ein festes Gitter aus Pixeln. SVG in PNG umzuwandeln — „Rastern” genannt — bedeutet, diese unendlich skalierbaren Pfade in eine bestimmte Anzahl Pixel zu überführen. Die wichtigste Entscheidung dabei ist, in welcher Größe gerendert wird, denn das entscheidet, ob dein PNG scharf oder unscharf aussieht.
Wir haben das selbst gemessen. Unser Testdiagramm besteht aus 574 Byte SVG-Text. Mit 512 px Breite gerastert wird daraus 17,9 KB als PNG, 13,2 KB als JPG und 6,6 KB als WebP — rund das 12- bis 32-Fache des Originals, und nicht mehr skalierbar. Rastere, weil ein Programm SVG ablehnt, nicht um Platz zu sparen. alle Messwerte ansehen
Warum du eine Größe wählen musst
Ein Foto hat eine natürliche Auflösung, ein SVG nicht. Beim Export nach PNG muss irgendetwas die Pixelmaße festlegen. Nutzt ein Tool einfach die eingebauten width/height-Werte des SVG — bei Icons oft winzig, etwa 24×24 —, bekommst du ein kleines, weiches PNG. Wähle von vornherein eine größere Ausgabebreite, und derselbe Vektor rendert gestochen scharf bei 512, 1024 oder 2048 Pixel. Genau das steckt hinter Suchanfragen wie „svg to png in hoher Qualität”.
Die gewählte Größe ist daher eine Größenentscheidung, kein Detail. Unser Diagramm sind 574 B Vektoranweisungen, die in jeder Dimension rendern; im Moment des Exports ist die Datei auf ein Pixelraster festgelegt und kostet als PNG 17.9 KB. Exportiere in der größten Größe, die du wirklich anzeigst, für hochauflösende Displays in 2× — und nicht darüber hinaus. Jedes zusätzliche Pixel wird bei jedem Seitenaufruf bezahlt.
Welche Auflösung passt
| Anwendung | Empfohlene Breite |
|---|---|
| Favicon, kleines UI-Icon | 256–512 px |
| Blogbild, App-Asset | 1024 px |
| Druck, großes Banner, große Grafik | 2048 px oder mehr |
Größer ist schärfer, ergibt aber eine größere Datei. Im Zweifel in doppelter Anzeigegröße rendern — Displays mit hoher Pixeldichte (Retina, die meisten Smartphones) belohnen die Extra-Details.
Was die Größenwahl kostet, gemessen: Unser Testdiagramm ist 574 B SVG-Text. Bei der Standardbreite von 512 px gerastert wird es 17.9 KB als PNG (+3087%), 13.2 KB als JPG (+2262%) und 6.6 KB als WebP (+1082%). Das SVG ist um zwei Größenordnungen kleiner als alle drei, weil es Anweisungen statt Pixel speichert — und sobald du rasterst, wächst die Datei mit dem Quadrat der gewählten Breite.
PNG, JPG oder WebP?
- SVG in PNG umwandeln — verlustfrei und mit Transparenz. Ideal für Logos, Icons und alles mit durchsichtigem Hintergrund.
- SVG in JPG umwandeln — kleinere Datei, aber keine Transparenz (leere Bereiche werden weiß). Gut für eine flache Illustration auf einfarbigem Hintergrund.
- SVG in WebP umwandeln — modernes Format, klein und mit Transparenz, ideal für Websites.
Hat dein SVG einen transparenten Hintergrund und du wandelst in JPG um, wird diese Transparenz weiß gefüllt — für den Erhalt also PNG oder WebP wählen.
Die Reihenfolge oben ist die Antwort dieses Abschnitts: Bei gleichen 512 px schlug WebP (6.6 KB) das JPG (13.2 KB), und JPG das PNG (17.9 KB). WebP behält zusätzlich die Transparenz, JPG nicht — sofern das Ziel WebP nicht wirklich verweigert, ist die Wahl bereits getroffen.
Die Formatwahl nach dem Rastern ist meist der Ort der Überraschung — hier also dasselbe 574 B große Diagramm aus unserem Testkorpus durch alle drei Konverter:
| Konvertierung | SVG ein | Ergebnis | Änderung |
|---|---|---|---|
| SVG → PNG | 574 B | 17.9 KB | +3087% |
| SVG → JPG | 574 B | 13.2 KB | +2262% |
| SVG → WebP | 574 B | 6.6 KB | +1082% |
Jedes davon ist weit größer als der Vektor, aus dem es kam — PNG 17.9 KB, JPG 13.2 KB, WebP 6.6 KB — denn das SVG speicherte eine Handvoll Formanweisungen, und das Raster speichert jedes Pixel, das diese Anweisungen zufällig bedeckten. Das ist der echte Preis des Rasterns und der Grund, das SVG zu behalten.
Privat, direkt im Browser
Unsere Konverter rastern komplett auf deinem Gerät — das SVG wird nie hochgeladen:
- Eine oder mehrere SVG-Dateien hineinziehen.
- Ausgabebreite wählen; die Höhe folgt automatisch dem Seitenverhältnis.
- Ergebnis herunterladen oder mehrere als ZIP bündeln.
Der umgekehrte Weg
Andersherum — ein Logo-PNG zurück in einen skalierbaren Vektor zu verwandeln — ist ein anderer Vorgang namens Nachzeichnen. Falls du das brauchst, siehe wie man PNG in SVG umwandelt: Dort steht, wann Vektorisieren gut funktioniert und wann nicht.
Text und dünne Linien scharf halten
Zwei Dinge ruinieren ein gerastertes SVG unbemerkt. Erstens Schriften: Verweist dein SVG auf eine Schrift, die der Renderer nicht hat, wird der Text still durch eine Ersatzschrift getauscht und das Layout verrutscht. Wandelst du den Text im Quell-SVG vor dem Rastern in Umrisse (Pfade) um, sehen die Buchstaben überall identisch aus. Zweitens haarfeine Striche: Ein 1px-Strich bei 24×24 wird bei 512 zu rund 21px und bleibt scharf — renderst du aber kleiner als die Anzeigegröße, muss der Browser eine Bitmap hochskalieren, und genau diese Unschärfe schiebt man dann dem Format in die Schuhe.
Kurz zum Thema DPI
Ein PNG speichert Pixel, keine Zoll, daher ist „DPI” am Bildschirm belanglos — ein 1024px-Bild ist 1024px, ob ein Tag 72 oder 300 sagt. Wichtig wird es nur beim Druck: physische Größe × Ziel-DPI = Pixel. Eine 4 Zoll breit gedruckte Grafik bei 300 DPI braucht 1200px, bei 150 DPI 600px. Rechne für den Druck also von der Endgröße zurück und exportiere mindestens so viele Pixel.
Häufige Fehler
- Das Tool die winzige eingebaute SVG-Größe nutzen lassen. Ein 24×24-Icon wird zu einem 24×24-PNG. Lege die Ausgabebreite immer selbst fest.
- Ein kleines PNG hochskalieren, statt das SVG neu zu rendern. Eine Bitmap zu vergrößern bringt Unschärfe; das Neurastern des Vektors in Zielgröße bleibt scharf.
- Ein transparentes SVG in JPG umwandeln. Die Transparenz wird weiß gefüllt. Zum Erhalt SVG in PNG oder WebP nutzen.
FAQ
Warum hat mein exportiertes PNG einen weißen Hintergrund? Entweder hat das SVG selbst ein Hintergrundrechteck, oder du hast in ein Format ohne Transparenz exportiert. Ein echt transparenter Export braucht PNG oder WebP.
Mein PNG ist riesig — wie verkleinere ich es? Rendere nur so groß wie nötig und schick es dann durch eine Bildkomprimierung, um die Dateigröße ohne sichtbaren Qualitätsverlust zu senken.
Zum grundsätzlichen Vergleich der Formate stellt das beste Bildformat fürs Web PNG, JPG und WebP nebeneinander; brauchst du gezielt Icons, siehe wie man ein Favicon erstellt.