Kostenloser SVG-zu-PNG-Konverter

SVG vs. PNG

SVG (Scalable Vector Graphics) ist ein Vektorformat, XML-Markup, das Formen mathematisch beschreibt. Ein Kreis in SVG ist „zeichne einen Kreis mit Radius R bei (x, y) mit Füllfarbe F", Anweisungen, keine Pixel. Der Browser rendert die Anweisungen in der Größe, in der du das SVG anzeigst, also bleibt es bei 1x, 2x, 3x und darüber hinaus scharf. PNG (Portable Network Graphics) ist ein Rasterformat, ein festes Pixelraster mit festen Farbwerten. PNG ist das, was du erhältst, wenn du ein SVG bei einer bestimmten Auflösung „einfrierst". Die Umwandlung von SVG in PNG nennt man Rasterung: Auswahl eines Zielpixelrasters und Rendern der Vektoranweisungen in dieser festen Größe, danach ist das Ergebnis ein normales Rasterbild mit allen Größenbeschränkungen, die das mit sich bringt.

SVG wurde von der 1998 gegründeten W3C SVG Working Group entwickelt; SVG 1.0 wurde am 4. September 2001 zu einer W3C-Empfehlung; SVG 1.1 folgte am 14. Januar 2003 und war für das nächste Jahrzehnt die dominierende Version; SVG 1.1 Second Edition kam am 16. August 2011; SVG 2 erreichte am 4. Oktober 2018 Candidate Recommendation, ist aber ins Stocken geraten, es bleibt CR statt vollständige Empfehlung mit Stand 2026. PNG wurde am 1. Oktober 1996 zu einer W3C-Empfehlung und IETF RFC 2083 im März 1997; das Format ist seitdem stabil.

Warum SVG in PNG konvertieren?

• E-Mail-Clients verlieren SVG-Unterstützung. Microsoft begann mit dem Auslaufen der Inline-SVG-Unterstützung in Outlook für das Web und dem neuen Outlook für Windows ab September 2025, mit Abschluss der Einführung im Oktober 2025, Inline-SVGs werden jetzt als leerer Raum gerendert. SVG-Anhänge funktionieren immer noch, aber Inline-gestylte E-Mail-Vorlagen, die zuvor SVG-Logos einbetteten, benötigen PNG-Fallbacks. Gmails Web-Oberfläche rendert SVG gut; Apple Mail auch; der wesentliche Bruch ist auf der Microsoft-Seite.
• Social-Media-Plattformen. Twitter/X, Instagram, Facebook, LinkedIn lehnen SVG-Uploads direkt ab oder komprimieren und kodieren sie vor der Anzeige zu PNG/JPEG um. Vorrastern in den bevorzugten Abmessungen der Plattform (1200x630 für Open Graph, 1080x1080 für Instagram) umgeht ihre verlustbehaftete automatische Konvertierung.
• App-Icon-Generierung. iOS-App-Icons müssen PNG 1024x1024 sein (App-Store-Eintrag) plus verschiedene gerätespezifische Größen; Android adaptive Icons werden im Launcher mit 432x432 (108dp bei xxxhdpi) gerendert, mit 512x512 für den Play-Store-Eintrag; PWA-Manifest-Icons benötigen typischerweise 192x192 und 512x512. SVG wird von keinem davon akzeptiert.
• Print-on-Demand und Druckvorstufe. Printful, Redbubble, Society6, RedPrint und die meisten Print-on-Demand-Dienste benötigen PNG (oder PDF) in bestimmten Auflösungen, normalerweise 300 DPI für die physische Zielgröße. SVG wird in ihren Upload-Flows nicht akzeptiert.
• Veraltete CMS und Apps. Ältere WordPress-Installationen, alte Admin-Tools, Dokument-Editoren, die älter als die SVG-Unterstützung im Browser sind, überall wo „muss PNG sein" eine harte Anforderung ist.
• Discord-Emojis und ähnliches. Das Hochladen benutzerdefinierter Emojis bei Discord erfordert PNG (oder animiertes GIF für animierte Emojis); empfohlene Größe 128x128 mit einer Dateigrößenobergrenze von 256 KB. SVG wird nicht akzeptiert.

Wie die Konvertierung in deinem Browser funktioniert

