Warum SVG-Farben nach dem Export wechseln: Ursachen

Eine SVG verändert nach dem Export ihre Farbe, wenn das Aussehen in der Vorlage und die ausgelieferte Datei unterschiedlich interpretiert werden. Der Exporter kann Farbwerte umwandeln. Eine Website kann fill durch CSS überschreiben oder currentColor von einem übergeordneten Element übernehmen. Ein Verlauf, eine Deckkrafteinstellung, ein Mischmodus oder ein Filter kann von einer Funktion abhängen, die das Ziel anders behandelt. Manchmal ist das exportierte Markup korrekt und nur ein Importprogramm weicht ab.

Beginne nicht damit, jeden Hexwert zu ersetzen. Finde zuerst die Stelle, an der sich das Aussehen verändert. Das zeigt dir, ob du die SVG reparieren, den Export ändern, eine Ausgabekopie vereinfachen oder die Grafik in einem anderen Format behalten solltest.

Ordne dem Symptom die erste Prüfung zu

Wo du zuerst nachsehen solltest

Grenze das Problem in fünf Minuten ein

1. Lass das bearbeitbare Original unangetastet

Speichere ein Duplikat zum Testen. Reduziere keine Effekte, wandle nicht jedes Objekt in Pfade um und ersetze keine Farben in der einzigen bearbeitbaren Kopie. Solche Änderungen können die Ursache verdecken und spätere Überarbeitungen erschweren.

2. Öffne die exportierte SVG an zwei Stellen

Nutze einen aktuellen Browser als neutrale Vergleichsinstanz und öffne oder importiere dieselbe Datei dann im tatsächlichen Ziel. Vergleiche beide auf demselben Hintergrund mit der Quellgrafik.

• Sind beide exportierten Ansichten falsch, untersuche den Exporter oder die serialisierte SVG.
• Ist die eigenständige Browseransicht korrekt und das Ziel falsch, untersuche Einbettung, CSS oder Importerunterstützung.
• Unterscheiden sich nur transparente oder gemischte Bereiche, teste Hintergrund und Effekte, bevor du einfarbige Füllungen anfasst.

Ein Browser ist eine nützliche Vergleichsinstanz, aber kein Beweis dafür, dass jede Design- oder Produktions-App denselben Funktionsumfang importiert.

3. Prüfe die Farbanweisungen

Öffne die SVG in einem Texteditor und suche nach:

