Zum Hauptinhalt springen
ToolsByUs

SVG zu PNG

SVG zu PNG rendert Vektorgrafiken in eine Bitmap in jeder Pixelgröße, direkt in Ihrem Browser. Die Zeichnung wird von der Vektor-Engine des Browsers selbst in genau der Größe neu gerastert, die Sie verlangen, sodass ein 4×-Export wirklich 4× scharf ist statt einer hochskalierten Kopie eines kleineren Renderns.

Nur lokal
Breite
Skalierung
Format
SVG-Code
249 B5 ZeilenZ. 1, Sp. 1
Vorschau512 × 512 · Quelle 64×64

Wird erstellt…

Wie funktioniert SVG zu PNG?

Ein SVG hat keine Pixel. Es hat einen viewBox, eine Menge Formen und eine Menge Regeln, um diese Formen in Pixel zu verwandeln – und die Regeln wendet der an, der es gerade rendert, in der Größe, nach der gerade gefragt wird. Darin liegt der ganze Wert der Konvertierung: Der Browser rastert die Vektoren in Ihrer Zielauflösung, sodass 1024 Pixel einer 64-Pixel-Zeichnung wirklich 1024 Pixel Detail sind statt einer 16×-Vergrößerung eines 64-Pixel-Renderings.

Die Größenfrage, die nicht immer zu beantworten ist

Eine Zeichnung kann width="100%" deklarieren, nur einen viewBox deklarieren oder gar nichts deklarieren. Alle drei Varianten sind gültig, und keine sagt dem Renderer, welche Pixelgröße er verwenden soll. Deshalb wird der viewBox gelesen, wenn es keine brauchbaren Attribute gibt, das Seitenverhältnis stammt aus ihm, und wenn es nichts zu lesen gibt, sagt das Tool, welchen Wert es erfunden hat, statt still zu raten.

Was die Reise nicht übersteht, und warum

Die Zeichnung wird als Bild geladen, was sie zu einem isolierten Dokument macht. Skripte darin laufen nie – das ist die Sicherheitseigenschaft, die das Angebot überhaupt erst sicher macht – und ebenso wenig alles, was einen Browsing-Kontext braucht:

  • Externe Referenzen laden nicht. <image href="photo.png">, ein @import in einem <style>, eine Webfont von einem CDN: alles verworfen. Ein Logo, das von einer entfernten Schrift abhängt, rendert in einer Ersatzschrift.
  • foreignObject rendert inkonsistent. Manche Engines zeichnen das HTML darin, andere lassen es leer.
  • CSS-Custom-Properties aus der Seite erreichen ihn nicht. currentColor löst sich zur Anfangsfarbe auf, die meist Schwarz ist.

Das Mittel gegen das Erste ist, die Assets vor dem Konvertieren in das SVG einzubetten – in den meisten Build-Pipelines eine Ein-Zeilen-Änderung, sonst eine manuelle Bearbeitung.

Wahl des Formats

PNG für alles mit Transparenz oder Flachfarben, also die meisten Vektorgrafiken. WebP, wenn die Datei auf eine Website soll und Sie die kleinere wollen – die Unterstützung ist inzwischen universell. JPEG nur, wenn der Hintergrund deckend ist und die Zeichnung fotografischen Charakter hat, denn es hat keinen Alphakanal und eine transparente Canvas, als JPEG kodiert, wird schwarz.

SVG

<svg viewBox="0 0 64 64" width="64" height="64">…</svg>

PNG

drawing-512.png
512 × 512 pixels
transparent background
9.4 KB

Welche Optionen und Sonderfälle unterstützt SVG zu PNG?

