SVG → PNG

SVG-Vektordateien in PNG-Bilder rastern

So funktioniert es

SVG → PNG — SVG-Vektordateien in PNG-Bilder rastern. Alle Verarbeitung erfolgt in deinem Browser — kein Upload, keine Anmeldung, keine E-Mail. Für immer kostenlos.

Zuletzt aktualisiert: 2026-05-06

Editor's note

Wir haben das gebaut, weil der App Store ein 1024×1024-PNG unseres Logos wollte und das SVG, das wir exportierten, einen Radialgradienten hatte, den der CLI-Renderer von Inkscape in hässliche Streifen verbogen hat. Die Marke sah auf der Listing-Seite kaputt aus, wir haben es einen ganzen Tag nicht bemerkt, und der Screenshot blieb die ganze Zeit oben. Danach hassten wir die ganze Pipeline – jeder Kommandozeilen-SVG-Rasterizer, den wir versuchten, hatte mindestens ein Filter-Primitiv, das er anders interpretierte als ein Browser.

Also haben wir uns auf den einzigen Renderer geeinigt, der dem entspricht, was Nutzer tatsächlich sehen: die SVG-Engine des Browsers selbst. Das PNG, das du hier herunterlädst, ist pixelgenau identisch mit dem, was ein Chrome-Nutzer von deiner Live-Site screenshooten würde. Das ist die einzige Konsistenz, die für Brand-Assets zählt, und der Grund, warum wir keinen Server-Fallback für ältere Browser gebaut haben. Wenn dein SVG in der Vorschau korrekt rendert, rendert es überall korrekt, wo dein Publikum lebt.

Über SVG → PNG

SVG → PNG verwandelt skalierbare Vektorgrafiken in gerasterte PNG-Bilder mit der Auflösung deiner Wahl. SVG ist im Web unschlagbar, weil es bei jeder Zoomstufe scharf bleibt, doch die meisten App Stores, Social-Plattformen, Präsentationstools, E-Commerce-Dashboards und Legacy-Drucker erwarten weiterhin ein PNG mit fester Größe. Dieses Tool schließt die Lücke schnell, ohne dass du Illustrator oder Inkscape öffnen musst.

Es richtet sich an Designer, die Icons an Entwickler übergeben, an Marketer, die OG-Bilder vorbereiten, an Gründer, die App-Store-Assets erstellen, und an alle, die in Sekunden ein transparentes oder einfarbiges PNG aus einer .svg-Datei brauchen. Größe wählen, Hintergrund festlegen, herunterladen — kein Konto, keine E-Mail, keine Warteschlange.

Die Konvertierung läuft komplett im Browser über die native Canvas-API und wird im Browser verarbeitet, daher verlässt deine Grafik nie den Server. Das ist entscheidend, wenn das SVG unveröffentlichtes Branding, NDA-geschützte Icons oder Kundenarbeit enthält, die du nicht zufällig irgendwo hochladen darfst.

So verwenden Sie SVG → PNG

Lege deine .svg-Datei in den Upload-Bereich oder klicke zum Durchsuchen — du kannst mehrere Dateien gleichzeitig in die Warteschlange stellen.
Wähle eine Breiten-Voreinstellung (256, 512, 1024, 2048 px) oder gib eine eigene Breite ein; die Höhe wird aus dem Seitenverhältnis des SVG berechnet.
Wähle Transparent, Weiß oder eine eigene Hex-Farbe als Hintergrund, je nachdem wo das PNG eingesetzt wird.
Prüfe in der Live-Vorschau, ob Schriften, Farbverläufe und Strichbreiten wie erwartet gerendert werden.
Klicke auf Herunterladen, um das PNG zu speichern. Wiederhole den Vorgang mit anderen Breiten, wenn du ein Icon-Set in mehreren Auflösungen brauchst.

Häufige Anwendungsfälle

Markenlogos in 1024 px und 2048 px für Pressekits und Partnerseiten exportieren.
Open-Graph- und Twitter-Card-Bilder aus einer SVG-Illustration generieren, bevor ein Blogpost veröffentlicht wird.
Hochauflösende App-Store-Screenshots und Marketing-Assets erzeugen, die PNG statt SVG verlangen.
Eine Icon-Bibliothek nach PNG konvertieren für Tools, die kein SVG akzeptieren (PowerPoint, ältere E-Mail-Clients, manche Notion-Blöcke).
Retina-fähige @1x/@2x/@3x-PNG-Sets aus einer einzigen SVG-Quelle erstellen.

Tipps und häufige Fehler

Wenn das SVG externe Schriften per @import einbindet, kann das gerenderte PNG auf eine System-Schriftart zurückfallen. Wandle den Text vor dem SVG-Export in deinem Designtool in Pfade um, um die Typografie zu fixieren.
Nutze einen transparenten Hintergrund für Icons auf dunklen Oberflächen; wähle Weiß, wenn das PNG in ein Word-Dokument oder PDF eingefügt wird.
Exportiere für Retina-Bildschirme immer mit mindestens der doppelten Anzeigegröße — ein 512-px-PNG sieht bei 256 CSS-Pixeln klarer aus als ein 256-px-PNG.
Wirken die Farben leicht falsch, verwendet das SVG vielleicht ein Farbprofil, das dein Browser nicht kennt. Re-exportiere das SVG in sRGB, damit Farben in jedem Viewer konsistent bleiben.

Häufig gestellte Fragen

Wie hoch ist die Ausgabeauflösung?

Entweder die natürliche Größe des SVG oder eine benutzerdefinierte Breite (Höhe wird automatisch berechnet). Übliche Presets: 256, 512, 1024, 2048 px.

Kann ich Transparenz behalten?

Ja. Wähle 'Transparent' als Hintergrund. Wähle 'Weiß' oder eine eigene Farbe, wenn dein SVG transparente Bereiche hat und sie solid sein sollen.

Warum wird mein SVG mit 800×600 gerendert?

Wir konnten die natürliche Größe nicht ermitteln (kein width/height/viewBox). Setze sie über 'Eigene Breite' explizit.

Kann ich mehrere SVGs auf einmal konvertieren?

Ja — lege oder wähle mehrere Dateien gleichzeitig aus. Jede wird in der Warteschlange gerendert und erhält einen eigenen Download-Button, sodass du sie einzeln oder nacheinander speichern kannst.

Bleiben Farbverläufe, Masken und Filter beim Konvertieren erhalten?

Größtenteils ja. Der SVG-Renderer des Browsers verarbeitet lineare und radiale Verläufe, Clip-Pfade und Standard-CSS-Filter sauber. Sehr fortgeschrittene Filter-Primitive (komplexe feTurbulence- oder feComposite-Ketten) sehen manchmal leicht anders aus — schaue vor dem Download in die Vorschau.

Warum ist mein PNG so groß?

PNG ist verlustfrei und speichert jeden Pixel, daher kann ein 4096-px-Export mit fotografischen Verläufen leicht über 5 MB liegen. Wenn die Größe wichtiger ist als perfekte Qualität, jage das Ergebnis durch Bild komprimieren oder konvertiere es mit Bildformat ändern nach WebP.