ImgConvert
Zurück zum Blog
Anleitung

SVG in PNG umwandeln: Transparenten Hintergrund beibehalten

Von ImgConvertAktualisiert:
5 Min. Lesezeit
SVGPNGTransparenzBildkonvertierung
SVG in PNG umwandeln: Transparenten Hintergrund beibehalten

Mit SVG in PNG erstellen Sie eine Rasterkopie Ihrer Vektorgrafik für eine Website, ein Dokument oder einen Editor. Transparente Bereiche, die bereits in der gerenderten SVG-Datei vorhanden sind, können in PNG transparent bleiben. Der Konverter entfernt keinen undurchsichtigen Hintergrund.

Warum PNG mit transparentem Hintergrund?

Ablauf zur Konvertierung einer SVG-Grafik in eine transparente PNG-Datei für die flexible Platzierung

Transparente PNG-Dateien sind wichtig für:

  • Logoplatzierung – Auf beliebigen farbigen Hintergründen verwendbar
  • Symbolsätze – Überall einheitliche Darstellung
  • Überlagerungen – Ebenen in Entwürfen und Bildkompositionen
  • Webgrafiken – Flexible Platzierung ohne weiße Rechtecke
  • App-Grafiken – Elemente der Benutzeroberfläche, die sich an unterschiedliche Designs anpassen

SVG und Transparenz

PNG kann einen Alphakanal speichern. Die Dateiendung PNG allein belegt jedoch nicht, dass Pixel transparent sind. Bezeichnungen wie PNG-24 und PNG-32 stammen aus Bildeditoren; dieser Konverter bietet keine Auswahl des Farbmodus. Eine Hintergrundform innerhalb einer SVG-Datei bleibt Bildinhalt und muss in der Quelle bearbeitet werden.

Wie SVG Transparenz darstellt

SVG unterstützt Transparenz von sich aus:

  • Standardmäßig kein Hintergrund (transparent)
  • RGBA-Farben für halbtransparente Füllungen
  • Deckkraftattribute für Elemente
  • Mischmodi für komplexe Effekte

Transparenz in PNG beibehalten

PNG unterstützt einen vollwertigen Alphakanal:

  • 256 Transparenzstufen (8 Bit)
  • Weiche Kanten durch Kantenglättung
  • Halbtransparente Farbverläufe

Eine SVG-Datei in PNG umwandeln

  1. Wählen Sie eine SVG-Datei mit bis zu 20 MB aus und warten Sie, bis sie hochgeladen wurde.
  2. Lassen Sie die Größenfelder leer, um die Originalgröße beizubehalten, oder geben Sie Pixelgrenzen von bis zu 8192 px pro Seite ein. Wenn Sie beide Werte angeben, wird das Bild proportional in diesen Rahmen eingepasst.
  3. Beginnen Sie bei der PNG-Komprimierung mit „Ausgewogen“. Ein höherer Komprimierungsaufwand kann die Dateigröße verringern, erhöht aber weder die Bildqualität noch die Transparenz.
  4. Konvertieren Sie die Datei, laden Sie die PNG-Datei herunter und prüfen Sie sie auf hellen und dunklen Hintergründen.

Es gibt weder ein Kontrollkästchen „Transparenz beibehalten“ noch einen Regler für die Transparenzstärke, eine Option zur Hintergrundentfernung oder eine Auswahl des PNG-Farbmodus. Die Datei wird auf dem Server verarbeitet. Laden Sie sie zeitnah herunter und bewahren Sie das SVG-Original auf.

Die Quellgrafik vorbereiten

Entfernen Sie ein unerwünschtes Hintergrundrechteck vor der Konvertierung in einem Vektoreditor. Binden Sie verknüpfte Bilder und Formatierungen nach Möglichkeit direkt in die SVG-Datei ein. Schriftarten, die dem Renderer nicht zur Verfügung stehen, können die Darstellung verändern. Wandeln Sie wichtige Schriftzüge im ursprünglichen Editor in Pfade um, wenn die genauen Formen erhalten bleiben müssen.

Die PNG-Datei hat feste Pixelmaße und bewahrt keine bearbeitbaren Pfade oder Ebenen. Das Vergrößern eines eingebetteten Rasterbildes kann fehlende Details nicht wiederherstellen. Wählen Sie die Abmessungen passend zur vorgesehenen Darstellung und prüfen Sie anschließend die tatsächliche Ausgabe.

Anwendungsfälle

Logos konvertieren

Für Logodateien:

  1. Entfernen Sie einen vorhandenen Hintergrund in der SVG-Datei.
  2. Exportieren Sie das Logo in mehreren Größen.
  3. Prüfen Sie es auf hellen und dunklen Hintergründen.
  4. Stellen Sie sowohl transparente Varianten als auch Varianten mit weißem Hintergrund bereit.

Symbolsätze

Für App- oder Websymbole:

  1. Vereinheitlichen Sie die Abmessungen, beispielsweise auf 512x512.
  2. Halten Sie die Innenabstände einheitlich.
  3. Konvertieren Sie jedes Symbol einzeln und prüfen Sie, ob seine vorhandene Transparenz erhalten bleibt.
  4. Prüfen Sie die Darstellung in den tatsächlich verwendeten Größen.

Webgrafiken

Für Website-Elemente:

  1. Exportieren Sie die Grafik in einer geeigneten Auflösung.
  2. Berücksichtigen Sie Varianten für Retina-Bildschirme (2x).
  3. Prüfen Sie, ob die Dateigröße angemessen ist.
  4. Prüfen Sie die überlagerte Darstellung auf verschiedenen Hintergründen.

Mehrere Dateien oder mehrere Größen

Diese Seite nimmt pro Auftrag eine SVG-Datei an. Konvertieren und prüfen Sie mehrere Exporte jeweils einzeln. Es gibt keinen Ordner-Upload, keine übergreifende Transparenzeinstellung und keine Funktion zum gemeinsamen Export aller Dateien. Behalten Sie Dateinamen und Abmessungen selbst im Blick.

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.

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.

Häufig gestellte Fragen

Bewahrt eine stärkere Komprimierung mehr Transparenz?

Nein. Die Voreinstellungen verändern den Aufwand für die verlustfreie PNG-Kodierung. Sie ändern nicht, welche Bereiche der Quelle transparent sind.

Warum ist der Hintergrund weiß oder eine Kante anders?

Prüfen Sie, ob Weiß Bestandteil der Quelle oder nur der Hintergrund des Bildbetrachters ist. Die Anleitung zur Behebung von SVG-Transparenzproblemen beschreibt Prüfungen der Quelle, Schriftarten und Kanten.

Können Sie die PNG-Datei wieder in eine bearbeitbare SVG-Datei umwandeln?

Dieser Konverter vektorisiert keine Rasterbilder. Bewahren Sie die ursprüngliche SVG-Datei für spätere Bearbeitungen auf.

Weitere Tools für Ihre nächsten Bildaufgaben

Entdecken Sie die ImgConvert-Tools zum Umwandeln sowie für PDF-Dateien und GIFs.

  • Bildkonverter
  • PDF-Tools
  • GIF-Tools
Alle Tools entdecken