SVG in hoher Auflösung als PNG exportieren

Die SVG sieht im Browser perfekt aus, das exportierte PNG wirkt auf dem Plakat aber matschig. Der Grund liegt fast immer an einer falsch gewählten Zielauflösung. Beim Rastern entscheidet allein die Pixelzahl darüber, wie scharf das Ergebnis wird, und die musst du bewusst festlegen. Dieser Ratgeber zeigt, wie du Skalierungsfaktor, Pixelmaße und DPI richtig wählst, damit dein PNG sowohl für Web als auch für Druck gestochen scharf wird.

Der Skalierungsfaktor als Hebel

Jede SVG hat eine Grundgröße, definiert über die Attribute width, height oder die viewBox. Diese Grundgröße ist der Ausgangspunkt für den Export. Der Skalierungsfaktor multipliziert sie einfach: Faktor 1x liefert das PNG in Grundgröße, 2x in doppelter Kantenlänge, 4x in vierfacher.

Wichtig ist das Verständnis, was dabei mit den Pixeln passiert. Bei Faktor 2x verdoppeln sich Breite und Höhe, die Fläche und damit die Pixelzahl vervierfacht sich also. Aus 256 mal 256 Pixeln (65.536 Pixel) werden bei 2x 512 mal 512 Pixel (262.144 Pixel). Genau deshalb wächst die Dateigröße mit hohen Faktoren so deutlich.

Grundgröße der SVG: 256 x 256 px
Faktor 1x  ->  256 x 256 px
Faktor 2x  ->  512 x 512 px
Faktor 3x  ->  768 x 768 px
Faktor 4x  -> 1024 x 1024 px

Da SVG verlustfrei skaliert, gewinnst du mit jedem höheren Faktor echte Detailschärfe, keine interpolierten Pixel. Das unterscheidet den Export grundlegend vom nachträglichen Vergrößern eines fertigen PNG, bei dem das Programm nur raten kann.

Zielgröße in Pixeln festlegen

Letztlich zählt nicht der Faktor, sondern die absolute Zielgröße in Pixeln. Der Faktor ist nur ein bequemer Weg dorthin. Die zentrale Frage lautet immer: Wie viele Pixel breit soll das PNG sein?

Für das Web orientierst du dich an der Anzeigegröße im Layout, multipliziert mit der Pixeldichte des Bildschirms. Moderne Smartphones und Notebooks haben oft eine Pixeldichte von 2 oder 3 (Retina). Ein Icon, das im Layout 64 Pixel breit erscheint, sollte daher mindestens 128 Pixel breit exportiert werden, damit es auf Retina-Displays scharf bleibt.

Die folgende Tabelle übersetzt Skalierungsfaktoren in konkrete Pixelmaße und nennt für jeden einen typischen Einsatzzweck. Grundlage ist eine SVG mit 256 Pixeln Grundbreite:

Faktor	Pixelmaße	Pixel gesamt	Typischer Einsatz
1x	256 x 256	65.536	kleines Web-Icon, Favicon-Basis
2x	512 x 512	262.144	Retina-Icon, App-Symbol
3x	768 x 768	589.824	großes Web-Logo, Social-Media-Post
4x	1024 x 1024	1.048.576	Druck klein, Präsentation
8x	2048 x 2048	4.194.304	Druck groß, Banner

DPI verstehen: nur für den Druck relevant

DPI (Dots per Inch) verwirrt viele, weil der Wert am Bildschirm gar keine Rolle spielt. Ein Monitor zeigt jeden Pixel einfach als Punkt an, egal welcher DPI-Wert in der Datei steht. Erst beim Druck wird DPI wichtig: Es legt fest, wie dicht die Pixel auf dem Papier liegen und damit, wie groß das Bild physisch wird.

Die Umrechnung von Druckgröße zu Pixeln folgt einer einfachen Formel:

Pixel = Druckbreite in cm / 2,54 * DPI

Ein Beispiel: Du willst ein Logo 5 Zentimeter breit mit 300 DPI drucken. Die Rechnung lautet 5 geteilt durch 2,54 mal 300, das ergibt rund 590 Pixel Breite. Für ein randloses A4-Bild (21 Zentimeter breit) bei 300 DPI brauchst du rund 2480 Pixel. Den passenden Faktor bekommst du, indem du die nötige Pixelbreite durch die SVG-Grundbreite teilst.

Scharfe Kanten sicherstellen

Selbst bei korrekter Auflösung kann ein Export weich wirken. Drei Punkte sorgen für maximale Schärfe:

• Antialiasing bewusst einsetzen. Beim Rastern glättet die Software Kanten mit halbtransparenten Pixeln. Das ist bei Logos erwünscht, weil es Treppchen vermeidet. Bei sehr kleinen Pixel-Icons kann es aber leicht verwaschen wirken, dann hilft eine höhere Zielauflösung.
• Ganzzahlige Faktoren bevorzugen. Faktoren wie 2x oder 4x liefern sauberere Pixelraster als krumme Werte wie 1,7x, weil die Geometrie besser auf das Raster fällt.
• In die Kanten zoomen. Prüfe das fertige PNG bei 100 Prozent und darüber. Wirken die Konturen klar, passt die Auflösung. Treppchen oder Unschärfe verraten, dass der Faktor zu niedrig war.

