SVG zu PNG Konverter (auch zu JPG)

Konvertieren Sie eine SVG-Datei oder eingefügten SVG-Code kostenlos in ein PNG- oder JPG-Bild. Wählen Sie genau die Ausgabegröße, die Sie benötigen — alles läuft vollständig in Ihrem Browser ab.

PNG oder JPG — was sollten Sie wählen?

Format	Eigenschaften	Am besten geeignet für
PNG	Verlustfreie Komprimierung ohne Qualitätsverlust, und ein transparenter Hintergrund bleibt vollständig erhalten.	Logos, Icons und Illustrationen, bei denen Sie Transparenz oder gestochen scharfe Kanten benötigen
JPG	Verlustbehaftete Komprimierung, die die Dateigröße klein hält, wobei transparente Bereiche jedoch mit der von Ihnen gewählten Hintergrundfarbe gefüllt werden.	Bilder mit fotografischem Hintergrund, oder wenn eine möglichst kleine Dateigröße im Vordergrund steht

Jedes SVG, das Sie hochladen oder einfügen, wird niemals an einen Server gesendet — die gesamte Konvertierung läuft direkt in Ihrem eigenen Browser ab.

Was ist der SVG-zu-PNG-Konverter?

Der SVG-zu-PNG-Konverter wandelt eine SVG-Datei (Vektorgrafik) oder eingefügten SVG-Code in ein PNG- oder JPG-Bild mit einer von Ihnen gewählten Pixelgröße um. SVG wird häufig für Icons, Logos und Illustrationen verwendet, doch es gibt zahlreiche Situationen — etwa das Hochladen in ein Webformular oder die Anzeige in einer App oder einer älteren Umgebung, die SVG nicht unterstützt —, in denen ein klassisches Bildformat benötigt wird. Dieses Werkzeug überbrückt diese Lücke in wenigen Sekunden, ganz ohne Installation zusätzlicher Software.

Die Konvertierung läuft vollständig clientseitig ab, mithilfe der Canvas-API des Browsers, sodass Ihre SVG-Datei oder Ihr SVG-Code niemals an einen Server übertragen wird. Da SVG ein Vektorformat ist, muss die Pixelgröße beim Export irgendwo festgelegt werden; dieses Werkzeug erkennt einen sinnvollen Standardwert direkt aus dem SVG selbst und lässt Sie diesen anschließend frei anpassen, ganz nach Ihren eigenen Anforderungen.

So wird es verwendet

SVG laden Wählen Sie eine Datei aus (Drag & Drop funktioniert ebenfalls), oder fügen Sie SVG-Code direkt ein.
Ausgabeformat wählen Wählen Sie PNG (behält Transparenz bei) oder JPG (füllt Transparenz mit einer Hintergrundfarbe).
Ausgabegröße anpassen Geben Sie Breite/Höhe direkt ein, oder verwenden Sie die Skalierungsschaltflächen (1x/2x/4x), um beide gleichzeitig zu ändern.
Konvertieren und herunterladen Klicken Sie auf „Konvertieren“, um eine Vorschau zu sehen, und laden Sie das Ergebnis anschließend sofort herunter.

Tipps für die Nutzung

Wenn Ihr SVG keine Breiten-/Höhenangaben oder kein viewBox-Attribut besitzt, beträgt die anfängliche Ausgabegröße standardmäßig 512×512px. Sie können diesen Wert jederzeit auf die gewünschte Größe ändern.
Die Skalierungsschaltflächen (1x/2x/4x) vervielfachen die aus Ihrem SVG erkannte Größe mit einem Klick — praktisch, um Icon-Sets in 2x/4x für Retina- (High-DPI-) Displays zu exportieren.
Wählen Sie PNG, wenn Sie einen transparenten Hintergrund erhalten möchten. JPG besitzt keinen Alphakanal, sodass jeder transparente Bereich mit der von Ihnen gewählten Hintergrundfarbe (standardmäßig Weiß) aufgefüllt wird.
Komplexe Farbverläufe und Filtereffekte in Ihrem SVG werden genau so dargestellt, wie Ihr Browser sie interpretiert. Wenn das SVG auf externe Schriftarten oder Bilder verweist, werden diese nur korrekt angezeigt, wenn Ihr Browser sie tatsächlich laden kann.
Lassen Sie „Seitenverhältnis sperren“ aktiviert, um Breite oder Höhe zu ändern, ohne die Proportionen zu verzerren. Deaktivieren Sie die Option, um Breite und Höhe unabhängig voneinander festzulegen.

Anwendungsfälle

Icons und Logos rastern

Konvertieren Sie ein aus einem Designprogramm exportiertes SVG-Icon in PNG, bevor Sie es in ein System oder eine App einbetten, die SVG nicht unterstützt.

Hochladen in Webformulare

Viele Formulare und Dienste akzeptieren keine SVG-Uploads — konvertieren Sie vorab in PNG/JPG, um dieses Problem zu umgehen.

Mehrere Größen für Retina-Displays exportieren

