Von Claire Yoon8 Min. Lesezeit

So bleibt der Hintergrund beim Konvertieren in SVG transparent

Ein SVG hat standardmäßig keinen Hintergrund. Ein weißer Kasten bedeutet also, dass etwas einen hinzugefügt hat. So behältst du Transparenz beim Konvertieren von PNG in SVG, und das solltest du prüfen.

Auf dieser Seite

Das Detail, das das Ganze so verwirrend macht: Ein SVG hat standardmäßig überhaupt keinen Hintergrund. Es ist transparent, solange nichts eine einfarbige Form hinter dein Artwork legt. Wenn dein konvertiertes SVG also mit einem weißen Kasten drumherum auftaucht, lohnt sich die Frage: Was hat das Weiß hinzugefügt? Meist ist es eines von drei Dingen: eine Hintergrundform in deinem Design, eine Exporteinstellung, die die Arbeitsfläche füllt, oder ein Konverter, der den leeren Bereich als weißen Block nachgezeichnet hat, statt ihn leer zu lassen. Die Lösung hängt davon ab, womit du es zu tun hast, und davon, ob deine Originaldatei überhaupt echte Transparenz hatte. Sortieren wir das.

Die Kurzfassung
  • Ein SVG ist standardmäßig transparent. Ein weißer Hintergrund bedeutet, dass etwas ihn hinzugefügt hat.
  • Du konvertierst eine transparente PNG? Nutze einen Konverter, der den Alpha-Kanal respektiert, also dein Motiv nachzeichnet und den Rest leer lässt. Konvertiere eine PNG in SVG und prüfe das Ergebnis.
  • Du startest mit einem JPG? Es kann nicht transparent sein, also gibt es nichts zu erhalten. Entferne zuerst den Hintergrund und konvertiere dann.
  • Du exportierst aus Illustrator oder Inkscape? Lösche das weiße Hintergrundrechteck auf deiner Arbeitsfläche und prüfe deine Exporteinstellungen.
  • Immer prüfen: Lege das SVG auf einen farbigen Hintergrund. Wenn du immer noch Weiß siehst, ist dort etwas vorhanden.

Was fügt das Weiß eigentlich hinzu?

Bevor du etwas reparierst, finde heraus, woher das Weiß kommt. Es gibt drei typische Situationen, und die Lösung ist jeweils anders.

Deine SituationWarum es weiß istDie Lösung
Eine transparente PNG wird in SVG konvertiertDer Konverter hat den leeren Bereich gefüllt oder als Form nachgezeichnetNutze einen Konverter, der Transparenz respektiert; lösche jede verirrte Hintergrundform, die er hinzugefügt hat
Ein JPG oder eine PNG mit solidem weißem Hintergrund wird konvertiertEs gab nie Transparenz, die erhalten werden konnteEntferne zuerst den Hintergrund und konvertiere dann
Du exportierst ein SVG, das du in Illustrator oder Inkscape gestaltet hastEin Hintergrundrechteck auf deiner Arbeitsfläche oder eine Exporteinstellung fügt eine Füllung hinzuLösche die Hintergrundform; prüfe beim Export die Transparenzoption
Woher das Weiß kommt
Diagramm mit drei Quellen für einen weißen Hintergrund in einem SVG: eine Hintergrundrechteckform, eine Exporteinstellung, die eine Füllung hinzufügt, und ein Konverter, der den leeren Bereich als weißen Block nachzeichnet
Ein SVG beginnt transparent. Weiß schleicht sich durch eine Hintergrundform, eine Exporteinstellung oder eine unachtsame Nachzeichnung ein.

Die mittlere Zeile bringt die meisten durcheinander, also fangen wir dort an.

Wenn deine Datei nicht wirklich transparent ist, kann kein Konverter das beheben

Diesen Teil lassen Foren gern aus. Ein JPG kann niemals Transparenz speichern. Wenn dein Logo ein JPG ist, ist ein solider Hintergrund fest in die Pixel eingebrannt, selbst wenn dieser Hintergrund weiß ist und wie „nichts“ aussieht. Es in SVG zu konvertieren, entfernt das nicht. Die Nachzeichnung übernimmt den Hintergrund entweder als Form oder sitzt direkt darauf. (Ein JPG zu konvertieren ist insgesamt ein etwas anderer Job; wie du ein JPG in SVG konvertierst behandelt das ausführlicher.)

