Konvertieren Sie Vektor-SVG-Dateien in hochwertige Raster-PNG-Bilder. Passen Sie den Ausgabemaßstab und die Hintergrundfarbe ganz einfach in Ihrem Browser an.
Unterstützt bis zu 50 MB
SVG (Scalable Vector Graphics) beschreibt Bilder als eine Reihe geometrischer Grundelemente – Pfade, Formen, Text, Farbverläufe – die sich ohne Qualitätsverlust auf jede beliebige Größe skalieren lassen. PNG speichert ein einzelnes rechteckiges Pixelraster mit einer festen Auflösung. Das Konvertieren von SVG in PNG ist ein Rasterisierungsschritt: Die Zeichenanweisungen des SVG werden bei einer ausgewählten Pixelgröße ausgewertet und die resultierende Bitmap wird als PNG codiert. Die Ausgabe sieht in der von Ihnen angegebenen Größe gestochen scharf aus, verpixelt sich jedoch, wenn sie vergrößert wird.
Dieser Konverter rendert SVG mithilfe der integrierten SVG-Engine des Browsers. Das SVG wird in ein Bildelement geladen, mit den gewählten Ausgabeabmessungen auf eine HTML5-Leinwand gezeichnet und über canvas.toBlob als PNG exportiert. Da der Browser die Rasterung vornimmt, werden komplexe SVG-Funktionen – Verläufe, Filter, Masken, Animationen als statischer Rahmen – genauso gerendert wie auf einer echten Webseite.
Die wichtigste Entscheidung bei der SVG-zu-PNG-Konvertierung ist die Zielgröße. SVG ist auflösungsunabhängig. Wenn Sie also eine PNG-Größe wählen, die der tatsächlichen Nutzung entspricht, wird eine Überbereitstellung (riesige Dateien für Symbole in Miniaturgröße) und eine Unterbereitstellung (verschwommene Ausgabe bei späterer Skalierung) vermieden. Gängige Ziele: 32×32 oder 64×64 für Symbole, 256×256 oder 512×512 für Logos, 1024×1024 für Heldengrafiken, 2048×2048 für Assets in Retina-Qualität.
SVG ist wunderbar für das Web und moderne Designtools, aber für viele andere Kontexte schrecklich. E-Mail-Clients rendern SVG inkonsistent; Einige blockieren es als Sicherheitsrisiko. Older office software, certain CMSes, third-party services, and almost all photo print pipelines do not accept SVG at all. Durch die Konvertierung in PNG entsteht ein allgemein akzeptiertes Raster, das in der gewählten Größe identisch aussieht.
PNG lässt sich auch zuverlässig in Office-Dokumente, Dia-Decks und PDFs einbetten, ohne vom SVG-Renderer des Empfängers abhängig zu sein. Für Logos und Grafiken, die auf vielen Plattformen einheitlich angezeigt werden müssen, ist PNG die sicherere Wahl – auch wenn es die Auflösungsunabhängigkeit verliert, die SVG überhaupt attraktiv macht.
Wählen Sie Ihre Zielgröße und rendern Sie. Der Browser übernimmt die Rasterung.
SVG (W3C-Empfehlung) ist ein XML-basiertes Vektorformat mit Elementen für Pfade, Grundformen (Rechteck, Kreis, Ellipse, Linie, Polygon, Polylinie), Text, Farbverläufe (linearGradient, radialGradient), Filter, Masken und Clippfade. Der Browser analysiert das XML, erstellt ein DOM, wendet CSS an und rastern das Ergebnis beim Rendern der Seite.
Dieser Konverter lädt das SVG in ein HTMLImageElement (das den normalen SVG-als-Bild-Rendering-Pfad des Browsers auslöst) und zeichnet es dann über drawImage auf eine Leinwand. Die Leinwand wird mit canvas.toBlob('image/png') als PNG exportiert. Die genauen Pixel in der Ausgabe stimmen mit denen überein, die das SVG in einer Browser-Registerkarte in derselben Größe rendern würde.
Randfälle: SVG mit ForeignObject wird nicht immer unterstützt, wenn es über das Image-Element verwendet wird. SVG, das auf externe Ressourcen verweist (xlink:href auf eine andere Domäne), kann aufgrund von CORS möglicherweise nicht geladen werden. SMIL-Animationen und JavaScript-gesteuerte Animationen werden nur als Anfangsbild gerendert.