0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
Konfiguration
Wandle ein SVG in PNG oder JPG um und wähle die Ausgabeauflösung: Der Vektor wird in der gewünschten Größe neu gezeichnet, das Ergebnis bleibt also in jeder Skalierung scharf. Du kannst eine Datei laden oder den SVG-Code einfügen. Die gesamte Verarbeitung läuft im Browser, ohne Uploads.
Quelle

SVG-Datei hierher ziehen oder zum Auswählen klicken

SVG

So funktioniert es

SVG ist ein Vektorformat: Es beschreibt Formen über Koordinaten und lässt sich daher in jeder Größe ohne Schärfeverlust zeichnen. PNG und JPG sind dagegen Rasterbilder mit einer festen Anzahl von Pixeln. Rastern ist genau dieser Schritt: eine Auflösung festlegen und den Vektor auf dieses Pixelraster zeichnen.

Deshalb wird die Auflösung vor der Umwandlung gewählt, nicht danach. Das Werkzeug schreibt Breite und Höhe des SVG auf die gewünschte Größe um und zeichnet es erst dann, sodass der Browser die Kurven in diesem Maßstab neu zieht, statt ein kleines Bild zu vergrößern. Du kannst einen Faktor (2×, 4×…) oder exakte Breite und Höhe in Pixeln angeben.

PNG behält die Transparenz, JPG nicht: Dort werden transparente Bereiche mit der von dir gewählten Hintergrundfarbe gefüllt. Das Zeichnen läuft komplett im Browser über Canvas – weder die Datei noch der SVG-Code werden auf einen Server geladen.

Beispiele

<svg viewBox="0 0 24 24" width="24" height="24">…</svg>PNG 96 × 96 pxEin 24-px-Icon mit Faktor 4× ergibt 96 × 96 px – die übliche Größe für Displays mit hoher Pixeldichte.
<svg viewBox="0 0 1200 630">…</svg>JPG 1200 × 630 pxEin SVG ohne width- und height-Attribute übernimmt seine Größe aus der viewBox; hier wird es in 1× gerastert – für ein Vorschaubild in sozialen Netzwerken.

Anwendungsfälle

  • Die PNG-Icons erzeugen, die App-Stores oder Web-Manifeste verlangen und die kein SVG akzeptieren.
  • Ein Vektorlogo als PNG mit transparentem Hintergrund exportieren, um es in eine Präsentation oder ein Dokument einzufügen.
  • Ein SVG-Diagramm als JPG exportieren, um es an eine E-Mail zu hängen oder auf eine Plattform hochzuladen, die keine Vektoren annimmt.
  • Von demselben Icon @2x- und @3x-Varianten für Displays mit hoher Pixeldichte erzeugen.
  • Das Vorschaubild (Open Graph) einer Website aus einer SVG-Vorlage erzeugen.

Häufige Fragen

Welche Auflösung sollte ich wählen?

Die des späteren Einsatzes. Für normale Bildschirme genügt die Größe, in der das Bild angezeigt wird; für hochauflösende Displays sind 2× oder 3× dieses Werts sinnvoll. Für den Druck multiplizierst du die Größe in Zoll mit 300, um 300 dpi zu erreichen.

Warum kommt mein SVG in einer unerwarteten Größe heraus?

Die Ausgangsgröße stammt aus den Attributen width und height; fehlen sie oder stehen sie in Prozent, wird das Seitenverhältnis der viewBox genutzt. Ist beides nicht vorhanden, nimmt der Browser 300 × 150 px an. Du kannst diesen Wert ignorieren und im benutzerdefinierten Modus exakte Breite und Höhe eintragen.

Bleibt die Transparenz erhalten?

Bei PNG ja, solange die Option für transparenten Hintergrund aktiviert bleibt. JPG kennt keinen Alphakanal und wird daher immer auf eine Volltonfarbe gezeichnet – standardmäßig Weiß, das du aber ändern kannst.

Warum schlägt ein SVG mit externen Bildern oder Schriften fehl?

Wird das SVG innerhalb eines Bildes gezeichnet, kann es keine Ressourcen von anderen Domains laden, und der Browser blockiert den Export aus Sicherheitsgründen. Die Lösung: diese Ressourcen direkt ins SVG einbetten – Bilder als Data-URI und Texte in Pfade umgewandelt.

Kann man von PNG zurück zu SVG?

Nicht direkt: Beim Rastern geht die Vektorinformation verloren, es bleiben nur Pixel. Die Kurven zurückzugewinnen erfordert eine Vektorisierung, die nur angenäherte Formen rekonstruiert, nicht das Original. Bewahre daher immer das Ausgangs-SVG auf.

Siehe auch