Die Rastertechnik über die Canvas-API ist unkompliziert, hat aber subtile Tücken. Die Standard-Pipeline: SVG als Image-Element via Blob-URL (URL.createObjectURL(svgBlob)) oder direkt als Data-URI (data:image/svg+xml;base64,...) laden; auf das onload-Ereignis warten; ein Canvas mit den gewünschten Ausgabeabmessungen erstellen; ctx.drawImage(image, 0, 0, width, height) aufrufen, um das SVG in der gewählten Größe zu rastern; über canvas.toBlob('image/png') exportieren. Die SVG-Renderer der Browser handhaben Gradienten, Masken, Filter, Text und den größten Teil des SVG-Feature-Sets während dieser Rasterung korrekt. Drei Warnungen sind wichtig. Externe Ressourcen scheitern unter CORS: SVGs, die externe Bilder (<image href="https://other-domain.com/photo.jpg">) oder externe Schriftarten referenzieren, werden möglicherweise nicht geladen, wenn der Cross-Origin-Server keine passenden CORS-Header zurückgibt, das Canvas wird „tainted" und toBlob wirft einen SecurityError. Bette Bilder als Data-URIs und Schriftarten als @font-face mit Data-URI-src ein, um dies zu vermeiden. SVGs mit <script>-Tags werden nicht ausgeführt, wenn sie als Image geladen werden, der Bilddecoder des Browsers entfernt den Scripting-Kontext aus Sicherheitsgründen. SMIL-Animationen werden abgeflacht zu einem einzelnen Frame bei time=0; wenn das SVG für seinen visuellen Zustand von Animation abhängt, wird das gerasterte PNG es nicht erfassen. Pixelunterschiede zwischen Browsern: Chrome, Firefox und Safari produzieren subtil unterschiedliche gerasterte Ausgaben für dasselbe SVG aufgrund von Unterschieden in ihren jeweiligen Vektor-Renderern; für Produktions-Icons rendere einmal und liefere das PNG aus, statt auf browserspezifische Konvertierung zur Laufzeit zu setzen.

Die richtige Ausgabeauflösung wählen

SVG hat keine inhärente Auflösung, die Wahl liegt bei dir. Häufige Ziele: iOS-App-Store-Listing-Icon 1024x1024; Android-Play-Store-Listing-Icon 512x512 (mit dem im Launcher adaptiven Icon bei 432x432, entworfen innerhalb einer 264x264 Sicherheitszone); PWA-Manifest-Icons 192x192 und 512x512; Favicon historisch 16x16, 32x32, 48x48 (modernes favicon.ico bündelt alle drei Größen; moderne Best Practice liefert icon.svg für Browser, die es unterstützen, plus einen 192x192-apple-touch-icon.png-Fallback); Open-Graph-Social-Karte 1200x630; Twitter-Karte 1200x675; Instagram-Quadrat 1080x1080; Discord-Emoji 128x128; Slack-Emoji 128x128; Druck bei 300 DPI erfordert die 3-fache Zoll-Dimension in Pixel (ein 4-Zoll-Logo-Druck benötigt 1200x1200). Für Retina-Qualitäts-Bildschirmrendering ziele auf das 2-fache der angezeigten Größe, ein 100x100 angezeigtes Icon sollte mit 200x200 exportiert werden, um auf Retina-Bildschirmen scharf zu bleiben.

So verwendest du diesen Konverter

1. Stelle das SVG bereit. Lege eine .svg-Datei in die Upload-Zone oder füge rohes SVG-Markup in den Textbereich ein. Beide Wege funktionieren gleich.
2. Lege die Ausgabeabmessungen fest. Breite und Höhe in Pixeln; der Seitenverhältnis-Sperre-Schalter hält die Proportionen, wenn du eine Dimension änderst. Maximum 8192x8192 (die Canvas-Größengrenze auf den meisten modernen Browsern; manche Hardware begrenzt auf 4096 oder 8192).
3. Wähle einen Hintergrund. Transparent (Standard, bewahrt den Alphakanal des SVG), volles Weiß, volles Schwarz oder eine beliebige benutzerdefinierte Farbe. Nützlich, wenn das Ziel keine Transparenz unterstützt (manche Legacy-Druckkontexte).
4. Konvertieren und herunterladen. Die Konvertieren-Schaltfläche rastert das SVG in der gewählten Größe und zeigt die Vorschau an; Herunterladen speichert das PNG auf deinem Gerät.

Ehrlicher Umfang: Was dieses Werkzeug tut und nicht tut

Dieses Werkzeug rastert ein einzelnes SVG zu einem einzelnen PNG in der gewählten Größe. Es generiert nicht das vollständige Multi-Größen-Icon-Set, das App-Stores erfordern (1024x1024 + 180x180 + 167x167 + 152x152 + 120x120 + 87x87 + 80x80 + 60x60 + 58x58 + 40x40 + 29x29 + 20x20 allein für iOS), dafür verwende ein dediziertes Tool wie RealFaviconGenerator oder App Icon Generator. Es optimiert das resultierende PNG nicht (verwende das SVG-Optimizer-Tool, um zuerst das Quell-SVG zu bereinigen; für PNG-Optimierung verwende einen separaten Kompressor). Es bündelt keine Multi-Größen-favicon.ico-Ausgabe. Es animiert nicht, exportierte PNGs sind Einzelbild, selbst wenn das SVG SMIL-Animation hatte. Für Batch-Generierung vieler Größen aus einem SVG verwende eine CLI wie sharp-cli (Node.js) oder resvg-cli (Rust); die Pro-Größe-Konvertierung, die sie machen, ist dieselbe wie dieses Tool, nur skriptierbar.

Datenschutz: Warum reiner Browser hier wichtig ist

