Bleibt beim Umwandeln von PNG in SVG der Hintergrund transparent?

Transparent rein, transparent raus

PNG und WebP können einen Alphakanal speichern – die Deckkraft jedes einzelnen Pixels. JPEG kann das nicht. Wenn du ein PNG oder WebP hochlädst, liest das Nachzeichnen den Alphakanal und gibt nur Pixeln eine Farbe, die mehr als halb deckend sind. Pixel darunter gehören zu keiner Farbe und ergeben keinen Pfad, also bleibt die leere Fläche um ein freigestelltes Logo auch im SVG leer. Das ausgegebene <svg> hat kein Hintergrundrechteck; was du darunterlegst, scheint durch.

Das kannst du in der Vorschau prüfen: Der Ergebnisbereich zeichnet die nachgezeichneten Pfade über ein Schachbrettmuster, und transparente Bereiche zeigen das Schachbrett statt eines weißen Kastens.

Halbtransparente Pixel werden in zwei Schritten behandelt. Erst gehört jedes Pixel an der Halb-deckend-Grenze entweder zu einer Farbe oder nicht: Der weiche, kantengeglättete Rand eines Logos wird dort abgeschnitten, sodass der Umriss genau dort liegt, wo die Kante zur Hälfte bedeckt ist. Dann behält jede Farbe die Deckkraft ihrer Tinte, gemessen innerhalb ihrer Formen und nicht am weichen Rand. Volle Tinte wird vollständig deckend geschrieben, schwarzer Text auf einem transparenten Logo bleibt also schwarz und wird nicht hellgrau. Eine Farbe, die in der Vorlage durchscheinend ist – ein weicher Schlagschatten oder eine getönte Überlagerung –, wird mit dieser Deckkraft als fill-opacity geschrieben, sodass ein Schatten zu einer flachen, gleichmäßig halbtransparenten Form wird (zum Beispiel mit 54 % Deckkraft). Was ein Nachzeichnen nicht behalten kann, ist der Verlauf selbst: Der schwache äußere Teil des Schattens unter halber Deckkraft fällt weg, und die entstehende Form hat eine scharfe Kante und eine gleichmäßige Deckkraft statt eines allmählichen Übergangs.

Ein transparentes PNG unseres Otter-Logos mit hinzugefügtem weichem Schlagschatten (links), das daraus nachgezeichnete SVG über einem Schachbrettmuster (Mitte) und über einer Farbe (rechts). Es gibt keinen Hintergrundkasten, das Weiß der Augen bleibt erhalten, und der Schatten wurde zu flachen Formen mit 60 % Deckkraft, mit scharfen Kanten, wo das PNG einen Verlauf hatte.

Warum weiße Details das Entfernen des Hintergrunds überstehen

„Hintergrund entfernen“ arbeitet sich von den Bildrändern nach innen vor. Es betrachtet einen Streifen entlang des Bildrands, nimmt die ein oder zwei Farben, die jeweils mindestens 15 % davon bedecken, und markiert von den Rändern aus jedes zusammenhängende Pixel dieser Farben – und ähnlicher Farben – als transparent. Danach entfernt es auch den weichen Saum, an dem dieser Hintergrund auf die Grafik trifft (Pixel direkt neben dem entfernten Bereich, die der Hintergrundfarbe noch nahe sind), und kleine Flecken, die den Bildrand berühren. Alles, was nicht mit dem Rand verbunden ist, bleibt unangetastet – der weiße Innenraum eines „A“, das weiße Glanzlicht in einem Abzeichen, die weiße Lücke zwischen zwei Streifen.

Das ist Absicht: Ein weißes Detail eines Logos, das von dunklerer Grafik umschlossen ist, ist nach dem Entfernen noch da. Wenn du andere Tools erlebt hast, die jedes weiße Pixel löschen, ist das eine andere Technik (Color Keying) – und der Grund, warum „Hintergrund entfernen“ anderswo ein Design aushöhlen kann.

Die Kehrseite: Wenn der umschlossene weiße Bereich doch mit dem Rand verbunden ist – weil der Umriss eine Lücke von auch nur einem Pixel hat –, dringt das Entfernen durch die Lücke ein und entfernt ihn. Schließ die Lücke in der Vorlage oder lass das Entfernen aus und lösch den Hintergrundpfad danach im Editor.

Weiße Grafik auf weißem Hintergrund

Gleiche Farben kann das Nachzeichnen nicht trennen. Ein weißes Icon, das auf einer weißen Leinwand exportiert wurde, ist für das Nachzeichnen ein einziger weißer Bereich, und das Ergebnis ist entweder ein einzelnes weißes Rechteck oder eine leere Umwandlung („Dieses Bild konnte nicht nachgezeichnet werden“). Behebe das vor dem Hochladen:

1. Leg das Icon in einem beliebigen Bildprogramm auf einen einfarbigen, stark kontrastierenden Hintergrund (Dunkelgrau oder eine Farbe, die im Icon nicht vorkommt).
2. Lade es mit eingeschaltetem „Hintergrund entfernen“ hoch. Der Hintergrund ist mit den Rändern verbunden, also verschwindet er; das weiße Icon bleibt.
3. Wenn das Icon umschlossene transparente Bereiche hat, die transparent bleiben müssen, exportiere es stattdessen als PNG mit echtem Alphakanal, dann brauchst du gar keinen Hintergrund.

Alpha im Ergebnis prüfen

• Öffne das heruntergeladene SVG in einem Browser: Der Seitenhintergrund (standardmäßig weiß) scheint durch transparente Bereiche.
• Rastere es mit dem Tool „SVG in PNG“ – die Ausgabe ist RGBA und behält die Transparenz.
• Öffne die Datei in einem Texteditor: Es gibt keinen bildfüllenden Hintergrundpfad, außer deine Vorlage hatte einen deckenden Hintergrund und das Entfernen war aus.

Verwandtes Verhalten, das du kennen solltest

• Die Voreinstellung „Strichzeichnung / Schablone“ beurteilt jedes Pixel nach seiner Helligkeit, so wie es auf weißem Papier aussähe: Dunkles wird zu schwarzer Tinte, Helles zu weißem Papier, und transparente Bereiche bleiben transparent. Weiße Grafik wird daher zu weißem Papier, nicht zu Tinte, und der halbtransparente Rand einer dunklen Linie auf transparentem Hintergrund fällt weg, statt zu einem blassen Lichthof zu werden.
• Das Vorschau-PNG hat ein Wasserzeichen und ist gerastert; nur das freigeschaltete SVG enthält die Vektorpfade und die echte Transparenz.