SVG in PNG umwandeln.

Wandle SVG-Dateien oder eingefügten SVG-Code in PNG-Bilder um, in 1x, 2x, 4x oder jeder gewünschten Breite, mit transparentem oder farbigem Hintergrund. Jedes Bild wird in seiner Endgröße aus dem Vektor gezeichnet und bleibt deshalb scharf. Alles läuft in deinem Browser, deine Dateien werden nie hochgeladen.

Läuft in deinem Browser. Nichts, was du hier hinzufügst, wird hochgeladen oder gespeichert.

Stattdessen PNG in SVG umwandeln

So wandelst du SVG in PNG um

Wähle deine SVG-Dateien oder zieh sie in das Feld oben. Du kannst mehrere auf einmal hinzufügen oder SVG-Code einfügen.
Wähle die Größe: 1x, 2x oder 4x der eigenen SVG-Größe oder eine eigene Breite in Pixeln. Voreingestellt ist 2x, das auf den meisten Bildschirmen scharf aussieht.
Wähle den Hintergrund: transparent oder eine Vollfarbe.
Umwandeln, dann jedes PNG einzeln herunterladen oder alle zusammen als ZIP-Datei.

Gut zu wissen:

Scharf in jeder Größe. Das Tool zeichnet den Vektor in der Ausgabegröße, statt eine kleine Bitmap hochzuskalieren. Ein 4x-PNG ist deshalb genauso scharf wie ein 1x-PNG.
Größe und Name. Die Größe ergibt sich aus width und height des SVG oder aus seiner viewBox. Dateien behalten ihren Namen, ergänzt um den Faktor: Aus logo.svg in 2x wird logo@2x.png.
Schriften und verlinkte Bilder. Browser laden keine externen Dateien, wenn sie ein SVG als Bild zeichnen. Text in einer Webschrift kann deshalb in einer anderen Schrift erscheinen, und verlinkte Bilder fehlen. Muss die Schrift genau stimmen, wandle den Text vorher in deinem Designtool in Pfade um.

Wann du ein PNG statt eines SVG brauchst

Für Icons und Logos auf einer Website ist SVG das beste Format, doch viele Stellen nehmen nur Bitmaps an: App-Icons, Vorschaubilder für soziale Netzwerke, E-Mails, Präsentationen, manche CMS-Felder und viele Chat- und Designtools. Behalte das SVG als Quelle und exportiere daraus PNGs, wann immer du sie brauchst, in der Größe, die jede Stelle verlangt.

Hat Codex das SVG für dich gemacht, leg die PNGs in dein Projekt und sag ihm, wohin sie gehören:

Die PNG-Versionen nutzen

Nutze die PNG-Dateien in [public/brand] dort, wo SVG nicht unterstützt wird: [Vorschaubild für soziale Netzwerke, E-Mail-Kopfzeile und README]. Behalte überall sonst auf der Website das SVG und gib jedem <img> eine width und height, damit das Layout nicht springt.

Häufige Fragen

Ist der SVG-zu-PNG-Konverter kostenlos?

Ja. Ohne Anmeldung, ohne Wasserzeichen und ohne Tageslimit.

Werden meine Dateien hochgeladen?

Nein. Dein Browser liest jedes SVG, zeichnet es und speichert das PNG auf deinem Gerät. Die Website zählt nur, dass das Tool genutzt wurde, nie, was du hineingibst.

Warum sieht der Text in meinem PNG anders aus?

Wahrscheinlich nutzt das SVG eine Webschrift. Wenn ein Browser ein SVG als Bild zeichnet, lädt er keine externen Dateien und nimmt eine Ersatzschrift. Wandle den Text in deinem Designtool in Pfade um oder bette die Schrift ins SVG ein und wandle erneut um.

Wie bekomme ich ein PNG mit transparentem Hintergrund?

Lass den Hintergrund auf Transparent, das ist die Voreinstellung. Jeder Bereich, den das SVG nicht füllt, bleibt im PNG transparent.