Lieber einmal zu groß exportieren und das PNG später verkleinern, als ein zu kleines Bild nachträglich aufzublasen. Verkleinern bewahrt Schärfe, Vergrößern zerstört sie.

Web gegen Druck: zwei Denkweisen

Web und Druck verlangen unterschiedliche Herangehensweisen, auch wenn die Technik dieselbe bleibt. Im Web denkst du in Anzeigegröße mal Pixeldichte und hältst die Datei schlank, damit die Seite schnell lädt. Beim Druck denkst du in Zentimetern mal DPI und nimmst die größere Datei in Kauf, weil Schärfe vor Dateigröße geht.

Kriterium	Web	Druck
Maßeinheit	Pixel	Zentimeter plus DPI
Zielfaktor	2x bis 3x (Retina)	bis 8x je nach Format
DPI-Wert	irrelevant am Bildschirm	300 DPI Richtwert
Priorität	kleine Dateigröße	maximale Schärfe
Transparenz	oft erwünscht	je nach Druckverfahren

Ein Logo in drei Auflösungen: das Rechenbeispiel

Nehmen wir ein Logo mit 200 Pixeln Grundbreite und exportieren es für drei Szenarien. Der direkte Vergleich zeigt, wie Faktor, Pixelmaße und Dateigröße zusammenhängen:

Häufige Fehler beim hochauflösenden Export

Auch wer den Faktor richtig wählt, kann ein matschiges PNG bekommen, wenn die SVG selbst nicht sauber vorbereitet ist. Drei Fehlerquellen tauchen immer wieder auf und lassen sich vorab ausräumen.

Der erste Klassiker sind eingebettete Rasterbilder in der SVG. Manche Vektordateien enthalten ein Foto als Pixelbild, das einfach in den XML-Code eingebettet wurde. Dieses Pixelbild skaliert nicht verlustfrei mit. Wer eine solche SVG mit Faktor 4x exportiert, bekommt zwar scharfe Vektorlinien, aber ein verwaschenes eingebettetes Foto. Hier hilft nur ein höher aufgelöstes Ausgangsbild oder ein anderer Bildaufbau.

Der zweite Fehler betrifft Schriften. Sind in der SVG Texte nicht in Pfade umgewandelt, sondern als echter Text mit einer Schriftart hinterlegt, und diese Schrift fehlt beim Rastern, ersetzt das System sie durch eine andere oder lässt sie ganz weg. Das Ergebnis weicht dann vom Original ab. Wer auf Nummer sicher gehen will, wandelt Texte vor dem Export in Pfade um.

Der dritte Punkt ist die viewBox. Fehlt sie oder ist sie falsch gesetzt, kann das Rastern die Grafik beschneiden oder mit ungewolltem Rand exportieren. Eine korrekt definierte viewBox sorgt dafür, dass der Skalierungsfaktor sauber greift und die ganze Grafik im PNG landet.

Die richtige Balance zwischen Schärfe und Dateigröße

Mehr Auflösung ist nicht automatisch besser. Jede Verdopplung des Faktors vervierfacht die Pixelzahl und treibt die Dateigröße entsprechend hoch. Ein 8x-Export eines Logos kann statt 30 KB plötzlich mehrere hundert KB wiegen. Im Web bremst das die Ladezeit, ohne dass der Nutzer den Unterschied sieht, weil sein Bildschirm die zusätzlichen Pixel gar nicht darstellen kann.

Die Kunst liegt darin, exakt so viel Auflösung zu wählen, wie der Anzeigeort braucht, und nicht mehr. Für ein Icon, das im Layout nie größer als 48 Pixel erscheint, ist ein 2x-Export mit 96 Pixeln völlig ausreichend. Ein 8x-Export wäre reine Verschwendung. Umgekehrt darfst du beim Druck nicht sparen: Dort macht sich jeder fehlende Pixel als Unschärfe bemerkbar, also lieber großzügig rechnen.

Eine praktische Faustregel: Für das Web zielst du auf den kleinsten Faktor, der auf Retina-Displays noch scharf bleibt, meist 2x. Für den Druck rechnest du die Pixelbreite konsequent aus Druckmaß mal DPI und rundest auf den nächsthöheren ganzzahligen Faktor auf. So bekommst du in beiden Welten das beste Verhältnis aus Schärfe und Dateigröße.

So holst du auf svg-png.de das schärfste Ergebnis

Du hast jetzt alle Stellschrauben in der Hand: Skalierungsfaktor, absolute Pixelgröße und, für den Druck, die DPI-Umrechnung. Der wichtigste Reflex ist, vor dem Export die spätere Anzeigegröße zu bestimmen und daraus den Faktor abzuleiten, statt blind 1x zu nehmen.

Auf svg-png.de wählst du die Zielgröße direkt im Browser, siehst die resultierenden Pixelmaße und lädst das PNG ohne Upload und ohne Anmeldung herunter. Da die Umwandlung lokal aus deiner SVG rastert, bekommst du bei jedem Faktor echte Detailschärfe. Exportiere im Zweifel eine Stufe größer, behalte die Original-SVG, und du erzeugst jederzeit neue Auflösungen, ohne an Qualität zu verlieren.