SVG in PNG umwandeln: Probleme mit Transparenz beheben

Diese Anleitung behandelt die Fehlersuche, nachdem Sie SVG in PNG umgewandelt haben. Die grundlegenden Schritte finden Sie unter SVG mit transparentem Hintergrund konvertieren.

Ein weißer Hintergrund bedeutet nicht immer verlorene Transparenz

Öffnen Sie die PNG-Datei in einem Bildeditor, der Transparenz anzeigt, oder legen Sie sie über einen farbigen Hintergrund. Ein Bildbetrachter zeigt möglicherweise nur Weiß hinter transparenten Pixeln an. Wenn die weiße Fläche Bestandteil des Bildes bleibt, prüfen Sie die SVG-Datei auf ein undurchsichtiges Hintergrundrechteck, eine gefüllte Form oder ein eingebettetes Rasterbild.

Der SVG-zu-PNG-Konverter entfernt diese Objekte nicht. Bearbeiten Sie nach Möglichkeit die SVG-Quelldatei. Zum Freistellen eines Rasterbildes können Sie das Werkzeug Transparenten Hintergrund erstellen in einem separaten Arbeitsschritt verwenden. Prüfen Sie dessen Ergebnis anschließend.

Es gibt keinen Schalter zum Aktivieren der Transparenz

Dieser Konverter verarbeitet eine SVG-Datei und bietet Einstellungen für Breite und Höhe in Pixeln sowie für die PNG-Komprimierung. Vorhandene transparente Bereiche können ohne ein Kontrollkästchen „Transparenz beibehalten“ oder „Alphakanal“ transparent bleiben. Es gibt weder eine Funktion zum Entfernen einer Hintergrundfarbe noch eine Auswahl zwischen PNG-8 und PNG-24.

Kanten und fehlende Elemente untersuchen

Sonderfälle

Prüfen Sie jeden Effekt in der heruntergeladenen PNG-Datei. Gehen Sie nicht davon aus, dass jeder SVG-Renderer identische Pixel erzeugt. Ein eingebettetes Foto behält seinen eigenen undurchsichtigen Hintergrund, solange dieses Quellbild nicht bearbeitet wird. Die Deckkraft eines Vektorpfads kann ein darunterliegendes weißes Rechteck nicht entfernen.

SVG mit eingebetteten Rasterbildern

Wenn eine SVG-Datei Rasterbilder enthält:

• Rasterbildanteile behalten ihre ursprüngliche Transparenz.
• Vektoranteile werden normal konvertiert.
• Prüfen Sie, ob die eingebetteten Bilder Transparenz enthalten.

Komplexe Transparenzeffekte

Dies betrifft SVG-Dateien mit:

• Weichzeichnungseffekten
• Schlagschatten
• Mischmodi

Diese Effekte können bei der Konvertierung anders dargestellt werden. Prüfen Sie das Ergebnis und passen Sie die Quelle bei Bedarf an.

Halbtransparente Elemente

Bei SVG-Dateien mit Deckkraftwerten gilt:

• Die Dateigröße kann steigen.
• Prüfen Sie nach der Konvertierung, ob die Darstellung stimmt.

PNG-Transparenz prüfen

Führen Sie diese Prüfungen mit der heruntergeladenen PNG-Datei durch. Ein in das Original eingezeichnetes Schachbrettmuster ist gewöhnlicher Bildinhalt; das Schachbrettmuster eines Bildbetrachters dient dagegen als Anzeigehilfe. Vergleichen Sie das Bild vor mindestens zwei verschiedenen Farben, um den Unterschied zu erkennen. Das HTML-Beispiel ist für Ihre eigene Testseite gedacht.

Schnellprüfung

1. Öffnen Sie die PNG-Datei in einem Bildeditor.
2. Achten Sie auf das Schachbrettmuster im Hintergrund als Hinweis auf Transparenz.
3. Fügen Sie dahinter eine farbige Ebene ein.
4. Prüfen Sie, ob die Grafik korrekt dargestellt wird.

Prüfung im Browser

<div style="background: linear-gradient(45deg, #333, #666)">
  <img src="your-graphic.png" alt="Transparenzprüfung">
</div>

Vergewissern Sie sich, dass kein weißes Rechteck erscheint.

Transparente PNG-Dateien optimieren

Beginnen Sie mit den tatsächlich benötigten Abmessungen. Die verlustfreie PNG-Komprimierung verändert den Kodierungsaufwand, nicht die Transparenz einzelner Pixel. Eine Reduzierung der Farbpalette in einem anderen Editor kann die Dateigröße verringern, aber auch Farbverläufe und weiche Kanten verändern. Bei einer Größenänderung werden Pixel verworfen oder neu berechnet.

Bewahren Sie eine Kopie in Originalgröße auf, ändern Sie jeweils nur eine Einstellung und vergleichen Sie die heruntergeladenen Dateien. Prüfen Sie die Kanten nach jeder Optimierung auf hellen und dunklen Hintergründen. Es gibt keine feste Einsparung von 20–50% oder 40–80%, die für jede Grafik gilt. Wenn das Ziel WebP unterstützt, vergleichen Sie einen separaten WebP-Export mit der PNG-Datei, statt eines der Formate grundsätzlich für kleiner zu halten.

Jeweils nur eine Änderung vergleichen

Bewahren Sie das SVG-Original auf, ändern Sie nur eine Eigenschaft der Quelle oder ein Ausgabemaß und vergleichen Sie die neue PNG-Datei auf hellen und dunklen Hintergründen. Die Größenfelder akzeptieren bis zu 8192 px pro Seite. Die Komprimierung verändert den Aufwand für die PNG-Kodierung, nicht die Transparenzstärke oder die Bildqualität.

Abmessungen und Innenabstände getrennt vom Alphakanal prüfen

Auch ein transparentes Logo kann falsch wirken, wenn das Motiv innerhalb seiner Zeichenfläche zu klein ist. Prüfen Sie das viewBox-Attribut der SVG-Datei und die Position der Zeichnung im ursprünglichen Editor. Vergrößern oder verkleinern Sie dort die Innenabstände. Die Felder für Breite und Höhe im Konverter skalieren das Bild innerhalb eines Begrenzungsrahmens; sie bieten keinen Editor für die Innenabstände der Zeichenfläche.

Berechnen Sie für eine Bildschirmgrafik in 2×-Auflösung das Doppelte der vorgesehenen Darstellungsmaße und behalten Sie die Proportionen bei. Exportieren und prüfen Sie jede Größe einzeln. Ein Dateiname wie logo@2x.png ist eine Namenskonvention, keine Einstellung, die zusätzliche Details erzeugt.

<img src="logo.png" srcset="logo@2x.png 2x" alt="Firmenlogo">

Beide Dateien müssen auf Ihrer Website vorhanden sein. Prüfen Sie die tatsächliche Darstellungsgröße und den Hintergrund. Der HTML-Code fügt keinem der Bilder Transparenz hinzu. Wenn das Logo in beiden Größen einen Saum zeigt, prüfen Sie erneut die Kanten in der Quelle, statt es wiederholt zu vergrößern.

Häufig gestellte Fragen

Behebt eine stärkere Komprimierung Probleme an transparenten Kanten?

Nein. Prüfen Sie die Quellgrafik und die Pixelmaße. Die Komprimierung ist keine Funktion zur Kantenkorrektur.

Können Sie hier eine Korrektur auf einen ganzen Ordner anwenden?

Nein. Die Seite nimmt pro Auftrag eine SVG-Datei an. Bereiten Sie Korrekturen an den Quelldateien in einem Editor vor und konvertieren und prüfen Sie anschließend jede Datei einzeln.