Manche PNGs haben dasselbe Problem. Eine PNG kann Transparenz speichern, also einen Alpha-Kanal, aber viele wurden stattdessen mit einer einfachen weißen Füllung gespeichert. Wenn du nicht sicher bist, was du hast, öffne die Datei über einem dunklen Hintergrund. Siehst du ein weißes Rechteck um dein Logo? Dann ist sie nicht transparent. Es sah nur auf einer weißen Seite so aus.

Die Lösung ist in beiden Fällen gleich: Entferne den Hintergrund, bevor du konvertierst, damit der Konverter mit echter Transparenz arbeiten kann. Schneide das Motiv in einem beliebigen Bildeditor frei, exportiere eine transparente PNG und zeichne dann diese nach. (PNG vs. SVG erklärt, warum eine PNG Transparenz enthalten kann und ein JPG nicht.)

Eine wirklich transparente PNG in SVG konvertieren

Wenn deine Quelle eine wirklich transparente PNG ist, hängt das Erhalten dieser Transparenz bei der Konvertierung vor allem vom verwendeten Konverter ab. Im Prinzip ist die Aufgabe einfach: Das sichtbare Motiv wird zu Vektorpfaden nachgezeichnet, und der transparente Bereich bleibt leerer Raum, keine weiße Form. Ein guter Konverter macht genau das. Ein unachtsamer tut stattdessen eines von zwei nervigen Dingen:

  • Er füllt den transparenten Bereich mit Weiß, und du bekommst einen soliden Kasten.
  • Er zeichnet die Kante des transparenten Bereichs als eigenen Pfad nach, sodass du am Ende ein unsichtbares, aber echtes Rechteck um dein Design hast, das in dem Moment sichtbar wird, in dem du es auf einen farbigen Hintergrund legst oder an eine Schneidemaschine sendest. Maker stolpern ständig darüber. Es ist derselbe verirrte Kasten um ein Cricut-Design.

Der richtige Schritt ist also: mit einem Tool konvertieren, das sauber mit dem Alpha-Kanal umgeht, und das Ergebnis anschließend prüfen (mehr dazu unten). Ein transparentes Logo ist der häufigste Fall davon.

Wie das mit PerfectVector aussieht

PerfectVector liest die Transparenz deiner PNG und zeichnet nur nach, was tatsächlich vorhanden ist. Der sichtbare Teil deines Logos wird zu sauberen, bearbeitbaren Vektorpfaden, und der transparente Bereich bleibt transparent: kein weißer Kasten, kein verstecktes Begrenzungsrechteck. Das Ergebnis kannst du auf jeden farbigen Hintergrund, eine Website, einen Stickerbogen oder eine Cricut-Matte legen, und die Farbe dahinter scheint einfach durch. Du kannst deine transparente PNG konvertieren und sie in wenigen Sekunden vor einem farbigen Hintergrund prüfen. Die ersten Konvertierungen sind kostenlos, keine Kreditkarte erforderlich.

Ganz ehrlich aber: PerfectVector erhält die Transparenz, die bereits in deiner Datei steckt. Es kann keine Transparenz erfinden, die nie da war. Wenn deine Quelle ein JPG oder eine weiß gefüllte PNG ist, schneide zuerst den Hintergrund aus, wie oben beschrieben, und dann bleibt die Konvertierung sauber.

Weißer Kasten
Ein in SVG konvertiertes Logo mit unerwünschtem weißen Kasten dahinter, gezeigt auf einem türkisfarbenen Hintergrund
Eine unachtsame Nachzeichnung hat ein weißes Rechteck hinterlassen, das auf Farbe sofort auffällt.
Transparent
Dasselbe Logo, in SVG konvertiert, wobei der Hintergrund transparent bleibt und das Türkis sauber durchscheint
Transparenz erhalten: Der farbige Hintergrund scheint direkt durch.

So prüfst du, ob es wirklich funktioniert hat

