SVG zu PNG Konverter

So konvertieren Sie SVG zu PNG

Fuegen Sie Ihren SVG-Code in das Eingabefeld ein, passen Sie optional den Skalierungsfaktor an und klicken Sie auf "Zu PNG konvertieren". Das Tool parst das SVG, rendert es auf ein HTML5 Canvas-Element und exportiert das Canvas als PNG-Bild. Die Vorschau zeigt das konvertierte Bild, und Sie koennen es mit einem einzigen Klick herunterladen. Der gesamte Prozess findet in Ihrem Browser statt. Ihr SVG-Code wird niemals an einen Server uebertragen, was dieses Tool sicher fuer proprietaere Logos, Icons und Design-Assets macht.

Der Skalierungsfaktor steuert die Ausgabeaufloesung. Eine Skalierung von 1x erzeugt ein PNG in den nativen Abmessungen des SVG, wie sie durch seine viewBox oder width/height-Attribute definiert sind. Eine Skalierung von 2x verdoppelt die Abmessungen, was ideal fuer Retina-Displays und High-DPI-Bildschirme ist. Hoehere Skalierungen erzeugen groessere, detailliertere Bilder, die fuer Druckmaterialien geeignet sind. Das Statistikfeld zeigt die Ausgabeabmessungen, die Anzahl der SVG-Elemente und die urspruengliche SVG-Dateigroesse, sodass Sie die Komplexitaet und Groesse Ihrer Grafik abschaetzen koennen.

SVG vs. PNG: Wann welches Format verwenden

SVG und PNG dienen unterschiedlichen Zwecken, und das Verstaendnis, wann welches Format zu verwenden ist, ist wichtig fuer Web-Performance und visuelle Qualitaet. SVG ist ein Vektorformat, das Formen mathematisch mit XML beschreibt. Es skaliert auf jede Groesse ohne Qualitaetsverlust, was es perfekt fuer Logos, Icons, Illustrationen, Diagramme und jede Grafik macht, die bei mehreren Groessen gestochen scharf aussehen muss. SVG-Dateien sind fuer einfache Grafiken oft kleiner als entsprechende Rasterbilder und koennen mit CSS gestaltet, mit JavaScript animiert und mit korrektem Markup barrierefrei gemacht werden.

PNG ist ein Rasterformat, das Bilder als Pixelraster speichert. Es unterstuetzt verlustfreie Komprimierung und Transparenz, was es zum Standardformat fuer Screenshots, komplexe Bilder mit Text und Grafiken macht, die in Umgebungen angezeigt werden muessen, die SVG nicht unterstuetzen. PNG-Bilder haben eine feste Aufloesung, sodass sie bei Skalierung ueber ihre urspruenglichen Abmessungen hinaus unscharf werden koennen. Fuer Fotografien bieten JPEG oder WebP typischerweise bessere Komprimierung, aber PNG bleibt die beste Wahl, wenn Transparenz oder pixelgenaues Text-Rendering erforderlich ist.

Wie die Canvas API-Konvertierung funktioniert

Der Konvertierungsprozess nutzt den integrierten SVG-Renderer des Browsers und die HTML5 Canvas API. Zunaechst wird das SVG-Markup in eine Daten-URL konvertiert. Ein Image-Element wird mit dieser Daten-URL als Quelle erstellt. Sobald das Bild geladen ist, wird es in der angegebenen Skalierung auf ein Canvas-Element gezeichnet. Die toDataURL('image/png')-Methode des Canvas exportiert dann die gerenderten Pixel als base64-kodiertes PNG. Dieser Ansatz nutzt die native SVG-Rendering-Engine des Browsers, die komplexe SVG-Funktionen einschliesslich Verlaeufen, Filtern, Text, Clipping-Pfaden und eingebetteten Schriftarten verarbeitet.

Einschraenkungen und Hinweise

Einige SVG-Funktionen werden je nach Browser moeglicherweise nicht perfekt konvertiert. Externe Ressourcen, die im SVG referenziert werden, wie verlinkte Stylesheets, ueber @font-face geladene Schriftarten oder per URL referenzierte Bilder, sind waehrend des Canvas-Renderings aufgrund von Cross-Origin-Beschraenkungen moeglicherweise nicht verfuegbar. Fuer beste Ergebnisse betten Sie alle Ressourcen direkt in das SVG ein, indem Sie Inline-Styles, eingebettete Schriftarten und Daten-URIs fuer Bilder verwenden. SVGs, die auf CSS-Animationen oder JavaScript-Interaktionen angewiesen sind, werden als statischer Schnappschuss ihres Anfangszustands erfasst.

Haeufig gestellte Fragen

Warum SVG zu PNG konvertieren?

Nicht alle Plattformen unterstuetzen SVG. E-Mail-Clients, einige Social-Media-Plattformen und aeltere Software erfordern Rasterformate wie PNG. PNG bewahrt Transparenz, was es ideal fuer Logos auf verschiedenen Hintergruenden macht.

Ist dieses Tool privat?

Ja. Alles laeuft in Ihrem Browser mit der Canvas API. Es werden keine Daten an einen Server gesendet. Ihr SVG-Code und die konvertierten Bilder verbleiben vollstaendig auf Ihrem Geraet.

Welche Skalierung sollte ich verwenden?

1x fuer Standarddisplays, 2x fuer Retina- und High-DPI-Bildschirme, 3x fuer Druck. Hoehere Skalierungen erzeugen groessere Dateien. Waehlen Sie basierend auf dem Verwendungszweck des PNG.

Kann ich animierte SVGs konvertieren?

Das Tool erfasst einen statischen Schnappschuss des SVG-Anfangszustands. SMIL- und CSS-Animationen werden in der PNG-Ausgabe nicht beibehalten. Fuer animierte Inhalte erwaegen Sie GIF- oder Videoformate.

Welche Browser unterstuetzen dieses Tool?

Alle modernen Browser mit Canvas API-Unterstuetzung: Chrome, Firefox, Safari, Edge und Opera auf Desktop und Mobilgeraeten. Verwenden Sie die neueste Version fuer beste Ergebnisse.