SVG zu PNG

SVG ist auflösungsunabhängig und ideal für Logos, Icons und Illustrationen, doch viele Stellen akzeptieren nur Rasterbilder: soziale Netzwerke, E-Mail-Programme, App-Store-Einträge, Präsentations- und Textprogramme sowie die meisten Upload-Formulare. Wer SVG in PNG umwandelt, erhält ein Bitmap mit fester Größe, das überall gleich aussieht. Dieser Konverter zeichnet die Vektorpfade direkt in der gewählten Pixelgröße. So wird aus einem kleinen Icon ein scharfes Bild mit 2000 Pixeln, ohne die Unschärfe eines hochskalierten kleinen PNG.

So wandeln Sie SVG in PNG um

1. Legen Sie eine oder mehrere .svg-Dateien ab.
2. Breite und Höhe werden mit den Abmessungen der SVG vorbelegt (Attribute width und height oder viewBox). Ändern Sie sie auf die gewünschte Größe.
3. Wählen Sie den Einpassungsmodus: Contain, Cover oder Stretch.
4. Legen Sie den Hintergrund fest: transparent oder ein Hex-Wert wie #FFFFFF.
5. Klicken Sie auf Convert to PNG, prüfen Sie die Vorschau und laden Sie das PNG herunter (oder ein ZIP bei mehreren Dateien).

Die richtige Ausgabegröße

Da SVG ein Vektorformat ist, ist die Ausgabegröße eine Entscheidung, keine Einschränkung. Einige Richtwerte:

• Retina- und High-DPI-Displays: in doppelter oder dreifacher Anzeigegröße exportieren. Ein Icon, das mit 64 px angezeigt wird, wirkt auf aktuellen Smartphones scharf, wenn es mit 128 oder 192 px exportiert wird.
• Social-Media- und Open-Graph-Bilder: 1200 x 630 ist die Größe, die die meisten Linkvorschauen verwenden.
• Favicon-Quelle: ein PNG mit 512 x 512 exportieren und dann im Favicon-Generator ICO und alle Icon-Größen erzeugen.
• Druck und Präsentationen: große Exporte ab 3000 px halten Logos auf Beamern und in Druckdokumenten scharf.

Das Maximum liegt bei 6000 Pixeln pro Seite und 24 Millionen Pixeln insgesamt (zum Beispiel 6000 x 4000). Das Tool prüft das vor dem Rendern und meldet, wenn eine Größe außerhalb des Bereichs liegt.

Contain, Cover oder Stretch

Haben die eingegebene Breite und Höhe ein anderes Seitenverhältnis als die SVG, bestimmt der Einpassungsmodus, wie die Grafik platziert wird.

• Contain (Standard): Die gesamte Grafik wird eingepasst und zentriert. Der freie Rand erhält die Hintergrundfarbe oder bleibt transparent. Nichts wird abgeschnitten oder verzerrt.
• Cover: Die Grafik wird so skaliert, dass sie die ganze Fläche füllt, und zentriert; Überstehendes wird abgeschnitten. Nützlich für Muster und Hintergründe, die ein festes Bannerformat füllen sollen.
• Stretch: Breite und Höhe werden unabhängig skaliert, bis die Fläche exakt gefüllt ist. Die Proportionen ändern sich, daher nur für einfache Formen oder bewusst gestreckte Grafiken.

Behalten Sie das ursprüngliche Seitenverhältnis bei, liefern alle drei Modi dasselbe Ergebnis.

Transparenter oder einfarbiger Hintergrund

