SVG to PNG Converter
Understand SVG to PNG Converter
Rastert eingefügtes SVG-Markup vollständig im Browser in ein herunterladbares PNG in der von Ihnen gewählten Größe und Skalierung.
How it works
Das Markup wird als Bild geladen und in ein HTML-Canvas der gewählten Pixelmaße gezeichnet und dann als PNG exportiert. Weil SVG auflösungsunabhängig ist und PNG nicht, ist der Skalierungsfaktor die eigentliche Entscheidung: Ein Icon von 200×200 bei 3× gerendert ergibt eine Bitmap von 600×600, die auf einem hochauflösenden Display weiterhin scharf aussieht, während 1× dort weich wirkt. Die Ausgabe besteht von diesem Moment an aus festen Pixeln – das PNG später zu vergrößern verschlechtert es, während das Quell-SVG in jeder Größe hätte gerendert werden können.
When to use it
- Ein Favicon, ein App-Icon oder ein Vorschaubild für soziale Netzwerke als Rastergrafik aus einer Vektorquelle erzeugen
- Ein Bild für ein Werkzeug, ein E-Mail-Programm oder einen Marktplatz liefern, der kein SVG annimmt
- Ein Diagramm aus einer SVG-basierten Bibliothek für eine Präsentation oder ein Dokument exportieren
- Aus einer Vektordatei Assets in 1×, 2× und 3× erzeugen
Watch out for
- Ein SVG ohne width, height oder viewBox hat keine eigene Größe, der Rasterer hat also nichts, wovon er skalieren könnte. Ergänzen Sie vor der Umwandlung ein viewBox am Wurzelelement.
- Externe Ressourcen werden in einem gerasterten SVG nicht geladen. Über eine @font-face-Regel referenzierte Webfonts und per URL referenzierte Bilder werden typischerweise nicht geholt – wandeln Sie Text zuerst in Pfade, sonst erscheinen Ihre Beschriftungen in einer Ersatzschrift oder gar nicht.
- Transparenz bleibt erhalten, aber der Hintergrund erscheint nicht. Ein SVG ohne Hintergrundrechteck wird als PNG mit transparentem Hintergrund exportiert, was auf einer dunklen Fläche wie ein fehlendes Bild aussieht.
- PNG ist meist die größere Datei. Ein flaches Vektor-Icon mit 2 KB als SVG kann als PNG in 3× 40 KB haben, wandeln Sie also nur um, wenn das Ziel wirklich keinen Vektor annimmt.
Not the right tool for: Alles, was im Web bleibt und einen Vektor annehmen kann. Ein SVG skaliert auf jedes Display, ist kleiner und lässt sich mit CSS gestalten – rastern Sie nur, wenn das Ziel Sie dazu zwingt.
Frequently Asked Questions
Wie wandle ich ein SVG in ein PNG um?
Fügen Sie das SVG-Markup ein oder ziehen Sie eine .svg-Datei hinein, wählen Sie einen Skalierungsfaktor oder tippen Sie eine exakte Breite und Höhe ein und klicken Sie dann auf In PNG umwandeln und laden Sie das Ergebnis herunter. Die gesamte Umwandlung läuft auf einem Canvas in Ihrem Browser, die Datei wird also nie hochgeladen.
Wie exportiere ich ein SVG in hoher Auflösung?
Da SVG ein Vektorformat ist, ist die Ausgabegröße Ihre Wahl: Nutzen Sie die Schaltflächen 4× oder 8× oder geben Sie eine Breite wie 2048 ein und lassen Sie die Höhe dem Seitenverhältnis folgen. Anders als beim Hochskalieren eines PNG werden die Vektoren neu gerendert, die Kanten bleiben also in jeder Größe scharf.
Warum wird mein SVG mit falschen Schriften oder fehlenden Bildern dargestellt?
Das Rastern läuft in einem isolierten Bildkontext, der keine externen Ressourcen laden kann, Webfonts und verlinkte Bilder werden also nicht geladen. Wandeln Sie Text vor der Umwandlung in Pfade und betten Sie Bilder als Data-URIs ein, dann entspricht das PNG dem Original exakt.
How to Use SVG to PNG Converter
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.