SVG in PNG umwandeln

Was das Tool macht

Dieses Tool wandelt SVG-Code oder eine .svg-Datei in ein PNG-, JPG- oder WebP-Bild um. Füge das Markup ein oder zieh eine Datei hinein, wähl eine Skalierung oder eine exakte Breite und lade die Rastergrafik herunter. Das Rendern passiert in deinem Browser, Icons, Logos und Diagramme verlassen also nie deinen Rechner.

Praktisch überall, wo kein SVG akzeptiert wird: App-Icons, Bilder für soziale Medien, Präsentationen, Dokumente, E-Mail-Signaturen oder ältere Software. Du bekommst eine Live-Vorschau auf einem Schachbrettmuster und siehst so genau, welche Teile transparent sind.

So benutzt du es

1. Füge deinen <svg>-Code in den Editor ein, klick auf Hochladen, um eine Datei zu öffnen, oder zieh eine auf die Seite. Beispiel lädt ein kleines Logo.
2. Wähl eine Größe: 1× verwendet die eigenen Abmessungen des SVG, 2×–4× multiplizieren sie. Oder gib eine eigene Breite in Pixeln ein; die Höhe folgt dem Seitenverhältnis.
3. Wähl das Format: PNG für verlustfreie Ausgabe mit Transparenz, JPG für Fotos und Kompatibilität, WebP für kleine Dateien.
4. Wähl den Hintergrund: transparent, weiß oder eine beliebige Farbe.
5. Klick auf Herunterladen. Die Zeile unter der Vorschau zeigt die endgültige Pixelgröße, das Format und die Dateigröße.

Wie die Größe ermittelt wird

Das Tool schaut sich das <svg>-Wurzelelement an. width und height in px, pt, mm, cm, in oder em werden in Pixel umgerechnet. Fehlen sie oder sind sie in Prozent angegeben, werden stattdessen Breite und Höhe der viewBox verwendet. Danach wird die gewählte Skalierung oder eigene Breite angewendet, und das SVG wird mit expliziten Pixelgrößen neu geschrieben, damit jeder Browser es gleich zeichnet.

Beispiel

Ein Icon mit viewBox="0 0 24 24" ohne width oder height wird bei 1× zu einem 24 × 24 großen PNG. Bei 4× wird es 96 × 96 groß, und mit einer eigenen Breite von 512 wird es zu einem 512 × 512 großen PNG, das sich als App-Store-Icon eignet – immer noch perfekt scharf, weil es aus Vektoren gerendert und nicht hochskaliert wird.

Tipps

• Ungültiges XML wird mit Zeilennummer gemeldet, sodass du direkt zur Problemstelle springen kannst.
• Eingebettete Rastergrafiken (<image href="data:...">) funktionieren, externe Links nicht.
• Text verwendet die auf deinem Computer installierten Schriften. Für pixelgenau gleiche Ergebnisse überall wandle Text vorher in deinem Design-Tool in Konturen um.
• Die maximale Ausgabegröße ist durch die Canvas-Größe des Browsers begrenzt, etwa 16.000 Pixel pro Seite.