Standardmäßig behält das PNG die Transparenz der SVG: Alles, was nicht gezeichnet wird, bleibt vollständig transparent, genau richtig für ein Logo auf einer farbigen Website oder Folie. Manche Ziele kommen mit Transparenz schlecht zurecht, etwa einige E-Mail-Programme oder ein Chat im Dunkelmodus, in dem ein schwarzes Logo verschwindet. Geben Sie dann einen sechsstelligen Hex-Wert (#RRGGBB) ein, um den Hintergrund vor dem Rendern einfarbig zu füllen.

Viele SVGs auf einmal umwandeln

Wählen Sie ein ganzes Icon-Set aus, und jede Datei wird mit derselben Breite, Höhe, Einpassung und Hintergrundfarbe gerendert. Jedes PNG behält den Namen der Quelldatei, und alles kommt gesammelt als svg-to-png.zip. Ist eine Datei keine gültige SVG, werden die anderen trotzdem umgewandelt und der Fehler mit Dateinamen angezeigt. Da eine Größe für den ganzen Stapel gilt, wählen Sie bei Icons mit unterschiedlichen Seitenverhältnissen am besten Contain, damit keines beschnitten oder verzerrt wird.

Rendering-Engine und bekannte Grenzen

Die Umwandlung nutzt resvg, einen in Rust geschriebenen SVG-Renderer für statische Vektor-SVG: Pfade, Formen, Verläufe, Muster, Clipping, Masken, Filter, Transformationen und CSS-Styles. Einige Punkte unterscheiden sich von einem Webbrowser:

• Text muss in Pfade umgewandelt sein: Der Renderer läuft in der Seite ohne Zugriff auf die auf Ihrem Rechner installierten Schriften, daher erscheinen <text>-Elemente möglicherweise nicht. Wandeln Sie Text im Designprogramm vor dem SVG-Export in Pfade um. Die meisten Logodateien sind ohnehin so aufgebaut.
• Eingebettete Bitmaps werden übersprungen: Gerendert werden nur Vektorinhalte. Ein PNG, JPEG, GIF oder WebP innerhalb der SVG (per URL verlinkt oder als Data-URI eingebettet) erscheint nicht im Ergebnis. Das Tool ist also für echte Vektordateien gedacht: Logos, Icons, Illustrationen.
• Keine Animationen oder Skripte: Animierte SVGs werden als einzelnes Standbild gerendert, JavaScript in der Datei wird ignoriert.
• Nur PNG als Ausgabe: Für JPG oder WebP wandeln Sie das PNG anschließend mit dem PNG-zu-WebP-Konverter oder dem allgemeinen Bildkonverter um.

Im Vergleich zu Inkscape, ImageMagick oder einem Screenshot

Der Exportdialog von Inkscape und die Kommandozeile (inkscape --export-type=png) liefern ein vergleichbares Ergebnis und haben zusätzlich Zugriff auf Ihre Systemschriften. Bei ImageMagick hängt die Qualität davon ab, mit welchem SVG-Delegate es gebaut wurde. Ein Screenshot einer SVG im Browser bindet Sie an Ihre Bildschirmauflösung. Dieses Tool liegt dazwischen: keine Installation, pixelgenaue Größe und Stapelverarbeitung, mit der oben genannten Einschränkung bei Schriften.

Ihre Dateien werden nicht hochgeladen

SVG-Dateien sind Text und enthalten oft mehr als Formen: Ebenennamen, Kommentare, Editor-Metadaten, manchmal den Namen des Kunden oder Projekts. Die Umwandlung läuft vollständig im Browser-Tab mit Rust, kompiliert zu WebAssembly. Die SVG wird lokal geparst und gerendert, keine Anfrage sendet sie an einen Server. Die Daten verlassen Ihr Gerät nicht, was bei Kundendateien auch die DSGVO-Frage erübrigt. Prüfen können Sie das im Netzwerk-Tab der Entwicklertools oder indem Sie nach dem Laden der Seite die Verbindung trennen und weiter umwandeln.

Häufige Fragen

Wie wandle ich SVG in PNG mit transparentem Hintergrund um?

Lassen Sie das Hintergrundfeld auf transparent, das ist der Standard. Bereiche, die die SVG nicht bemalt, bleiben im PNG transparent.

Wird das PNG unscharf?

Nein, solange Sie eine ausreichende Größe wählen. Die Vektorpfade werden direkt in der Zielauflösung gerendert, ein Export mit 4000 px ist so scharf wie einer mit 400 px.

Wie groß darf das PNG maximal sein?

6000 Pixel pro Seite und 24 Millionen Pixel insgesamt.

Warum fehlt der Text in meinem PNG?

Der Renderer hat keinen Zugriff auf Ihre installierten Schriften. Wandeln Sie Text im Designprogramm in Pfade um (oft „In Pfade umwandeln“ oder „Konturen erstellen“) und exportieren Sie die SVG erneut.

Kann ich statt PNG ein JPG erhalten?

Nicht direkt. Wandeln Sie hier in PNG um und das PNG anschließend mit dem Bildkonverter in JPG oder WebP.

Werden meine SVG-Dateien hochgeladen?

Nein. Alles läuft lokal im Browser. Nichts wird an einen Server gesendet oder dort gespeichert.