SVG zu PNG — Vektorgrafik als Rasterbild exportieren

Eine SVG-Datei zu einer PNG-Datei zu rastern bedeutet, das Vektor-Bild bei einer bestimmten Pixel-Auflösung in ein Pixel-Raster umzurechnen. Damit verliert das Bild seine wichtigste Eigenschaft — die beliebige Skalierbarkeit —, gewinnt aber dafür breite Kompatibilität mit allen Bild-Plattformen, die kein SVG akzeptieren. Wann lohnt sich die Konvertierung? Erstens, Plattform-Kompatibilität: Manche älteren CMS-Systeme, viele E-Mail-Clients, einige Druckereien und die meisten Social-Media-Plattformen akzeptieren nur Pixelbilder. Zweitens, Konkrete Pixel-Anforderungen: Wer ein Logo für ein App-Icon braucht, das genau 1024×1024 Pixel haben muss, rastert es aus dem SVG. Drittens, Bildbearbeitung mit Pixel-Filtern: Manche Effekte (Photoshop-Filter, Blur, manche Bildbearbeitungen) funktionieren nur auf Pixel-Daten. Welche Auflösung wählen? Die wichtige Entscheidung beim Rastern. Faustregel: Wähle die maximal benötigte Ziel-Größe (Retina-Faktor 2 berücksichtigen). Ein Logo, das im Browser maximal 200 Pixel breit angezeigt wird, sollte als 400-Pixel-PNG gerastert werden. Wenn du das größer skalierst, leidet die Qualität. Wenn du es kleiner skalierst, ist es nur Speicher-Verschwendung. Bei App-Icons gibt es konkrete Vorgaben (siehe PWA-Generator). Was du beim Rastern verlierst. Die wichtigste Eigenschaft von SVG geht beim Rastern verloren: die Skalierbarkeit. Ein PNG ist auflösungs-gebunden — du brauchst pro Verwendungs-Größe eine eigene Datei (oder mehrere für Retina-Faktor). Außerdem: SVG-spezifische Eigenschaften wie CSS-Styling, Animation, Barrierefreiheit (ARIA-Attribute), DOM-Manipulation. All das gibt es im PNG nicht. Wenn dein Asset auf einer Website verwendet wird, behalte besser das SVG. Transparenz und Hintergrund. SVG hat per Definition transparenten Hintergrund — die Pfade werden auf der Stelle gerendert, wo sie definiert sind. PNG kann das genauso (Alpha-Kanal). Im JNRT-Pixel-Konverter wird die Transparenz standardmäßig erhalten. Wenn du einen festen Hintergrund willst (z.B. Weiß), kannst du das einstellen — sinnvoll, wenn das PNG später in einem Kontext eingebettet wird, der Transparenz nicht unterstützt. Praktische Tipps. Erstens: Rastere immer in zwei Größen (1x und 2x für Retina). Zweitens: Rastere mit Anti-Aliasing aktiviert — das gibt weiche Kanten bei diagonalen Linien. Drittens: Wenn das SVG Text enthält, prüfe, ob die verwendete Schrift im Browser verfügbar ist; ggf. den Text vor dem Export in Pfade umwandeln. Konvertierungs-Routen im Vergleich. SVG → PNG für Pixel-Workflows. SVG → JPG für Foto-Komposition mit transparenten Bereichen (mit Hintergrundfarbe). SVG → WebP für Web mit moderner Browser-Unterstützung (kleiner als PNG, gleicher Look). Datenschutz. Lokal im Browser. Keine Datei wird hochgeladen. Weiterführend: SVG-Optimierung, SVG, PNG, JPG für Icons.',