Vertrau nicht auf die Vorschau. Ein transparentes SVG sieht auf einer weißen Seite genauso aus wie eines mit weißem Hintergrund, und genau deshalb denken viele, alles sei in Ordnung, bis es das nicht mehr ist. Zwei schnelle Checks:

  • Lege es auf eine Farbe. Platziere das SVG in deinem Browser, in Figma, Canva oder Design Space auf einem farbigen Hintergrund. Echte Transparenz lässt die Farbe durch. Ein weißer Kasten nicht.
  • Suche nach einem verirrten Rechteck. Öffne das SVG und wähle die Formen aus. Wenn hinter deinem Artwork ein Rechteck in voller Größe liegt, lösche es. Das ist in den meisten Fällen mit „es ist immer noch weiß“ der Übeltäter.

Ein selbst gestaltetes SVG exportieren (der andere Fall)

Wenn du kein Rasterbild konvertierst, sondern ein SVG exportierst, das du selbst gezeichnet hast, kommt das Weiß meistens von deiner eigenen Arbeitsfläche, nicht von einem Konverter:

  • Illustrator: Lösche jedes weiße Rechteck, das als Hintergrund dient. Die Farbe der Zeichenfläche wird ohnehin nicht exportiert. Sobald die Hintergrundform weg ist, speichere oder exportiere als SVG, und es ist transparent.
  • Inkscape: Achte darauf, dass kein Hintergrundrechteck ausgewählt ist, blende das ursprüngliche Rasterbild aus oder lösche es, falls du eines nachgezeichnet hast, und exportiere den Vektor. Inkscape-SVGs sind transparent, solange du keine Füllung hinzugefügt hast.

So oder so gilt die Regel von oben weiterhin: Ein SVG hat keinen Hintergrund, außer du gibst ihm einen.

FAQ

Unterstützt ein SVG einen transparenten Hintergrund? Ja, und es ist standardmäßig transparent. Ein SVG hat keinen Hintergrund, solange keine Form oder Füllung hinzugefügt wird. Transparenz ist also der Ausgangszustand, nichts, was du erst einschalten musst. Weiß erscheint nur, wenn etwas es dort platziert.

Wie speichere ich ein SVG mit transparentem Hintergrund? Stelle sicher, dass es in deinem Design kein Hintergrundrechteck gibt, und exportiere dann ohne Hintergrundfüllung (die meisten Tools exportieren standardmäßig transparent). Prüfe danach, indem du das SVG auf einen farbigen Hintergrund legst. Wenn du Weiß siehst, finde und lösche die Hintergrundform.

Warum hat mein SVG nach dem Konvertieren einen weißen Hintergrund? Entweder hat der Konverter eine weiße Füllung hinzugefügt oder den leeren Bereich als Form nachgezeichnet, oder deine Originaldatei war gar nicht wirklich transparent. Prüfe zuerst die Quelle: Wenn es ein JPG oder eine weiß gefüllte PNG ist, gab es keine Transparenz zu erhalten, und du musst den Hintergrund vor dem Konvertieren entfernen.

Kann ich ein JPG in SVG mit transparentem Hintergrund konvertieren? Nicht direkt, weil ein JPG keine Transparenz speichern kann. Sein Hintergrund ist in die Pixel eingebrannt. Entferne zuerst den Hintergrund (schneide das Motiv frei und exportiere eine transparente PNG) und konvertiere dann diese in SVG.

Wie erhalte ich Transparenz, wenn ich eine PNG in SVG konvertiere? Starte mit einer wirklich transparenten PNG und nutze einen Konverter, der den Alpha-Kanal respektiert, also dein Motiv nachzeichnet und den Rest leer lässt. Prüfe das Ergebnis anschließend auf einem farbigen Hintergrund und lösche jedes verirrte Rechteck, das die Nachzeichnung möglicherweise hinzugefügt hat.

Wie entferne ich einen weißen Hintergrund aus einem SVG? Öffne das SVG, wähle die Formen aus und lösche das weiße Rechteck in voller Größe hinter deinem Artwork. Wenn das Weiß Teil eines eingebetteten Rasterbilds ist und keine Form, konvertiere stattdessen erneut aus einer wirklich transparenten Quelle.


Hängt dein transparentes Logo noch als PNG fest? Verwandle es in ein sauberes SVG, das seine Transparenz behält, und lege es anschließend auf einen farbigen Hintergrund, um sicherzugehen, dass sie wirklich angekommen ist.

Mehr aus dem Blog