SVG zu PNG

Wie funktioniert die SVG-zu-PNG-Konvertierung im Browser?

SVG ist ein Vektor-Format: die Grafik wird als mathematische Beschreibung gespeichert (Pfade, Kreise, Polygone, Farben), nicht als Pixel-Raster. PNG hingegen speichert jeden Pixel explizit. Beim Übergang muss der Browser die SVG in eine konkrete Pixel-Größe rendern — den Rastersize-Prozess.

Das Tool nutzt die Canvas-API, einen Web-Standard, der in jedem Evergreen-Browser nativ verfügbar ist. Drei Schritte:

SVG (Text-Markup)
    ↓
[1] Viewport-Parse: width/height oder viewBox lesen
    ↓
[2] Browser-Image-Decode: SVG via Blob-URL in <img> laden
    ↓
[3] Canvas-Render: drawImage(svg, 0, 0, targetW, targetH)
    ↓
[4] toBlob('image/png'): Pixel-Daten als PNG kodieren
    ↓
PNG (1x, 2x, 3x oder eigene Breite)

Vektor-zu-Raster ist verlustfrei, solange die Ziel-Auflösung ≥ die kleinste sichtbare Detail-Größe ist. Bei sehr feinen Linien in der SVG kann es helfen, eine höhere DPI zu wählen.

Multi-DPI-Export — Warum @1x, @2x, @3x in einem Klick?

App-Icons und Asset-Catalogs auf iOS und Android folgen einer festen Konvention:

• @1x — die nominelle Größe (z. B. 60×60 px für ein iOS-App-Icon-Slot)
• @2x — Retina-Display, doppelte Pixel-Dichte (120×120 px)
• @3x — High-DPI-Mobile wie iPhone Pro Max (180×180 px)

Wer Icons aus SVGs zieht, brauchte traditionell drei separate Export-Durchgänge mit drei verschiedenen Größen. Das ist Workflow-Overhead — besonders, wenn du einen kompletten Asset-Satz für mehrere Icons hast.

Der Multi-DPI-Knopf macht aus jeder SVG die drei PNGs in einem Klick, korrekt benannt mit App-Store-Suffixen:

hero.svg → [email protected] + [email protected] + [email protected]

Im ZIP liegen die drei Dateien direkt importbereit für Xcode-Asset-Catalogs, Android-drawable-*dpi-Ordner und Figma-Asset-Plugins.

Alpha-Erhaltung — was bedeutet das technisch?

Viele Tools versprechen „transparente Hintergründe” und liefern PNGs, die in Photoshop oder Figma trotzdem einen weißen oder grauen Rand zeigen. Das passiert, wenn der Rasterizer den Canvas vor dem Rendern mit einer Farbe füllt (z. B. um JPG-Kompatibilität herzustellen) oder wenn die Alpha-Werte beim Encoden gerundet werden.

Dieses Tool startet den Canvas im Default-Zustand: jeder Pixel hat von Anfang an Alpha 0 (voll transparent). Wenn du den Hintergrund auf „Transparent” stellst, wird die Fläche nicht vorgefüllt — der Code-Pfad steigt früh aus, bevor fillRect() aufgerufen wird. Erst dann zeichnet die SVG ihre Pfade. Pixel, die kein SVG-Element berührt, behalten ihren Alpha-0-Wert; Pixel mit Anti-Aliased-Kanten behalten ihre Zwischen-Alpha-Werte exakt.

Das Ergebnis kannst du verifizieren:

• In Photoshop/Affinity Photo zeigt das Schachbrett-Muster die transparenten Pixel.
• In Figma ist die Frame-Fläche unter dem Bild sichtbar.
• Im Browser erkennst du es, indem du das PNG über ein farbiges <div> legst.

Bei „Weiß” oder „Eigene Farbe” wird die Fläche bewusst gefüllt — sinnvoll für Print, E-Mail-Anhänge oder Mockups auf farbigen Hintergründen.

Wann transparent, wann weiß, wann eigene Farbe?

Transparent wählen, wenn:

