SVG zu PNG / JPG Konverter

Was dieser Konverter macht

SVG ist großartig für Logos und Icons, weil es sich unbegrenzt ohne Unschärfe skalieren lässt. Trotzdem verlangen viele Plattformen weiterhin eine flache Rastergrafik: App-Icon-Einreichungen, Social-Media-Uploads, eingebettete E-Mail-Bilder, OS-Hintergrundbilder. Dieses Tool nimmt jedes SVG entgegen – als Datei oder eingefügtes Markup – und rastert es zu PNG (mit optionaler Transparenz) oder JPG (mit erzwungenem Hintergrund) in der gewünschten Auflösung. Wähle 1×, 2× oder 4× der natürlichen SVG-Größe oder gib eine eigene Breite in Pixeln an; die Höhe wird automatisch berechnet, damit das Seitenverhältnis erhalten bleibt. Die gesamte Pipeline läuft in deinem Browser über ein <canvas>-Element: dein SVG verlässt diesen Tab nie. Das ist wichtig bei vertraulichen Brand-Assets, unveröffentlichten Designs oder jeder Datei, die du keinem zufälligen Webdienst anvertrauen willst. Die Vorschau aktualisiert sich live bei jeder Einstellung, sodass du Hintergrund und Auflösung schon vor dem Download bewerten kannst. Es gibt zudem einen JPG-Modus für Fälle, in denen du die kleinstmögliche Datei brauchst und ohne Transparenz auskommst – primär Social Cards und dichte Thumbnails.

So funktioniert es

1. SVG bereitstellen — Lege eine Datei ab oder füge das Markup ein. Das SVG muss eine viewBox oder width-/height-Attribute enthalten; sonst weiß der Browser nicht, in welcher Größe er es zeichnen soll.
2. Skalierung und Format wählen — 1× entspricht der Nominalgröße des SVGs. 2× ist ideal für Retina-Displays. 4× für den Druck. Mit „Eigene Breite“ legst du eine exakte Pixelbreite fest, etwa 1200 px für OG-Bilder.
3. Hintergrund festlegen — Transparent funktioniert nur bei PNG. JPG braucht einen festen Hintergrund – Weiß ist die sichere Standardwahl, aber jede Farbe, die zur Grafik passt, ist möglich.
4. Herunterladen — Klicke auf „Herunterladen“. Das PNG wird lokal erzeugt und mit einem sinnvollen Dateinamen gespeichert – ohne Server-Roundtrip.

Was unter der Haube passiert

Wir kodieren das SVG-Markup base64 in eine data:image/svg+xml;base64-URL und weisen sie einem HTMLImageElement zu. Sobald der Browser das SVG geparst und gelayoutet hat, zeichnen wir es auf ein Canvas in der gewählten Auflösung – die Rasterung übernimmt der Browser, sodass das Ergebnis dem entspricht, was Chrome oder Safari nativ darstellen würden. Anschließend wird das Canvas zu PNG (verlustfrei) oder JPG (verlustbehaftet, Qualität 92) kodiert. Breite und Höhe werden aus der viewBox oder den expliziten Attributen des SVGs abgeleitet; das Seitenverhältnis bleibt stets erhalten.

Wann PNG, wann JPG?

Verwende PNG für Logos, Icons und alle Grafiken mit harten Kanten oder Text – die verlustfreie Komprimierung hält Linien knackig, und Transparenz bleibt erhalten. JPG nutzt du nur für fotoartige SVGs oder Fälle, in denen du die kleinstmögliche Datei brauchst und ein fester Hintergrund akzeptabel ist. Die blockbasierte JPG-Komprimierung zermatscht dünne Linien und schadet dem Kontrast in flächigen Farbbereichen, weshalb JPG für Vektorgrafiken selten die richtige Wahl ist.

Häufig gestellte Fragen