SVG zu PNG Konverter

Der SVG-zu-PNG-Konverter rastert Vektorgrafiken in exakt der von Ihnen gewählten Pixelgröße zu einem PNG. Er akzeptiert rohes SVG-Markup, das Sie in das Textfeld einfügen, oder eine hochgeladene .svg-Datei, zeigt eine Live-Vorschau sowohl der Quelle als auch des Ergebnisses und lässt Sie die Transparenz behalten oder auf Weiß reduzieren. Da SVG auflösungsunabhängig ist, rendert der Konverter die Grafik vor dem Zeichnen auf die Leinwand in den Zielmaßen neu, ein größerer Export ist also scharf statt einer hochskalierten Unschärfe.

Ein SVG in vier Schritten umwandeln

1. SVG hinzufügen. Fügen Sie das Markup in das Textfeld ein, oder klicken Sie auf „.svg-Datei hochladen“ und wählen Sie eine Datei. Die Vorschau rendert, sobald das Markup ein öffnendes svg-Tag enthält.
2. Live-Vorschau und erkannte Größe prüfen. Die Felder für Breite und Höhe werden bei jedem Einfügen oder Hochladen automatisch aus der Datei gefüllt.
3. Ausgabe anpassen. Geben Sie neue Pixelmaße ein, um das Raster zu skalieren, und aktivieren Sie die Option für weißen Hintergrund, wenn Sie keine Transparenz möchten.
4. Umwandeln und herunterladen. Klicken Sie auf „In PNG umwandeln“, prüfen Sie die gerasterte Vorschau und klicken Sie dann auf Herunterladen, um die Datei zu speichern.

Wie die Ausgabegröße bestimmt wird

Das Tool ermittelt für jede Seite unabhängig eine Größe, in dieser Prioritätsreihenfolge:

1. Ein numerisches width- und height-Attribut am svg-Tag. Eine Einheit wie px ist in Ordnung; ein Prozentwert wird ignoriert.
2. Die viewBox-Breite und -Höhe, pro Seite verwendet, wenn das passende Attribut fehlt.
3. Der Standardwert der SVG-Spezifikation von 300 × 150.

Erkannte Werte werden auf ganze Pixel gerundet und auf mindestens 1 begrenzt, da eine Leinwand keine gebrochene Dimension haben kann. Nach der Erkennung können Sie beide Felder überschreiben, und die Umwandlung verwendet, was immer in diesen Feldern steht.

Die beiden Dimensionen werden genau so verwendet, wie sie eingegeben wurden, das Tool erhält das Seitenverhältnis also nicht von selbst. Ist die Quellgrafik 200 × 100 und Sie setzen die Ausgabe auf 400 × 100, wird das Ergebnis bei gleicher Höhe horizontal auf die doppelte Breite gestreckt. Teilen oder multiplizieren Sie beide Zahlen mit demselben Faktor, um proportional zu skalieren. Das Raster selbst entsteht mit der Canvas API: Der Browser rendert das SVG in der angeforderten Größe, zeichnet es auf eine Leinwand mit dieser Pixelzahl und exportiert die Leinwand als herunterladbaren PNG-Blob.

Praxisbeispiele

Quell-SVG	Erkannte Größe	Hinweise
width=“24” height=“24” viewBox=“0 0 24 24”	24 × 24	Attribute gewinnen; geben Sie für einen 2x-Export 48 × 48 ein.
viewBox=“0 0 100 50”, kein width oder height	100 × 50	Beide Seiten fallen auf die viewBox zurück.
width=“100%” viewBox=“0 0 300 150”	300 × 150	Der Prozentwert ist unbrauchbar, also liefert die viewBox die Größe.
Kein width, height oder viewBox	300 × 150	Der Standard der Spezifikation ist die letzte Möglichkeit.

Dateinamen werden ebenfalls zu Slugs verarbeitet: Aus Company Logo v2.svg wird company-logo-v2.png, aus icon_final(1).svg wird icon-final-1.png, und Markup ohne Dateinamen lädt als image.png herunter.

Transparenz und Hintergrund

Standardmäßig wird die Leinwand transparent geleert, darauf gezeichnet und als PNG mit Alphakanal exportiert, sodass sich die Grafik auf jede Seitenfarbe einfügt. Das Aktivieren des Kontrollkästchens für weißen Hintergrund füllt die gesamte Leinwand vor dem Zeichnen mit #ffffff und erzeugt ein deckendes Bild. Es gibt keine weitere Hintergrundfarbenauswahl und keine Option, JPEG oder WebP zu exportieren; die Ausgabe ist immer PNG. PNG ist verlustfrei, ein komplexes SVG kann also eine recht große Datei erzeugen, wobei ein separater Bildkompressor hilft.

Was zuverlässig gerastert wird (und was nicht)

Formen, Pfade, Inline-Füllungen und -Konturen, Verläufe, Clipping-Pfade, Inline-Style-Blöcke und als Base64-Data-URIs eingebettete Bilder werden meist originalgetreu gerendert. Die folgenden Punkte sind die üblichen Problemquellen:

• Externe Referenzen. Verlinkte Bilder, entfernte Schriften und externe Stylesheets werden aus einem blob-geladenen SVG nicht geladen, weshalb diese Elemente verschwinden.
• Live-Text. Text wird mit den Schriften gezeichnet, die der Browser auflösen kann; eine nicht eingebettete Webschrift fällt auf eine Standardschrift zurück. Wandeln Sie Text in Pfade um, wenn die genaue Schriftart wichtig ist.
• foreignObject. In SVG eingebettetes HTML rendert über Browser hinweg uneinheitlich und wird möglicherweise ganz verworfen.
• Filter und fortgeschrittenes CSS. Manche Filtereffekte und CSS-Funktionen sind browserabhängig, testen Sie das Ergebnis also in Ihren Zielbrowsern.
• Canvas-Tainting. Lädt doch einmal ein externes Bild, kann es die Leinwand verunreinigen („tainten“) und den PNG-Export scheitern lassen; in diesem Fall zeigt das Tool einen Umwandlungsfehler an.

Häufige Fehler

• Vergessen, Assets einzubetten. Die häufigste Ursache für ein halbleeres PNG sind Grafiken, die auf externe Dateien verweisen.
• Nur eine Dimension ändern. Es gibt keine Sperre für das Seitenverhältnis, eine Änderung der Breite ohne die Höhe verzerrt das Bild daher.
• Einen Skalierungsfaktor erwarten. Für 2x müssen Sie beide Zahlen verdoppeln; es gibt keinen eigenen Multiplikator.
• Ein SVG mit Prozentgröße einfügen und die gerenderte Breite erwarten. Es wird auf die viewBox oder auf 300 × 150 aufgelöst, nicht auf Ihre Seitenbreite.
• Die Vorschau für pixelgenau halten. Die Bildschirmvorschau wird an die Seite angepasst skaliert; das exportierte PNG verwendet die Zahlen in den Feldern.
• Annehmen, es gebe einen Stapelmodus. Jede Umwandlung verarbeitet ein SVG.

Verwandte Tools

• Bild komprimieren — PNG/JPEG-Bilder im Browser komprimieren und skalieren.
• Favicon-Generator — Favicon-PNGs in mehreren Größen für Ihre Website erstellen.
• Bildformat-Konverter — PNGs in JPEG, WebP und andere Formate umwandeln.
• Bild zu Base64 — Bilder in Base64-Daten-URIs umwandeln.