Wandle SVG in PNG um – in jeder Größe, direkt im Browser
Zieh SVG-Dateien hinein oder füge SVG-Code ein, wähle eine Skalierung oder eine Breite in Pixeln und erhalte scharfe PNGs, deren Transparenz erhalten bleibt. Jedes SVG wird in deinem eigenen Browser gezeichnet, es wird also nichts hochgeladen.
- Kein Upload – läuft in deinem Browser
- Kostenlos, ohne Konto
- Liest SVG-Dateien oder eingefügten Code
- Bis zu 20 Dateien, je 20 MB
Größe
1× ist die Größe, die das SVG selbst angibt. Jede Datei wird mit den Einstellungen umgewandelt, die bei ihrem Start gelten – eine Änderung hier gilt also auch für Dateien, die noch in der Liste warten.
Skalierung
Jede Zahl über 0, etwa 1,5 oder 0,5.
Oder eine Seite in Pixeln festlegen
Gib eine Breite oder eine Höhe an; die andere Seite richtet sich nach der Form des jeweiligen SVG.
Größte Ausgabe: 16384 px pro Seite und höchstens 8192 × 8192 px Fläche.
SVG-Dateien hierher ziehen oder klicken zum Auswählen
Akzeptiert: SVG.
Bis zu 20 Dateien, 20 MB pro Datei
So wandelst du SVG in PNG um
Größe wählen
Wähle eine Skalierung wie 2× oder leg eine Breite oder Höhe in Pixeln fest. 1× ist die Größe, die das SVG selbst angibt, und die Tabelle unten listet gängige Breiten für Icons und Bilder.
SVG-Dateien oder Code hinzufügen
Zieh bis zu 20 SVG-Dateien hinein oder öffne „Code einfügen“ und füge das Markup ein. Jedes wird nacheinander in der gewählten Größe gezeichnet, und du kannst währenddessen weitere hinzufügen.
PNGs herunterladen
Speichere jedes PNG einzeln, mit seiner Pixelgröße im Namen, oder alle zusammen als ein ZIP. Was im SVG transparent war, ist auch im PNG noch transparent.
SVG-in-PNG-Größen für Icons und Bilder
Zuerst kommen Favicons und App-Icons, die kleinen Größen, bei denen die Transparenz und die scharfen Kanten eines PNG am meisten zählen, danach größere Breiten für Webseiten und Druck. Das sind typische Verwendungen, keine Vorgaben einer Plattform – prüf also die Größe, die der Ort verlangt, an den du hochlädst. Wähl eine Zeile und der Konverter übernimmt ihre Breite.
| Breite | Typische Verwendung | Diese Breite im Konverter übernehmen |
|---|---|---|
| 16 px | Die klassische Favicon-Größe für den Browser-Tab. | |
| 32 px | Ein Favicon für hochauflösende Bildschirme und Lesezeichenleisten. | |
| 48 px | Eine größere Favicon-Größe, die oft für Desktop-Verknüpfungen mitgeliefert wird. | |
| 180 px | Die übliche Größe eines Home-Bildschirm-Icons auf iPhone und iPad (apple-touch-icon). | |
| 192 px | Ein gängiges Icon im Manifest einer Web-App, angezeigt auf Android-Startbildschirmen. | |
| 512 px | Das große Icon im Manifest einer Web-App, das auch bei der Installation und für den Ladebildschirm verwendet wird. | |
| 1024 px | Ein scharfes Logo oder eine Illustration für Webseiten, Dokumente und Folien. | |
| 2048 px | Grafiken für hochauflösende Displays und kleine Drucke. | |
| 4096 px | Große Drucke und Banner. Bei dieser Breite überschreitet nur ein SVG, das mehr als viermal so hoch wie breit ist, das Größenlimit. |
16 px
Die klassische Favicon-Größe für den Browser-Tab.
32 px
Ein Favicon für hochauflösende Bildschirme und Lesezeichenleisten.
48 px
Eine größere Favicon-Größe, die oft für Desktop-Verknüpfungen mitgeliefert wird.
180 px
Die übliche Größe eines Home-Bildschirm-Icons auf iPhone und iPad (apple-touch-icon).
192 px
Ein gängiges Icon im Manifest einer Web-App, angezeigt auf Android-Startbildschirmen.
512 px
Das große Icon im Manifest einer Web-App, das auch bei der Installation und für den Ladebildschirm verwendet wird.
1024 px
Ein scharfes Logo oder eine Illustration für Webseiten, Dokumente und Folien.
2048 px
Grafiken für hochauflösende Displays und kleine Drucke.
4096 px
Große Drucke und Banner. Bei dieser Breite überschreitet nur ein SVG, das mehr als viermal so hoch wie breit ist, das Größenlimit.
Höhen stehen nicht dabei, weil jedes SVG seine eigene Form behält: Ein quadratisches Icon wird quadratisch, und ein Logo, das doppelt so breit wie hoch ist, wird halb so hoch wie die Breite.
Was bestimmt, wie das PNG aussieht
Ein SVG hat keine Pixel, bis etwas es zeichnet. Drei Dinge bestimmen, wie das PNG aussieht: die Größe, in der es gezeichnet wird, wie du diese Größe festlegst, und die Schriften, mit denen sein Text gezeichnet wird.
SVG-FormenPNG-Pixel Formen rein, Pixel raus
Ein SVG beschreibt Formen, deshalb ist es in jeder Größe scharf. Ein PNG ist ein festes Pixelraster: Vergrößerst du es später, werden seine Kanten weich oder pixelig. Die Größe, in der du umwandelst, ist das Schärfste, was das PNG je sein wird.
Wandle in der größten Größe um, in der du es zeigen wirst, statt das PNG hinterher zu vergrößern.
SkalierungBreite Eine Skalierung oder eine exakte Breite
Eine Skalierung multipliziert die Größe, die das SVG angibt, ein 24 × 24 großes Icon wird bei 4× also zu 96 × 96. Eine Breite oder Höhe legt diese Seite in Pixeln fest, und die andere Seite richtet sich nach der Form des SVG, egal welche Größe es angibt.
Nimm eine Skalierung für ein Icon-Set, das auf demselben Raster gezeichnet ist; nimm eine Breite, wenn das PNG einen bekannten Platz füllen muss.
Schrift vorhandenSchrift fehlt Text und Schriften
Text in einem SVG ist nur eine Folge von Buchstaben, bis eine Schrift ihn zeichnet, und das PNG behält Pixel für Pixel die Schrift, die ihn gezeichnet hat. Verwendet wird eine auf diesem Gerät installierte oder im SVG eingebettete Schrift; eine Schrift, auf die das SVG im Web verweist, wird nicht geladen, deshalb springt eine andere ein.
Für ein Logo oder Icon mit Schrift wandle den Text in deinem Designprogramm in Pfade um, bevor du das SVG exportierst.
Text und Größe richtig hinbekommen
Die meisten Überraschungen kommen vom Text. Das SVG wird so gezeichnet, wie ein Browser ein SVG-Bild anzeigt: Eine auf diesem Gerät installierte Schrift wird verwendet, ebenso eine Schrift, die als Daten im SVG eingebettet ist. Eine Schrift, auf die das SVG nur verweist, etwa über ein Webfont-Stylesheet, wird nicht abgerufen, deshalb weicht der Text auf eine andere Schrift aus und kann breiter oder schmaler werden oder anders umbrechen.
In Pfade umgewandelter Text hat dieses Problem nie. Wandle den Text vor dem Export aus deinem Designprogramm in Pfade um oder bette die Schrift ein. Bilder, auf die das SVG verweist, werden aus demselben Grund übersprungen, und die Zeile der Datei in der Liste sagt es dir, wenn das passiert.
PNG behält die Transparenz, und genau die braucht ein Logo oder Icon, das auf unterschiedlichen Hintergründen sitzt. Wenn der Ort, an den du hochlädst, ein JPG will oder die transparenten Bereiche eine einheitliche Farbe bekommen sollen, wandle das SVG stattdessen in JPG um und wähle dort die Hintergrundfarbe.
Eine detailreiche Illustration in großer Größe kann ein PNG von mehreren Megabyte ergeben, weil PNG jedes Pixel exakt speichert. Muss es unter ein Upload-Limit kommen, komprimiere es auf eine Zieldateigröße, nachdem du es umgewandelt hast.
Grenzen, die du kennen solltest
- Liest SVG-Dateien und eingefügten SVG-Code: bis zu 20 pro Stapel, 20 MB pro Datei oder eingefügtem Code.
- Das PNG kann bis zu 16384 px pro Seite und 8192 × 8192 px Fläche groß sein. Eine größere Angabe wird abgelehnt, bevor irgendetwas gezeichnet wird.
- Aus einem animierten SVG wird ein einziger Moment als Standbild, den der Browser auswählt. Die Animation bleibt nicht erhalten.
- Ein SVG mit HTML darin (ein foreignObject-Element) lässt sich in Chrome, Edge oder Safari nicht als PNG speichern. Firefox kann es speichern.
Häufige Fragen zu SVG in PNG
Werden meine SVG-Dateien auf einen Server hochgeladen?
Nein. Jedes SVG wird in deinem Browser gelesen, gezeichnet und als PNG gespeichert, und keine Datei und kein Code wird hochgeladen, gespeichert oder verschickt. Die Seite lädt unterwegs eigenen Code nach, etwa die ZIP-Bibliothek beim ersten ZIP-Download, aber deine SVGs sind daran nie beteiligt. Auch Bilder und Schriften, auf die ein SVG verweist, werden nicht abgerufen.
Warum sieht der Text in meinem PNG anders aus?
Text wird im Moment der Umwandlung mit einer Schrift gezeichnet. Eine auf diesem Gerät installierte oder im SVG eingebettete Schrift wird verwendet, aber eine Schrift, auf die das SVG im Web verweist, wird nicht geladen, deshalb springt eine Ersatzschrift ein. Für exakte Schrift wandle den Text vor dem Export des SVG in Pfade um oder bette die Schrift ein.
Wie bekomme ich ein hochauflösendes PNG aus einem SVG?
Wähle eine größere Skalierung wie 4× oder gib die benötigte Breite in Pixeln ein. Das SVG wird in dieser Größe neu gezeichnet, deshalb bleibt das PNG in jeder Größe bis 16384 px pro Seite und 8192 × 8192 px Fläche scharf. Ein kleines PNG nachträglich zu vergrößern bringt diese Details nicht zurück.
Behält das PNG einen transparenten Hintergrund?
Ja. Alles, was das SVG transparent lässt, bleibt im PNG transparent, und dahinter wird nichts gemalt. Wenn du stattdessen einen einfarbigen Hintergrund brauchst, nimm den SVG-in-JPG-Konverter, dort wählst du die Farbe.
Warum bekomme ich einen Fehler wegen HTML-Inhalt?
Das SVG enthält ein foreignObject-Element, das HTML in die Zeichnung einbettet. Chrome, Edge und Safari erlauben einer Webseite nicht, eine Zeichnung damit zu speichern, deshalb wird die Umwandlung dort blockiert, während Firefox es erlaubt. Ersetze in anderen Browsern den HTML-Teil durch SVG-Text oder -Formen und füge die Datei erneut hinzu.
Kann ich SVG-Code ohne xmlns-Attribut einfügen?
Ja. Code, der aus dem HTML einer Webseite kopiert wurde, hat oft kein xmlns-Attribut, das eine eigenständige SVG-Datei braucht. Lässt sich eingefügter Code nicht als eigenständiges SVG lesen, liest der Konverter ihn als HTML, nimmt das erste SVG, das er findet, und ergänzt, was fehlt – und die Zeile vermerkt, dass er das getan hat.
Kann ich mehrere SVGs auf einmal in PNG umwandeln?
Ja. Füge bis zu 20 Dateien pro Stapel hinzu, je 20 MB, und sie werden nacheinander mit denselben Einstellungen umgewandelt. Eingefügter Code landet in derselben Liste. Lade jedes PNG einzeln oder alle zusammen als ein ZIP herunter.
Was du als Nächstes tun kannst
- SVG in JPGBrauchst du ein JPG oder eine Vollfarbe hinter der Grafik? Wandle dasselbe SVG in JPG um.
- Bildformat konvertierenMach aus den PNGs WebP oder AVIF für eine leichtere Webseite.
- Bild komprimierenPNG zu schwer für ein Upload-Limit? Komprimiere es auf eine Zieldateigröße.
- Bildgröße ändernBrauchst du das PNG auf einer exakten Fläche, etwa als aufgefülltes Quadrat? Ändere seine Größe.
- Bild hochskalierenHast du nur ein kleines PNG und nicht das SVG? Vergrößere es, ohne dass die Kanten weich werden.
Wandle dein SVG jetzt in PNG um
Wähle eine Größe, füge deine SVGs hinzu oder den Code ein und lade scharfe PNGs herunter. Nichts verlässt dieses Gerät.