Skip to content
user@convertitive:~$convertitive

SVG in PNG umwandeln

Lege ein SVG ab oder füge seinen Code ein, wähle eine Größe, lade ein PNG herunter. Nichts verlässt deinen Browser.

SVG ist auflösungsunabhängig — dieselbe Datei rendert gestochen scharf bei 16 Pixeln wie bei 16.000 —, aber ein großer Teil des Webs kommt damit immer noch nicht zurecht. E-Mail-Clients entfernen es, ältere CMS verweigern den Upload, Favicon-Pipelines wollen Bitmaps fester Größe, und wer als Designer Assets an ein Nicht-Design-Team übergibt, braucht oft einfach etwas, das sich überall öffnen lässt. Dann rastert man einen Vektor — und weil die Quelle keine feste Auflösung hat, darfst du die Ausgabemaße wählen. Dieses Werkzeug rendert dein SVG mit dem Rasterizer deines eigenen Browsers auf ein Canvas in exakt der angegebenen Größe und kodiert dann ein PNG — mit erhaltener Transparenz —, ohne dass die Datei jemals dein Gerät verlässt.

Drop an .svg file here, or

SVG up to 8 MB. Stays in your browser.

How to use

  1. SVG laden

    Ziehe eine .svg-Datei (bis 8 MB) auf die Ablagezone, klicke, um eine auszuwählen, oder füge rohen SVG-Code in das Textfeld ein. In jedem Fall liest das Werkzeug die Attribute width, height und viewBox aus, um die intrinsische Größe zu erkennen.

  2. Ausgabegröße festlegen

    Tippe eine exakte Breite oder Höhe in Pixeln ein — bei gesperrtem Seitenverhältnis folgt die andere Dimension automatisch — oder nutze die Buttons 1x, 2x oder 4x, um die intrinsische Größe zu vervielfachen. Für Retina-Bildschirme ist 2x die übliche Wahl.

  3. Hintergrund wählen

    Transparent (die Voreinstellung) erhält den Alphakanal des SVG im PNG. Wähle Weiß oder eine eigene Farbe, wenn das Bild irgendwo landet, das keine Transparenz beherrscht — etwa ein reiner JPEG-Workflow oder bestimmte E-Mail-Clients.

  4. Vorschau ansehen und herunterladen

    Das Ergebnis rendert live auf einem Schachbrett-Hintergrund, sodass du genau siehst, welche Bereiche transparent bleiben. Klicke auf PNG herunterladen — die Datei wird lokal vom Canvas-Encoder deines Browsers erzeugt und nirgendwohin hochgeladen.

Frequently asked questions

Wird mein SVG auf einen Server hochgeladen?
Nein. Das SVG wird in eine lokale Blob-URL verwandelt, von der SVG-Engine deines eigenen Browsers in ein Offscreen-Bild gerendert, auf ein Canvas gezeichnet und mit canvas.toBlob() als PNG kodiert — alles in JavaScript auf deinem Gerät. Es gibt überhaupt keine Upload-Anfrage.
Warum rendert mein SVG in einer seltsamen Größe?
Viele SVGs — vor allem Icon-Exporte — tragen nur eine viewBox und keine width/height-Attribute. Browser, die eine solche Datei in einem <img> anzeigen, greifen auf eine Standardgröße zurück (oft 300×150, manchmal 0×0), weshalb Konverter merkwürdig dimensionierte Ausgaben erzeugen können. Dieses Werkzeug parst den SVG-Quellcode direkt: Sind width und height vorhanden, verwendet es sie; existiert nur eine viewBox, übernimmt es deren Seitenverhältnis bei einer Standardbreite von 512px; fehlt beides, fällt es auf 512×512 zurück. Die erkannte Größe kannst du vor dem Export jederzeit überschreiben.
Warum sieht Text in meinem SVG im PNG anders aus?
SVG-<text>-Elemente werden mit den Schriften gerendert, die der rasternde Browser hat, und im <img>-Kontext werden externe Webfont-Verweise nicht geladen — deine sorgfältig gewählte Schriftart fällt also auf eine generische Browser-Schrift zurück. Wenn exakte Typografie zählt, wandle den Text in deinem Design-Werkzeug in Pfade um (Text in Kurven konvertieren), bevor du das SVG exportierst; Pfade rastern überall identisch.
Warum erscheinen eingebettete Bilder oder externes CSS nicht?
Wenn ein Browser ein SVG innerhalb eines <img>-Elements rastert, behandelt er die Datei als eigenständiges Dokument: Externe Verweise — verlinkte Stylesheets, Webfonts und <image>-Tags, die auf andere URLs zeigen — werden nicht geladen, und Cross-Origin-Inhalte können das Canvas kontaminieren und den Export ganz blockieren. Die Lösung: Mach das SVG in sich geschlossen — CSS inline einbetten und Rasterbilder als data:-URIs einbinden.
Bleibt Transparenz erhalten?
Ja. PNG hat einen vollen Alphakanal, und mit dem Hintergrund auf Transparent bleibt jeder Bereich, den dein SVG unbemalt lässt, in der Ausgabe transparent. Die Schachbrett-Vorschau zeigt genau, wo. Wähle Weiß oder eine eigene Farbe nur, wenn du den Hintergrund bewusst festlegen willst.
Welchen Maßstab sollte ich für Retina-/High-DPI-Bildschirme verwenden?
Exportiere in der doppelten Größe der späteren Anzeige — ein Logo, das mit 200×80 CSS-Pixeln angezeigt wird, sollte ein PNG mit 400×160 sein. High-DPI-Bildschirme packen grob vier physische Pixel in jeden CSS-Pixel, ein 1x-Export wirkt dort also weich. 4x lohnt sich nur für drucknahe Zwecke; für die normale Web-Anzeige vervierfacht es lediglich erneut die Dateigröße.

About

Wie Browser SVG im Bildkontext rastern

Wird ein SVG über ein <img>-Element geladen (oder auf ein Canvas gezeichnet), versetzt das die SVG-Engine des Browsers in einen eingeschränkten Modus: Skripte in der Datei werden nie ausgeführt, Event-Handler werden ignoriert, und externe Ressourcen — Schriften, Stylesheets, referenzierte Bilder — werden nicht geladen. Das Dokument wird als reines, in sich geschlossenes Bild gerendert. Genau diese Einschränkung macht einen clientseitigen Konverter wie diesen mit jedem beliebigen SVG sicher: Selbst eine bösartige Datei wird immer nur als Pixel behandelt, nie als Code. Sie ist zugleich die Quelle der Hauptbeschränkung des Werkzeugs — alles, was das SVG von außen nachlädt, erscheint schlicht nicht.

Maße wählen: groß rastern, später verkleinern

Einen Vektor hochzuskalieren kostet nichts, ein Raster hochzuskalieren verschlechtert es immer. Der solide Workflow ist daher, einmal in der größten Größe zu rastern, die irgendein Abnehmer brauchen wird — etwa 4x der nominalen Designgröße — und kleinere Varianten durch Herunterskalieren dieses Master-PNGs zu erzeugen, was ein nahezu verlustfreier Vorgang ist. Der umgekehrte Weg (klein exportieren, dann vergrößern) wirft Details weg, die das SVG kostenlos hätte liefern können. Da PNG verlustfrei komprimiert ist, sind die einzigen echten Kosten einer großzügigen Exportgröße Bytes auf der Festplatte.

Sources & references

Authoritative references behind the math, constants, and tables on this page. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.