fill=
stroke=
currentColor
url(#
opacity=
fill-opacity=
mix-blend-mode
filter=

Du suchst zunächst nach der Struktur und schreibst noch nichts um. Ein wörtliches fill="#2F6BFF" führt zu einem anderen Diagnosezweig als fill="currentColor" oder fill="url(#paint0)".

Wenn du zum ersten Mal SVG-Markup öffnest, erklärt die ausführliche Anleitung zum Bearbeiten einer SVG die Wege über Code und visuelle Editoren.

4. Reduziere ein fehlerhaftes Objekt

Kopiere das kleinste Objekt, das sich weiterhin verändert, in ein neues Dokument und exportiere es. Entferne jeweils eine Funktion: zuerst den Filter, dann den Mischmodus, dann den Verlauf und schließlich die Gruppendeckkraft. Die erste Entfernung, die das Ergebnis korrigiert, identifiziert die nicht unterstützte oder kontextabhängige Funktion.

Dieser Reduktionstest ist sicherer als das Reduzieren der gesamten Illustration, weil er dir eine konkrete Einschränkung für die Ausgabe liefert.

Ursache 1: Der Exporter hat den Farbraum umgewandelt

Hexfarben und die vertraute rgb()-Syntax beschreiben sRGB-Farben. Modernes CSS kann über color() auch Räume mit größerem Farbumfang wie Display P3 ausdrücken, wie im CSS Color Module Level 4 definiert. Eine Design-App kann deshalb eine Quellfarbe enthalten, die umgewandelt werden muss, bevor sie zu einem sRGB-Hexwert wird. Diese Umwandlung kann die Zahlen ändern oder eine Farbe außerhalb des Farbumfangs begrenzen.

Prüfe das Problem in dieser Reihenfolge:

1. Notiere den Farbraum des Quelldokuments und den Zahlenwert des ausgewählten Objekts.
2. Exportiere ein einzelnes flächiges Objekt ohne Transparenz oder Effekte.
3. Öffne die SVG als Text und lies das serialisierte fill oder stroke.
4. Vergleiche den exportierten Zahlenwert mit der Vorlage.
5. Teste dieselbe Datei im Ziel.

Hat sich der Wert in der Datei geändert, fand die Umwandlung beim Export statt. Wähle den Zielfarbraum bewusst und exportiere erneut. Ist der Wert unverändert, das Aussehen aber anders, untersuche CSS, Effekte, Hintergrund oder Importerverhalten.

Bei Druckaufträgen, die CMYK-Separationen, Sonderfarben oder einen bestimmten Schwarzaufbau erfordern, behalte das für den Druck maßgebliche Original im nativen Format der Design-Anwendung und liefere das von der Druckerei verlangte Format, häufig PDF. Eine SVG kann weiterhin für Bildschirme nützlich sein. Sie sollte aber nicht stillschweigend zur Farbautorität für einen Workflow werden, den sie nicht zuverlässig beschreiben kann.

Ursache 2: currentColor oder CSS hat die Farbe ersetzt

SVG kann mit CSS gestaltet werden. Die SVG-2-Spezifikation zur Gestaltung erklärt, dass Präsentationsattribute wie fill mit Spezifität null an der CSS-Kaskade teilnehmen. Autoren-CSS kann sie deshalb überschreiben. Inline-SVG teilt außerdem ein Dokument mit der umgebenden Seite, sodass allgemeine Klassennamen mit Website-Stilen kollidieren können.

currentColor ist eine absichtliche indirekte Zuweisung. Die MDN-Referenz zu SVG-Farben erklärt, dass es einen Wert für fill, stroke, Verlaufsstopps und andere Farbeigenschaften liefert. Das ist für Icons nützlich, die dem umgebenden Text folgen sollen, bedeutet aber auch, dass die Datei an dieser Stelle keine feste Farbe hat.

Nutze eine von zwei Ausgabestrategien:

• Behalte für ein anpassbares Web-Icon currentColor und setze ein ausdrückliches color auf der SVG oder dem vorgesehenen übergeordneten Element.
• Schreibe für eine eigenständige Grafik, die ihre Palette behalten muss, ausdrückliche Füllungen und Konturen und begrenze interne Klassen auf Namen, die nicht kollidieren.

Enthalten mehrere Inline-SVGs IDs wie paint0, clip0 oder gradient1, mache diese IDs eindeutig und aktualisiere ihre Referenzen gemeinsam. Ändere nicht nur die id; jedes url(#id) muss weiterhin aufgelöst werden können.

Wenn du gezielt umfärben möchtest, statt eine Exportabweichung zu beheben, nutze die separate Anleitung zum sicheren Ändern von SVG-Farben.

Ursache 3: Ein Verlauf oder eine Farbreferenz ist beschädigt

SVG-Verläufe und -Muster sind Farbgeber, sogenannte Paint Server. Eine Form verweist auf sie etwa durch fill="url(#brandGradient)", während die Verlaufsdefinition normalerweise in <defs> liegt. Die SVG-2-Spezifikation zu Paint Servern definiert außerdem, wie Verlaufskoordinaten und Transformationen das Ergebnis beeinflussen.

Drei Prüfungen decken die meisten Strukturfehler auf:

1. Jedes url(#id) hat eine passende Definition.
2. IDs bleiben eindeutig, nachdem mehrere SVGs zu einer Seite oder einem Dokument kombiniert wurden.
3. Das Ziel bewahrt den Farbgebertyp, die Einheiten, Transformationen und Verlaufsstopps der Datei.

Wird eine einfache einfarbige Füllung korrekt importiert, der Verlauf aber nicht, behalte den Verlauf im Original und erstelle eine Ausgabekopie für das Ziel. Versuche zuerst einen einfacheren linearen oder radialen Verlauf. Kann das Ziel ihn weiterhin nicht reproduzieren und ist exaktes Aussehen wichtiger als bearbeitbare Farbe, nutze ein Format oder eine reduzierte Grafik, die der empfangende Workflow unterstützt. Kennzeichne diese Kopie klar, damit sie nicht die bearbeitbare Vorlage ersetzt.

Ursache 4: Deckkraft und Mischung haben das sichtbare Ergebnis verändert

Der sichtbare Pixel entspricht nicht immer der gespeicherten Füllfarbe. fill-opacity beeinflusst die Füllung einer Form, Gruppen-opacity wird angewendet, nachdem die Kinder der Gruppe zusammengesetzt wurden, und ein Mischmodus mischt die Quelle mit ihrem Hintergrund. Die W3C-Spezifikation zu Compositing und Mischmodi definiert die Renderingreihenfolge und die vom Hintergrund abhängigen Mischformeln.

Das hat zwei praktische Folgen:

• Dieselbe SVG kann auf einer weißen, schwarzen oder farbigen Seite anders aussehen, ohne dass sich ein Farbwert ändert.
• Deckkraft von einer Gruppe auf jedes Kind zu verlagern kann Überlappungen verändern, weil die Reihenfolge der Bildzusammensetzung eine andere ist.

Teste auf dem tatsächlichen Hintergrund. Entferne dann in einem Duplikat nacheinander mix-blend-mode, Filter, Masken und Gruppendeckkraft. Kann das Ziel einen wesentlichen Effekt nicht bewahren, wähle zwischen einer vereinfachten Vektorbehandlung und einer reduzierten Ausgabegrafik. Reduziere keine vom Problem unabhängigen Teile des Designs.

Ein weißes oder farbiges Rechteck hinter der Grafik ist ein eigener Fall. Die Anleitung zu SVGs mit transparentem Hintergrund zeigt, wie du eine echte Hintergrundform von leerer Zeichenfläche unterscheidest.

Ursache 5: Das Ziel hat nur einen Teil der SVG importiert

SVG ist ein Webstandard, doch viele Desktop-, Druck-, Schneide-, Präsentations- und Website-Werkzeuge übersetzen es in ihr eigenes Objektmodell. Die Unterstützung kann je nach Anwendung und Version variieren. Vermeide Regeln wie „Diese App unterstützt nie Verläufe“, sofern aktuelle offizielle Dokumentation das nicht bestätigt und deine genaue Version damit übereinstimmt.

Nutze stattdessen einen kontrollierten Importtest:

1. Importiere einen einzelnen Pfad mit einfarbiger Füllung.
2. Füge den ursprünglichen Verlauf hinzu.
3. Füge Deckkraft hinzu.
4. Füge den Mischmodus oder Filter hinzu.
5. Halte bei der ersten Version an, die sich verändert.

Jetzt kennst du die Grenze dieses Ziels. Behalte das vollständige Original und exportiere eine Ausgabekopie innerhalb der getesteten Grenze. Sind die Konturen der verschwindende Teil, folge der konturspezifischen Exportdiagnose, statt jede Linie in eine Füllung umzuwandeln.

Wähle die kleinste sichere Korrektur

Wo PerfectVector ins Spiel kommt

PerfectVector ist hilfreich, wenn die Vektorvorlage bereits verloren oder unbrauchbar ist und die beste erhaltene Grafik ein Rasterbild ist. Du kannst dieses Bild in bearbeitbare Vektorformen umwandeln und dann Palette, Transparenz und Pfade prüfen, bevor du das Ergebnis im Ziel öffnest.

Es repariert kein geerbtes CSS, stellt keine fehlende Verlaufsdefinition wieder her, gewinnt kein Farbprofil einer Design-App zurück, bewahrt keinen nicht unterstützten Mischmodus und verändert keinen Importer-Parser. Enthält die SVG weiterhin gute Pfade und Farbanweisungen, repariere die Datei, statt einen Screenshot neu nachzuzeichnen. So bleibt mehr von der ursprünglichen Struktur erhalten.

Checkliste für die Ausgabe

• Behalte das bearbeitbare Original und nimm Korrekturen in einem Duplikat vor.
• Vergleiche die exportierte Datei im Browser und im tatsächlichen Ziel auf demselben Hintergrund.
• Prüfe, ob sich die serialisierten Werte von fill und stroke geändert haben.
• Suche nach currentColor, allgemeinen Klassen und wiederholten IDs.
• Ordne jeder url(#id)-Referenz ihre Definition zu.
• Teste Gruppendeckkraft, Mischmodi, Filter und Masken separat.
• Vereinfache nur die Funktion, die das Ziel nicht reproduzieren kann.
• Öffne oder importiere die endgültige Ausgabedatei erneut, bevor du die vorherige Version ersetzt.

Häufige Fragen

Warum sieht meine SVG im Browser korrekt aus, nach dem Import aber falsch? Die Datei nutzt wahrscheinlich eine Funktion oder einen Gestaltungskontext, den das Ziel anders übersetzt. Importiere einen einfarbigen Pfad und füge Verlauf, Deckkraft, Mischmodus oder Filter anschließend einzeln wieder hinzu. Der erste fehlerhafte Schritt identifiziert die Grenze des Ziels, ohne das Original zu beschädigen.

Sind SVG-Dateien immer RGB? Gängige Hex- und rgb()-Farben sind sRGB, während modernes CSS auch Räume wie Display P3 ausdrücken kann. Design- und Druck-Apps können diese Farben beim Export oder Import umwandeln. Prüfe die serialisierte Farbe und nutze für CMYK- oder Sonderfarbarbeiten das von der Druckerei verlangte Produktionsformat.

Warum wurde meine SVG nach dem Export schwarz? Prüfe, ob die Datei currentColor verwendet, eine CSS-Regel verloren hat oder auf einen fehlenden Verlauf beziehungsweise eine fehlende Farb-ID verweist. Schwarz kann eine geerbte Farbe sein oder durch einen Ersatzwert entstehen, ohne dass die ursprüngliche Füllfarbe ersetzt wurde. Vergleiche die eigenständige Datei mit der eingebetteten oder importierten Version.

Sollte ich jeden Hexwert ersetzen, wenn die Farben falsch aussehen? Nein. Stelle zuerst fest, ob sich die Werte beim Export verändert haben. Sind die Zahlen erhalten, kann ihr Ersetzen ein Problem mit CSS, Farbreferenzen, Mischung, Hintergrund oder Importer verdecken und die Datei an anderen Stellen ungenauer machen.

Kann PerfectVector eine SVG reparieren, deren Farben sich nach dem Export verändert haben? Nicht, wenn bei der SVG lediglich CSS, Verläufe, Deckkraft, Profil oder Importerverhalten repariert werden müssen. PerfectVector passt, wenn der ursprüngliche Vektor verloren ist und du geeignete flächige Rastergrafik als bearbeitbare Vektorformen neu aufbauen musst.

Quellen

1. W3C — SVG-2-Gestaltung — Definiert CSS-Gestaltung, Klassen- und Stilattribute, Präsentationsattribute, Kaskadenverhalten und Vererbung in SVG.
2. MDN — SVG-Attribut color — Erklärt, wie currentColor Farbwerte für Füllungen, Konturen, Verlaufsstopps und verwandte Eigenschaften liefert.
3. W3C — SVG-2-Paint-Server — Definiert lineare und radiale Verläufe, Farbreferenzen, Koordinatensysteme, Transformationen und Farbinterpolation.
4. W3C — CSS Color Module Level 4 — Definiert die sRGB-Farbsyntax und größere vordefinierte Farbräume einschließlich Display P3.
5. W3C — Compositing and Blending Level 1 — Definiert Deckkraftgruppen, Reihenfolge der Bildzusammensetzung, Hintergründe und Mischmodi für SVG und CSS.

Ist die beste erhaltene Vorlage ein PNG oder JPG, baue sie mit PerfectVector als SVG neu auf. Vergleiche das Ergebnis anschließend in einem eigenständigen Browser und im endgültigen Ziel, bevor du die alte Datei ersetzt.