SVG to PNG Converter

Den SVG-zu-PNG-Konverter verwenden

1. Stelle das SVG bereit: Füge das Markup direkt in das Code-Textfeld ein oder klicke auf "Hochladen", um nach einer .svg-Datei zu suchen. Der Code-Editor und der Datei-Upload verwenden beide dieselbe Rendering-Pipeline.
2. Überprüfe die automatisch erkannten Dimensionen. Das Werkzeug liest viewBox oder explizite width/height-Attribute aus dem Wurzel-<svg> und füllt die Ausgabegrößenfelder mit den entsprechenden Pixeln vor.
3. Lege deine Ausgabegröße fest. Überschreibe die Breite oder Höhe, um in einer beliebigen Auflösung zu rastern. Aktiviere "Verhältnis sperren", um das Seitenverhältnis beizubehalten, wenn du eine Dimension änderst.
4. Klicke auf "In PNG konvertieren". Das SVG wird in eine Daten-URL verpackt, auf einem Canvas in der von dir gewählten Größe gezeichnet und über canvas.toBlob("image/png") exportiert.
5. Lade die PNG-Datei herunter. Die Ausgabe ist ein verlustfreies Raster in den von dir angegebenen Abmessungen.

Wie Vektor zu Raster wird

SVG (W3C Scalable Vector Graphics 1.1 und 2.0) ist ein Vektorformat - die Datei beschreibt Formen (Pfade, Rechtecke, Kreise, Text) als mathematische Definitionen statt als Pixelraster. Die Konvertierung zu PNG erfordert Rasterisierung: jede Form bei einer bestimmten Auflösung auswerten und die resultierenden Pixel zeichnen. Der Browser tut dies kostenlos über den Canvas-2D-Kontext. Wir konstruieren eine Daten-URL data:image/svg+xml;base64,... mit dem SVG-Quellcode, erstellen ein Image-Element mit dieser URL, warten auf das load-Ereignis und zeichnen es dann auf einen Canvas in den von dir gewünschten Zielabmessungen mit ctx.drawImage.

Der Rendering-Schritt verwendet den eingebauten SVG-Renderer des Browsers - dieselbe Engine, die SVG auf jeder Webseite anzeigt - und respektiert den überwiegenden Teil der SVG-Spezifikation: Füllungen, Striche, Verläufe, Muster, clipPaths, Masken, Filtereffekte wie feGaussianBlur und Text-Rendering mit lokal installierten Schriften. Der Canvas erzeugt dann ein PNG, das über die Standard-DEFLATE-Pipeline gemäß der W3C-PNG-Spezifikation kodiert wird. Die Ausgabe ist pixelidentisch mit der Darstellung des SVG in dieser Größe auf der aktuellen Seite.

Wann du eine Rasterkopie benötigst

• Hochladen eines Logos auf eine Plattform, die SVG ablehnt (viele Social-Media-Profilbilder, ältere CMSes, bestimmte Banking-Portale).
• Versenden einer Vektorillustration an einen Stakeholder per E-Mail, wo das SVG im E-Mail-Client des Empfängers möglicherweise nicht sicher gerendert wird.
• Erzeugen von 2x- und 3x-Retina-Assets aus einer einzigen SVG-Quelle, damit dein CSS feste Auflösungs-srcset für ältere Browser verwenden kann.
• Erstellen von Social-Sharing-Vorschaubildern (Open Graph, Twitter Cards) aus einem Vektordesign, da die meisten Plattformen PNG oder JPEG für OG-Bilder erfordern.
• Erzeugen eines Favicons aus einem Vektorlogo - der Favicon-Generator akzeptiert Rastereingaben, also rastern zuerst und übergebe ihm das PNG.
• Erstellen einer gerasterten Sicherungskopie eines SVG, das du bearbeiten möchtest, sodass es ein stabiles Vorher-Bild für visuelle Diffs gibt.

Rasterisierungs-Fallstricke

• Externe Stylesheets werden nicht gerendert. Wenn dein SVG auf eine separate CSS-Datei oder ein @import innerhalb eines <style>-Blocks verweist, wird der Fetch im isolierten Daten-URL-Kontext möglicherweise nicht aufgelöst. Bette alle Stile und Darstellungsattribute ein, bevor du konvertierst.
• Externe Schriften müssen eingebettet werden. SVG-<text> verwendet die auf dem System installierte Schrift. Wenn das Design eine Web-Schrift verwendet, bette sie entweder über eine CSS-@font-face-Regel im SVG ein oder konvertiere Text in deinem Vektoreditor zu Pfaden.
• Cross-Origin-Bildreferenzen schlagen fehl. SVGs, die externe Rasterdateien von einem anderen Ursprung über <image>-Tags referenzieren, lösen Canvas-Tainting aus und blockieren den Export. Backe eingebettete Bilder als Daten-URLs in das SVG ein.
• Sehr große Canvas-Flächen schlagen stumm fehl. Ein einfaches SVG bei 10.000x10.000 Pixeln zu rastern, trifft die Canvas-Flächenbegrenzung des Browsers (ca. 268 Millionen Pixel auf dem Desktop, 16 Millionen auf iOS Safari) und erzeugt ein schwarzes Bild. Bleibe für zuverlässige Ausgabe unter 4096x4096.
• Unscharfe Ausgabe bedeutet eine Diskrepanz. Wenn die Ausgabe weich aussieht, hat das Quell-SVG wahrscheinlich ein internes viewBox, das kleiner als die angeforderte Ausgabe ist - der Browser skaliert die Zwischenbitmap hoch. Gib explizite Breite und Höhe am Wurzel-SVG-Element an, die der Zielauflösung entsprechen.

SVG als Format verstehen

SVG ist eines der wenigen Bildformate, das im Kern menschenlesbares XML ist. Öffne ein SVG in einem Texteditor und du siehst einen Baum von Elementen: <svg> an der Wurzel, dann <rect>, <path>, <circle>, <text> und Gruppen, die sie umhüllen. Das viewBox-Attribut definiert das Koordinatensystem unabhängig von der Ausgabegröße, weshalb SVG ohne Qualitätsverlust auf jede Auflösung skaliert. SVG 1.1 wurde 2003 und 2011 (zweite Ausgabe) veröffentlicht, und SVG 2 ist ein lebendiger W3C-Standard, der moderne CSS-Integration, neue Pfad-Befehle und engere HTML5-Interoperabilität hinzufügt. PNG-Ausgabe aus SVG friert ein, was der Browser zum Zeitpunkt der Konvertierung rendert, sodass dynamische Elemente (Animationen, Skripte) als einzelner Frame erfasst werden.

Browser-Rasterisierer vs. dedizierte Werkzeuge

Für ein einmaliges SVG-zu-PNG in einer bestimmten Größe ist die Browser-Pipeline der schnellste Weg mit solider Genauigkeit. Für Stapelkonvertierung ist rsvg-convert aus librsvg der Shell-Scripting-Standard: rsvg-convert -w 1024 logo.svg -o logo.png rendert hunderte von Dateien pro Sekunde. Der Befehlszeilenmodus von Inkscape ist die vollständigste Option für SVGs, die ungewöhnliche oder nicht-standardmäßige Funktionen verwenden. ImageMagicks magick -density 300 logo.svg logo.png funktioniert, delegiert aber intern an librsvg. Für pixelgenaues Symbol-Rendering über viele Auflösungen hinweg gibt svgexport auf npm Puppeteer in skriptfähiger Form und bietet eine vollständige Browser-Engine.