SVG in PNG umwandeln

Rendern Sie SVG-Dateien direkt im Browser als PNG – in beliebigem Maßstab oder in exakter Pixelgröße. Skripte und externe Links werden entfernt, bevor irgendetwas gezeichnet wird.

Dateien hier ablegen

.svg · bis 10 MB

Dateien auswählen

In PNG umwandeln: So geht’s

1
SVG-Dateien ablegen
Bis zu 100 Dateien auf einmal. Jede Datei wird zuerst daraufhin geprüft, ob sie echtes SVG-Markup enthält – erst dann geht es weiter.
2
Maßstab oder exakte Größe festlegen
Multiplizieren Sie die Eigengröße der Zeichnung mit 0,5 bis 10 oder geben Sie genau die Breite ein, die Sie brauchen – die Höhe folgt dann dem Seitenverhältnis.
3
PNG-Dateien herunterladen
Eine Datei kommt als PNG zurück, mehrere als ZIP. Die Ergebniskarte zeigt, welche Pixelgröße Sie tatsächlich erhalten haben.

Neu gezeichnet statt hochgerechnet

Eine SVG-Datei enthält keine Pixel, sondern Anweisungen zum Zeichnen von Formen. Eine PNG-Datei, die mit 4× gerendert wurde, ist deshalb keine aufgeblasene kleine Grafik: Jede Kurve wird in der größeren Größe neu gezeichnet, und die Kanten bleiben scharf. Dieses Tool nutzt das aus. Vor dem Rendern werden Breite und Höhe am Wurzelelement auf die gewünschte Pixelgröße umgeschrieben. So rastert der Browser die Vektorpfade direkt in der Zielauflösung, statt eine fertige kleine Bitmap auf einem Canvas hochzuskalieren. Der Standardmaßstab 2 ist für den häufigsten Fall gedacht: ein Logo, das für einen gewöhnlichen Bildschirm gezeichnet wurde und auch auf einem Retina-Display bestehen muss. Den Modus mit exakten Pixeln gibt es für Plattformen, die eine bestimmte Größe verlangen, etwa 1024×1024 für ein App-Icon oder 1200×630 für eine Social-Media-Vorschau.

Warum Skripte und externe Links entfernt werden

SVG ist XML, und XML kann mehr transportieren als Zeichnungen. Eine fremde Datei kann ein <script>-Element enthalten, Event-Handler-Attribute wie onload, ein foreignObject mit einem ganzen HTML-Dokument oder Verweise auf Bilder und Schriften auf einem anderen Server. Öffnen Sie eine solche Datei unbedacht, läuft fremder Code in Ihrem Tab, oder ein entfernter Server erfährt unbemerkt, dass und wann Sie sie geöffnet haben. Hier durchläuft jede Datei zuerst DOMPurify mit dem SVG-Profil und danach einen zweiten, eigenen Durchgang. Er entfernt jedes href, xlink:href und CSS-url(), das nicht auf einen Anker in derselben Datei oder auf einen eingebetteten data:-URI zeigt. Als data:-URI eingebettete Schriften und Bilder bleiben erhalten und werden normal dargestellt. Alles Entfernte wird gezählt – so können Sie nachvollziehen, warum ein Teil der Zeichnung leer geblieben ist.

Transparenz und Hintergrund

PNG unterstützt einen Alphakanal. Standardmäßig bleiben deshalb alle Bereiche transparent, die Ihre SVG-Datei nicht bemalt – genau richtig für ein Logo, das später im farbigen Kopfbereich einer Website sitzt. Kann das Ziel keine Transparenz darstellen, wählen Sie Weiß oder eine eigene Farbe. Die Farbe wird in einem Durchgang eingefüllt, bevor die Zeichnung darübergelegt wird – ohne Farbsaum an den Kanten.

Ihre Datei bleibt auf Ihrem Gerät

Einlesen, Bereinigen, Rendern und PNG-Codierung laufen vollständig in diesem Browser-Tab. Nichts wird hochgeladen, nichts gespeichert. Erst die Bereinigung macht es überhaupt sicher, das lokal zu erledigen: Wenn Ihre SVG-Datei die Seite erreicht, kann sie bereits keinen Code mehr ausführen und keine Verbindung ins Netz aufbauen.

