SVG zu PNG Konverter
Läuft komplett in deinem Browser. Deine Dateien und Daten verlassen dein Gerät nie.
Über dieses Tool
Dieses Tool wandelt eine SVG-Vektorgrafik in ein PNG-Rasterbild um. Datei per Drag-and-Drop ablegen oder den Code einfügen, eine Skalierung wählen (oder eine eigene Breite eintragen) und das PNG herunterladen.
Wie ermittelt das Tool die richtige Größe?
Es liest zuerst die eigenen width- und height-Attribute des SVG, sofern beide als absolute Werte wie 120px oder 48 gesetzt sind. Fehlt eines davon oder ist es als Prozentwert angegeben, weicht das Tool auf das viewBox-Attribut aus und leitet die fehlende Seite aus dem Seitenverhältnis ab, wenn nur eine Dimension nutzbar ist. Enthält die Datei nichts von alledem, greift die Standardgröße 300x150, dieselbe, die Browser für ein <img> ohne Größenangabe verwenden. Von dieser Basisgröße aus vervielfacht die Wahl von 1x, 2x oder 4x den Wert, oder du trägst eine eigene Breite ein und die Höhe folgt automatisch im gleichen Seitenverhältnis.
Wird das SVG irgendwohin hochgeladen?
Nein, alles läuft auf deinem eigenen Gerät. Der Browser zeichnet das SVG in einen unsichtbaren Canvas und liest anschließend die Pixel aus, um das PNG zu erzeugen, die Datei wird also nie an einen Server gesendet. Das SVG wird dabei rein als Bild behandelt: Skripte oder Event-Handler, die darin eingebettet sind, werden nicht ausgeführt, weil das Zeichnen auf einen Canvas das Dokument nicht so ausführt wie das Einbetten in eine Seite.
Was passiert bei fehlerhaftem SVG?
Der Konverter braucht Code, der zumindest ein erkennbares öffnendes <svg>-Tag enthält; Text, der gar nicht wie SVG aussieht, wird abgelehnt, bevor überhaupt etwas gezeichnet wird. Ansonsten übernimmt die SVG-Engine des Browsers das Rendern, sodass die meisten wohlgeformten SVGs, einschließlich verschachtelter Gruppen, Farbverläufe und eingebetteter Schriften oder Bilder, genauso dargestellt werden wie beim direkten Öffnen der Datei. Wirklich kaputtes XML scheitert dagegen weiterhin, anders als eine fehlende Breiten- oder Höhenangabe, weil der Browser es gar nicht erst zu einem Dokument parsen kann.
Wann ist das nützlich?
Praktisch, um ein Logo oder Icon als PNG für Stellen zu bekommen, die kein SVG akzeptieren, etwa ein altes CMS, eine E-Mail-Signatur oder eine Spiele-Engine. Dasselbe Icon lässt sich auch in 1x, 2x und 4x für unterschiedliche Bildschirmdichten exportieren, praktisch für App-Icons oder Favicons, die mehrere feste PNG-Größen brauchen. Die Unterschiede zwischen den beiden Bildtypen erklärt MDN im Leitfaden zu Bilddateitypen.