Nutzen Sie die Skalierungsschaltflächen, um schnell 1x/2x/4x-Versionen für ein hochauflösendes Icon-Set zu erzeugen.

Einfügen in soziale Medien oder Präsentationen

Konvertieren Sie in ein klassisches Bildformat für Plattformen und Präsentationsprogramme, die SVG nicht direkt akzeptieren.

Glossar

SVG (Scalable Vector Graphics): Ein Vektorbildformat, das Formen als Koordinaten und Pfade in XML-Text beschreibt. Es wirkt beim Vergrößern oder Verkleinern niemals verpixelt.
Rastern: Der Vorgang, bei dem eine Vektorgrafik in ein Raster aus Pixeln (ein Rasterbild) mit einer bestimmten Größe umgewandelt wird.
viewBox: Ein SVG-Attribut, das den internen Koordinatenbereich definiert, den der Inhalt einnimmt. Es dient als Ersatzwert für die Abmessungen, wenn Breite/Höhe fehlen.
Alphakanal: Die pro Pixel gespeicherte Transparenzinformation eines Bildes. PNG erhält sie, JPG besitzt keinen Alphakanal, sodass transparente Bereiche bei der Konvertierung mit einer Hintergrundfarbe gefüllt werden.
Canvas API: Die standardmäßige JavaScript-Schnittstelle des Browsers zum Zeichnen und Bearbeiten von Bildern. Dieses Werkzeug rastert SVG ausschließlich über die Canvas API, ohne zusätzliche Bibliothek.

Häufig gestellte Fragen

Wählen Sie PNG, wenn Sie Transparenz erhalten oder gestochen scharfe Kanten benötigen, etwa bei Logos und Icons. Wählen Sie JPG für Bilder mit fotografischem Hintergrund, bei denen eine kleinere Dateigröße wichtiger ist.

Wenn die SVG-Datei Breiten-/Höhenangaben oder ein viewBox-Attribut definiert, wird dieser Wert als Ausgangsgröße verwendet. Wird keines von beiden gefunden, wird standardmäßig 512×512px angenommen. Von dort aus können Sie die Größe frei ändern.

Nein. Die gesamte Konvertierung läuft mithilfe von JavaScript direkt in Ihrem Browser ab, und es wird zu keinem Zeitpunkt etwas an einen externen Server gesendet.

Nein — da SVG ein Vektorformat ist, bleiben die Kanten völlig glatt, egal wie groß die exportierte Pixelgröße gewählt wird (anders als beim Vergrößern eines bereits gerasterten Bildes).

Ein animiertes SVG wird als einzelnes Standbild exportiert. SVGs, die auf externe Schriftarten oder Bilder verweisen, werden nur dann korrekt dargestellt, wenn Ihr Browser diese externen Ressourcen tatsächlich laden kann.

Übrigens – ein SVG ist im Grunde nur eine Textdatei in XML

Anders als PNG oder JPG, die ein Bild als Raster aus einzelnen Pixeln speichern, beschreibt SVG (Scalable Vector Graphics) Formen als mathematische Koordinaten und Pfade, die in reinem XML-Text niedergeschrieben sind. Genau deshalb wirkt eine SVG-Grafik beim Vergrößern oder Verkleinern niemals verpixelt oder ausgefranst, und genau deshalb lässt sich eine SVG-Datei sogar in einem einfachen Texteditor öffnen und Zeile für Zeile lesen. Diese grundlegende Struktur ist auch der Grund, warum SVG bei Logos und Icons, die in vielen unterschiedlichen Größen scharf aussehen müssen, so beliebt ist – von App-Icons über Website-Logos bis hin zu Illustrationen in Präsentationen.

SVG kennt von sich aus überhaupt keinen Begriff von „Auflösung“ — es wird ausschließlich als vektorielle Beschreibung gespeichert, unabhängig von einer konkreten Pixelanzahl. Sobald Sie es in ein klassisches pixelbasiertes Format wie PNG oder JPG umwandeln, muss irgendjemand oder irgendetwas festlegen, mit welchen Pixelmaßen gerendert werden soll. Genau deshalb erlaubt dieses Werkzeug Ihnen, Breite und Höhe selbst zu bestimmen: Das ist eine direkte und unvermeidliche Konsequenz dessen, was SVG seinem Wesen nach ist – eine Beschreibung von Formen, kein fertiges Pixelraster.

In der Praxis lassen viele reale SVG-Dateien die Attribute für Breite und Höhe vollständig weg, oder sie geben sie in relativen Einheiten wie Prozentwerten an. Für solche Fälle greifen Werkzeuge üblicherweise auf das viewBox-Attribut zurück, das den internen Koordinatenbereich definiert, den der SVG-Inhalt einnimmt. Dieses Werkzeug folgt genau dieser gängigen Konvention und verwendet die viewBox als Ersatz für die Pixelmaße, wann immer Breite und Höhe fehlen. So erhalten Sie auch bei unvollständig beschrifteten Dateien ein sinnvolles Ausgangsformat, das Sie anschließend frei anpassen können.

Alle Wissenstexte ansehen