Häufige Fragen

Warum wirkt meine PNG-Datei bei hohem Maßstab unscharf?

Das sollte nicht passieren, denn die Vektorgrafik wird in der Zielgröße neu gerendert, nicht gestreckt. Wirkt sie trotzdem weich, enthält die SVG-Datei wahrscheinlich eine eingebettete Bitmap (ein Bild als data:-URI) statt echter Vektorpfade. Eine solche Bitmap hat eine feste Auflösung, und Vergrößern fügt keine Details hinzu. Öffnen Sie die Ausgangsdatei in einem Editor und prüfen Sie, ob die Formen Pfade sind oder ein einzelnes eingebettetes Bild.

Was passiert mit Skripten in meiner SVG-Datei?

Skripte werden vor dem Rendern entfernt, zusammen mit Event-Handler-Attributen wie onload und onclick und jedem foreignObject-Block. Aus der Datei wird nie etwas ausgeführt. Das ist weder optional noch eine Einstellung: Es gibt hier keinen Codepfad, der eine SVG-Datei ohne vorherige Bereinigung rendert.

Warum fehlen die externen Bilder aus meiner SVG-Datei?

Jeder Verweis auf http://, https:// oder eine protokollrelative //-Adresse wird entfernt, denn ein Abruf würde dem Server verraten, dass Sie die Datei geöffnet haben. Erhalten bleiben nur Verweise auf eine id im selben Dokument und eingebettete data:-URIs. Brauchen Sie diese Bilder im Ergebnis, betten Sie sie zuerst als data:-URIs in die SVG-Datei ein und wandeln Sie sie dann um.

Wie bekomme ich eine exakte Pixelgröße?

Stellen Sie die Ausgabegröße auf „Exakte Pixel“ und geben Sie die Breite ein. Lassen Sie die Höhe auf 0, wird sie aus dem Seitenverhältnis der Zeichnung berechnet, und nichts wird gestaucht. Geben Sie stattdessen eine Höhe ein, wenn Sie das Bild bewusst auf ein festes Format strecken wollen. Beide Seiten sind auf 16384 Pixel begrenzt – das ist die Grenze eines Canvas im Browser.

Bleibt die Transparenz erhalten?

Ja, standardmäßig. Unbemalte Bereiche haben in der PNG-Datei den Alphawert 0. Brauchen Sie stattdessen einen deckenden Hintergrund, wählen Sie unter „Hintergrund“ Weiß oder eine eigene Farbe – manche älteren Programme und E-Mail-Clients zeigen transparente PNG-Bereiche schwarz an.

Was passiert, wenn meine SVG-Datei keine viewBox hat?

Dann bestimmen die Attribute width und height die Eigengröße. Fehlen auch sie, gilt der Standardwert der SVG-Spezifikation von 300×150, und der Maßstab wird darauf angewendet. Das ist dieselbe Größe, die ein Browser der Datei geben würde – das Ergebnis entspricht also dem, was Sie beim direkten Öffnen der SVG-Datei sehen.

Wie viele Dateien kann ich auf einmal umwandeln?

Bis zu 100, je Datei bis 10 MB und zusammen bis 200 MB. Alle verwenden dieselben Einstellungen und werden nacheinander gerendert. Scheitert eine Datei, bricht das den Rest nicht ab, und alles Gelungene kommt in einem einzigen ZIP zurück.

Wird die Datei auf einen Server hochgeladen?

Nein. Bereinigung und Rendern laufen beide in Ihrem Browser. Es gibt kein Hochladen, keine Warteschlange und keine gespeicherte Kopie – den Tab zu schließen ist schon die ganze Aufräumarbeit.

Anleitungen

Ein Favicon erstellen, das auch auf Retina-Displays scharf bleibtLange reichte eine einzige kleine favicon.ico für das ganze Web. Das ist seit Jahren vorbei, und dass sie trotzdem oft als ausreichend gilt, ist der Grund für so viele unscharfe Icons.