Zum Inhalt springen
Toolars
Erkunden

SVG in PNG umwandeln

Öffne ein SVG, und diese Seite bereinigt es mit einer strengen Positivliste und rendert die sichere Fassung dann in der gewählten Skalierung auf ein transparentes PNG – alles in deinem Browser. Skripte laufen nie, und die Datei wird nicht hochgeladen. Wichtig zu wissen: Alles außerhalb der Positivliste, etwa CSS-Stile, Filter, Marker oder eingebettete Bilder, wird vor dem Rendern entfernt.

Tool-Fakten

SVG-Größenlimit
2 MiB Markup, erkannt als image/svg+xml
Skalierung
Schaltflächen 1x, 2x, 3x und 4x, hier mit 2x voreingestellt; „Export-Skalierung“ akzeptiert auch 0,01 bis 32
Ausgabeobergrenze
8.192 px pro Seite und 24 MP nach dem Skalieren
Vor dem Rendern entfernt
Skripte, Event-Handler, style-Attribute und <style>, Filter, Marker, <image>, foreignObject, externe und data:-URLs
Direkt abgelehnt
DOCTYPE- oder ENTITY-Deklarationen sowie Dateien ohne width/height und ohne viewBox
Hintergrund
Transparent im PNG; eine Füllfarbe wird nur angewendet, wenn du auf JPEG umstellst

Aufgabenpfad / von der Eingabe zum Ergebnis

So rasterst du ein SVG zu PNG

  1. 01

    SVG hinzufügen

    „Datei auswählen“ nimmt jeweils eine .svg-Datei an. Das rohe Markup wird nie in die Seite eingefügt; eine Vorschau erscheint erst nach dem bereinigten Rendern.

  2. 02

    Größe wählen

    Klick unter „Export-Skalierung“ auf 1x, 2x, 3x oder 4x, oder gib exakte Pixelwerte unter „Ausgabebreite“ und „Ausgabehöhe“ ein.

  3. 03

    Bereinigen & umwandeln

    Klick auf „Bereinigen & umwandeln“. Die Zusammenfassung nennt die endgültige Pixelgröße und wie viele unsichere oder nicht unterstützte Elemente entfernt wurden.

  4. 04

    Prüfen und herunterladen

    Ist die Zahl der Entfernungen größer als null, vergleiche die Vorschau mit der Originalgrafik, bevor du das PNG herunterlädst.

Aus Vektorgrafik werden Pixel

SVG beschreibt Formen und bleibt daher in jeder Größe scharf, doch viele Ziele wie Präsentationsprogramme, Dokumenteditoren und Store-Einträge verlangen eine feste Bitmap. Das Rastern zu PNG erhält die Transparenz und verliert nichts außer dem Pixelraster, das du wählst.

Dieses Raster ist die entscheidende Wahl. Die Skalierung multipliziert Breite und Höhe des SVG – oder seine viewBox, wenn diese Attribute fehlen –, sodass aus einem Icon mit 64×64 bei 2x eines mit 128×128 wird. Ein späteres Vergrößern des PNG macht es unscharf, also rendere gleich in der größten Größe, die du brauchst.

Die meisten Überraschungen erklärt die Bereinigung. Pfade, Grundformen, Text, Verläufe, Clip-Pfade, Masken, Muster und lokale <use>-Verweise bleiben erhalten, ebenso Darstellungsattribute wie fill und stroke. Gestaltung über CSS-Klassen, style-Attribute oder einen <style>-Block fällt weg, daher kann so exportierte Grafik schwarz oder ungefüllt erscheinen.

Häufige Fragen

Warum ist mein PNG schwarz oder hat seine Farben verloren?
Die Farben wurden vermutlich per CSS gesetzt: über einen <style>-Block, Klassenregeln oder style-Attribute. Diese werden entfernt, und SVG-Formen sind standardmäßig schwarz gefüllt. Exportiere das SVG mit Darstellungsattributen (fill, stroke) statt CSS, oder wähle in deinem Designprogramm einen Export mit Inline-Attributen.
Welche Skalierung passt für hochauflösende Bildschirme?
Diese Seite startet mit 2x, was die angegebenen Abmessungen des SVG verdoppelt und für die meisten hochauflösenden Displays passt. Nimm 3x oder 4x für größere Darstellungen – das Ergebnis muss aber weiterhin in 8.192 px pro Seite und 24 MP passen.
Warum fehlen Pfeilspitzen oder Schlagschatten?
In SVG werden Pfeilspitzen mit marker-Elementen und Schlagschatten mit filter-Elementen gezeichnet, und beide stehen nicht auf der Positivliste des Bereinigers. Wandle diese Effekte in deinem Editor in einfache Pfade um, bevor du das SVG exportierst.
Warum wurde mein SVG abgelehnt?
Häufige Gründe sind eine DOCTYPE- oder ENTITY-Deklaration, eine Datei über 2 MiB, eine Datei, die nicht als image/svg+xml gemeldet wird, oder ein Wurzelelement ohne width, height oder viewBox. Eine Skalierung, die das Rendering über die Pixelobergrenze treiben würde, wird unter Nennung des Limits abgelehnt.
Erscheinen verlinkte Schriften und Bilder im PNG?
Nein. Externe URLs, data:-URLs und <image>-Elemente werden entfernt, verlinkte Bilder und Webfonts laden also nie. Text wird mit einer Schrift gezeichnet, die der Browser für die angegebene font-family bereits hat. Wandle Text in deinem Editor in Pfade um, wenn es auf exakte Buchstabenformen ankommt.

SVG-zu-Bild-Konverter