• die PNG auf farbigem Untergrund liegt (Web, App, Karten-Spiele, OG-Bilder)
• das Icon in einem Dark-Mode-Layout sichtbar bleiben soll
• du das Bild später in Photoshop weiterbearbeitest und einen weichen Rand brauchst

Weiß wählen, wenn:

• die PNG auf gedrucktem Papier landet
• sie als E-Mail-Anhang verschickt wird, wo Outlook 2010+ Transparenz manchmal als schwarzen Hintergrund rendert
• sie in einer Office-Präsentation auf Folie kommt

Eigene Farbe wählen, wenn:

• ein Branding-Hintergrund Pflicht ist (Logo auf Markenfarbe)
• die PNG auf einer bekannten Background-Farbe der Ziel-Seite landet und die Anti-Aliasing-Kanten dann sauber matchen
• du Foto-Negative oder Schreibtisch-Hintergründe simulierst

Der Live-Preview-Toggle zeigt das Asset auf hellem und dunklem Untergrund — so erkennst du schon vor dem Download, ob die Anti-Aliasing-Kanten der SVG für deinen Ziel-Kontext passen.

Was unterscheidet dieses Tool von Online-Konvertern?

Die meisten frei zugänglichen SVG-zu-PNG-Konverter folgen einem ähnlichen Schema: Datei-Upload → Server-Verarbeitung → Download. Das Modell hat drei Nachteile:

1. Privacy: Die SVG verlässt deinen Computer. Bei Logos, Marken-Assets, internen Designs oder Kundenmaterial ist das ein echtes Problem.
2. Datei-Caps: Free-Tier endet meistens bei 25–100 Dateien. Wer 80 Icons für einen Android-Drawable-Ordner konvertieren will, muss Premium kaufen oder in Wellen arbeiten.
3. Single-DPI: Kaum ein Konverter macht 1×+2×+3× in einem Schritt — alle zwingen mehrere Durchläufe.

Dieses Tool macht alle drei Punkte anders:

• Pure-Client — die Datei bleibt im Browser-Tab, nachweisbar im Netzwerk-Panel.
• Kein Datei-Cap — die einzige Grenze ist dein Browser-Speicher.
• Multi-DPI in einem Klick — das App-Store-Schema wird mit korrekten Suffixen automatisch erzeugt.

Welche bewussten Lücken hat dieses Tool?

Wir bauen einen SVG-zu-PNG-Konverter, kein Vektor-Allzweckwerkzeug. Was bewusst nicht enthalten ist:

• SVG-Optimierung vor dem Export (Pfad-Vereinfachung, Path-Cleanup, Metadaten-Strip) — gehört in unser separates SVG-Optimierer-Tool, das funktioniert ergänzend.
• JPG/WebP/AVIF-Multi-Output — die Seite hält den Scope auf PNG. Für andere Formate gibt es bild-format-konverter.
• Animations-Konvertierung in APNG/animated WebP — Canvas-API rendert nur den Anfangs-Frame, animierte SVGs (SMIL, CSS) sind außerhalb des Scopes.
• Edit-Features — kein Color-Swap, kein Path-Edit, kein Re-Layout. Das ist Bildbearbeitungs-Software-Territorium.
• Server-API oder Bulk-URL-Konverter — bricht das Pure-Client-Versprechen.
• Login oder Cloud-Save — das Tool speichert nichts. Wenn du den Tab schließt, ist das Ergebnis weg.

Das Tool macht eine Sache gut und sagt klar, wo die Grenze liegt.

Welche Bild-Tools sind verwandt?

Weitere Werkzeuge aus dem kittokit-Ökosystem, die zu SVG-Workflows passen:

• SVG optimieren — vor dem PNG-Export die SVG-Pfade säubern und Metadaten entfernen.
• PNG komprimieren — die erzeugte PNG anschließend verlustfrei oder verlustbehaftet kleiner machen.
• Bildformat konvertieren — PNG zu WebP oder AVIF für Web-Auslieferung; beide bei gleicher Quality kleiner als PNG.