SVG-Dateien enthalten oft proprietäre Marken-Assets, Logos in Arbeit, interne Produktsymbole oder von Designern bereitgestellte Quelldateien unter NDA. Serverseitige Konvertierungsdienste (CloudConvert, Online-Convert, Convertio) laden dein SVG in ihre Infrastruktur, wo es in Logs liegt. Dieses Werkzeug führt die gesamte Rasterungs-Pipeline in deinem Browser über die Canvas-API aus, überprüfe es im Netzwerk-Tab von DevTools, während du auf Konvertieren klickst, oder nimm die Seite offline (Flugmodus) nach dem Laden und der Konverter funktioniert immer noch. Sicher für unveröffentlichte Markenarbeit, interne Produkt-Icons, NDA-gebundene Designerdateien oder jedes SVG, das du nicht auf der Festplatte eines Fremden kopiert haben möchtest.

Häufig gestellte Fragen

Warum SVG in PNG umwandeln, statt SVG direkt zu verwenden?

Für die meisten modernen Browser musst du das nicht. SVG wird nativ in Chrome, Firefox, Safari, Edge und Opera gerendert und ist das richtige Format für die meiste Web-Nutzung. Konvertierung ist nötig, wenn das Ziel SVG nicht unterstützt: Microsoft hat Inline-SVG in Outlook Web und neuem Outlook für Windows im September-Oktober 2025 zurückgezogen; iOS / Android App-Icons müssen PNG sein; Print-on-Demand-Dienste erfordern PNG; Discord- und Slack-Custom-Emoji-Upload erfordert PNG; einige Legacy-CMS lehnen SVG-Uploads immer noch ab. Für diese Kontexte rasterst du einmal und lieferst das PNG aus.

In welcher Auflösung soll ich exportieren?

Stimme mit dem Ziel überein. iOS App Store Listing: 1024x1024. Android Play Store: 512x512 (im Launcher adaptives Icon: 432x432). PWA-Manifest: 192 und 512. Open-Graph-Social-Karte: 1200x630. Instagram-Quadrat: 1080x1080. Für Retina-Bildschirme exportiere mit 2x der angezeigten CSS-Größe, ein 100x100-Icon sollte 200x200-PNG sein, um scharf zu bleiben. Für Druck bedeutet 300 DPI 300 Pixel pro angezeigtem Zoll (ein 4-Zoll-Logo-Druck = PNG 1200x1200). Maximum hier ist 8192x8192, was die moderne Browser-Canvas-Grenze ist.

Warum fehlen meinem SVG nach der Konvertierung Teile?

Drei häufige Ursachen. Externe Ressourcen blockiert durch CORS: Wenn das SVG Bilder oder Schriftarten auf einer anderen Domain referenziert, die keine passenden CORS-Header zurückgibt, wird das Canvas „tainted" und der Export lässt sie stillschweigend fallen. Bette Bilder als Data-URIs und Schriftarten als @font-face mit Data-URI-src ein. Skripte innerhalb des SVG werden nicht ausgeführt: <script>-Tags werden vom Sicherheitsmodell des Bilddecoders des Browsers entfernt, was das Skript generiert, erscheint nicht. SMIL-Animationen rendern bei time=0 (der Startframe); animierter visueller Zustand wird nicht erfasst. Für SVGs, die von JavaScript oder Animation abhängen, rendere zuerst in einem echten Browser und mache einen Screenshot, oder verwende Puppeteer headless.

Bewahrt es Transparenz?

Ja, wenn „Transparent" als Hintergrund ausgewählt ist, behält das PNG den Alphakanal des SVG, mit halbtransparenten Pixeln vollständig erhalten. Wähle eine Vollfarbe (Weiß, Schwarz, benutzerdefiniert), wenn das Ziel keine Transparenz unterstützt oder wenn du eine bestimmte Hintergrundfarbe eingebrannt brauchst (manche Legacy-Druckkontexte).

Kann ich mehrere Größen aus einem SVG generieren?

Nicht mit einem Klick, dieses Werkzeug produziert ein einzelnes PNG pro Konvertierung. Für App-Store-Icon-Set-Generierung (die etwa ein Dutzend Größen, die iOS und Android erfordern) verwende ein dediziertes Tool wie RealFaviconGenerator (Web), App Icon Generator (Web) oder eine CLI wie sharp-cli (Node.js) oder resvg-cli (Rust), die Pro-Größe-Konvertierung, die sie durchführen, ist dieselbe Canvas-artige Rasterung, nur über viele Größen skriptiert.

Werden meine SVG-Dateien hochgeladen?

Nein. Rasterung läuft vollständig in deinem Browser über die Canvas-API. Dein SVG und das resultierende PNG überqueren nie das Netzwerk, überprüfe es im Netzwerk-Tab von DevTools, während du auf Konvertieren klickst, oder nimm die Seite offline (Flugmodus) nach dem Laden und der Konverter funktioniert immer noch. Sicher für unveröffentlichte Markenarbeit, interne Produkt-Icons, NDA-gebundene Designerquelldateien oder jedes SVG, das du nicht auf der Festplatte eines Fremden kopiert haben möchtest.

Verwandte Tools