Technische Referenz und Optionen
ParameterTypStandardVerhalten & Sonderfälle
BreitePixel512Die Ausgabebreite. Die Höhe folgt dem Seitenverhältnis der Zeichnung selbst, das aus dem viewBox stammt – eine 2:1-Zeichnung mit 512 Breite ist also 256 hoch.
Skalierung1× | 2× | 3× | 4×1×Multipliziert die Breite. Nützlich für ein Retina-Asset: 512 bei 2× sind 1024 Pixel, genau das, was ein @2x-Dateiname enthalten soll.
FormatPNG | WebP | JPEGPNGPNG erhält Transparenz und ist verlustfrei. WebP ist bei gleicher Qualität kleiner. JPEG hat überhaupt keinen Alphakanal, daher wird ein transparenter Hintergrund vor dem Kodieren deckend gefüllt.
Hintergrundtransparent | FarbetransparentTransparent für PNG und WebP. Alles andere malt zuerst die Farbe – bei JPEG zwingend nötig und sinnvoll, wenn die Zeichnung eine helle Seite hinter sich annimmt.
Intrinsische GrößeerkanntAttribute, dann viewBoxWird aus width/height gelesen, mit dem viewBox als Rückfallebene. Existiert beides nicht, sagt das Tool es, denn die dann verwendete Größe ist eine Erfindung statt die der Zeichnung.
Externe Assetswerden nicht geladenverworfenVerlinkte Bilder, Webfonts und importierte Stylesheets lösen sich im Bildkontext nicht auf. Betten Sie sie vorher in das SVG ein, wenn die Zeichnung von ihnen abhängt.
Skriptelaufen nie—Skript innerhalb des SVG wird nicht ausgeführt. Das ist eine Sicherheitseigenschaft, keine Einschränkung, und der Grund, warum die Zeichnung als Bild geladen statt in die Seite injiziert wird.
AusgabelimitPixel4096 × 4096Über etwa 16 Megapixel hinaus schlägt die Canvas-Zuteilung auf einem Telefon fehl, statt nur langsam zu sein, daher wird der Export mit einer Meldung abgelehnt, statt eine leere Datei zu erzeugen.

Häufig gestellte Fragen

Wird das PNG bei 4× scharf?

Ja, und genau darin unterscheidet es sich vom Skalieren. Das SVG geht in der Ziel-Pixelgröße an den Browser, sodass die Vektor-Engine jede Kurve in dieser Auflösung rastert. Eine kleinere Version hochzuskalieren würde zwischen vorhandenen Pixeln interpolieren und weiche Kanten erzeugen; hier entsteht neues Detail. Das Einzige, das es begrenzt, ist der Aufbau der Zeichnung – ein Strich von genau einer Einheit wird dünner, je größer die Canvas wird.

Meine Webfont wurde nicht gerendert. Warum?

Weil die Zeichnung als Bild geladen wird und ein Bild ein isoliertes Dokument ist: Es kann nirgendwo eine Schrift, ein Bild oder ein Stylesheet abrufen. Ein entferntes @font-face wird verworfen, und der Text fällt auf eine Systemschrift zurück. Um den Schriftzug zu erhalten, wandeln Sie den Text in Ihrem Editor in Konturen um oder betten die Schrift als base64-Daten-URI in das SVG ein, bevor Sie konvertieren.

Warum ist mein transparentes SVG in der JPEG-Ausgabe schwarz?

Weil JPEG keinen Alphakanal hat. Eine frische Canvas ist transparent, und ein transparenter Pixel hat nichts zu kodieren, also wird er schwarz – die mit Abstand häufigste Beschwerde über jeden SVG-zu-JPEG-Konverter. Genau deshalb malt die Hintergrundoption hier zuerst eine Farbe. Wenn Sie Transparenz brauchen, nehmen Sie PNG oder WebP.

In welcher Größe soll ich exportieren?

In der, in der es angezeigt wird, multipliziert mit dem Device Pixel Ratio der Bildschirme, auf denen es erscheinen soll. Ein 24-Pixel-Icon auf einem 2×-Display will eine 48-Pixel-Datei. Eine Hero-Illustration, die 800 CSS-Pixel auf einem Retina-Bildschirm spannt, will 1600. Bei 4096 zu exportieren, „zur Sicherheit“, kostet bei jedem Seitenaufruf Bandbreite und bringt nichts, was eine richtig dimensionierte Datei nicht schon hätte.

Das Tool sagt, es habe eine Größe erfunden. Was bedeutet das?

Dass das SVG weder width noch height noch viewBox hat, es also keine Möglichkeit gibt, seine Form zu kennen. 512×512 wird angenommen, damit der Export etwas erzeugt statt zu scheitern, und die Oberfläche nennt den verwendeten Wert, damit Sie die Breite selbst setzen können. Ein viewBox im Quelltext ist die eigentliche Lösung und kostet eine Zeile.

Wird meine Zeichnung hochgeladen?

Nein. Das SVG wird als Data-URL kodiert, von der Canvas Ihres Browsers gerendert und im Tab zu einem PNG kodiert – das Network-Panel zeigt keinen Request. Das ist relevant für die Zeichnungen, die Menschen hier konvertieren: häufig unveröffentlichte Logos und Marken-Assets.

ToolsByUs-Team · Wie wir unsere Tools prüfen