SVG-Farben in Python ändern

Kurzantwort: Um SVG-Farben in Python zu ändern, laden Sie die Datei mit SVGDocument, finden Elemente mit Selektoren oder Tag-Namen-Suche, aktualisieren fill, stroke, style oder stop-color mit set_attribute() und speichern das bearbeitete SVG.

1from aspose.svg import SVGDocument
2
3with SVGDocument("document.svg") as document:
4    circle = document.root_element.query_selector("circle")
5    if circle is not None:
6        circle.set_attribute("fill", "#2e86de")
7        circle.set_attribute("stroke", "#1b4f72")
8    document.save("recolored.svg")

In diesem Artikel lernen Sie, wie Sie:

SVG-Attribute fill und stroke in Python ändern;
einen exakten Farbwert als Text in mehreren SVG-Elementen ersetzen;
Farben aktualisieren, die in inline style-Attributen gespeichert sind;
Farben von SVG-Gradientenstops ändern, ohne andere Grafikteile zu beeinflussen.

Wo SVG-Farben gespeichert sind

SVG-Farben können an mehreren Stellen definiert sein. Prüfen Sie vor der Änderung die Markup-Struktur und wählen Sie die Bearbeitungsmethode, die zur Farbspeicherung im ursprünglichen SVG passt.

Speicherort der Farbe	Beispiel	Beste Bearbeitungsmethode
Präsentationsattribut	`fill="#ff0000"`	`fill`, `stroke` oder ein anderes Farbattribut am Element setzen
Inline-Stil	`style="fill:#ff0000;stroke:#222"`	Die benötigte Eigenschaft im Attribut `style` aktualisieren
Gradientenstop	`<stop stop-color="#ff0000">`	`stop-color` an `<stop>`-Elementen aktualisieren
Geerbter Gruppenstil	`<g fill="#ff0000">`	Gruppenattribut ändern oder Kinderelemente überschreiben
CSS-Regel	`<style>.logo { fill: red; }</style>`	Stylesheet-Text bearbeiten oder die Regel in Inline-Attribute überführen

Die Beispiele unten verwenden DOM-basierte Bearbeitung. Das ist meist sicherer als einfache Textersetzung, weil der Code SVG-Elemente und Attribute anspricht und nicht jede passende Zeichenkette in der Datei.

So ändern Sie SVG-Farben in Python

Verwenden Sie diesen Workflow, wenn Sie eine SVG-Datei umfärben und ihre Struktur beibehalten möchten:

Laden Sie die SVG-Datei mit SVGDocument.
Prüfen Sie, wo die Farbe gespeichert ist, etwa in fill, stroke, inline style oder stop-color.
Finden Sie das Zielelement oder eine Elementgruppe mit einem Selektor, einer Tag-Namen-Suche oder DOM-Traversierung.
Aktualisieren Sie das relevante Farbattribut oder die Stil-Deklaration.
Speichern Sie das bearbeitete SVG und vergleichen Sie die Ausgabe mit dem Ausgangsbild.

Dieser Artikel verwendet die Beispieldatei change-svg-colors.svg für Codebeispiele und Abbildungen. Sie enthält direkte Farbattribute, einen Inline-Stil, eine geerbte Gruppenfarbe und einen Gradienten, sodass dieselbe Eingabedatei im ganzen Artikel genutzt werden kann. Verwenden Sie sie beim Ausführen der Beispiele als data/change-svg-colors.svg.

Fill- und Stroke-Farben ändern

Verwenden Sie diesen Workflow, wenn das SVG Farben direkt in den Attributen fill oder stroke speichert. Das Beispiel lädt change-svg-colors.svg, findet den ersten Kreis, ändert fill und stroke und speichert das Ergebnis als neue SVG-Datei.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "change-svg-colors.svg")
 7output_path = os.path.join(output_folder, "circle-recolored.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument(input_path) as document:
11    svg_element = document.root_element
12    circle = svg_element.query_selector("circle")
13
14    if circle is not None:
15        circle.set_attribute("fill", "#2e86de")
16        circle.set_attribute("stroke", "#1b4f72")
17        circle.set_attribute("stroke-width", "4")
18
19    document.save(output_path)

Der Code folgt diesem Workflow zur Bearbeitung von SVG-Farben:

Er lädt die SVG-Datei als SVGDocument.
Er findet das Zielelement mit query_selector().
Er aktualisiert die Attribute fill, stroke und stroke-width mit set_attribute().
Er speichert das bearbeitete SVG mit SVGDocument.save().

Die Abbildung unten zeigt die ursprüngliche SVG-Datei (a) und das Ergebnis nach dem Ändern der Attribute fill, stroke und stroke-width des Kreises (b). Die anderen Elemente bleiben unverändert, sodass der Effekt des ersten Beispiels klar sichtbar ist.

Ursprüngliches SVG und Ergebnis nach dem Ändern der Fill- und Stroke-Farben des Kreises

Eine bestimmte Farbe in vielen Elementen ersetzen

Verwenden Sie diesen Ansatz, wenn Sie einen exakten Farbwert als Text in vielen SVG-Elementen ersetzen möchten. Das Beispiel ändert jedes Attribut fill oder stroke, das exakt der alten Farbe entspricht.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "change-svg-colors.svg")
 7output_path = os.path.join(output_folder, "sample-blue.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10old_color = "#ff0000"
11new_color = "#0057b8"
12
13with SVGDocument(input_path) as document:
14    for element in document.get_elements_by_tag_name("*"):
15        for attribute_name in ("fill", "stroke"):
16            if element.has_attribute(attribute_name):
17                value = element.get_attribute(attribute_name).strip()
18                if value.lower() == old_color.lower():
19                    element.set_attribute(attribute_name, new_color)
20
21    document.save(output_path)

Dieses Beispiel vergleicht Farbe als Textwert. Es ändert #ff0000 und #FF0000, behandelt aber red, rgb(255,0,0) und #f00 nicht als dieselbe Farbe. Wenn Ihre Eingabe mehrere Farbformate verwendet, normalisieren Sie diese Werte in einem eigenen Vorbereitungsschritt oder behandeln Sie jede Schreibweise explizit.

Farben in Inline-Style-Attributen ändern

Einige SVG-Werkzeuge speichern Farben im Attribut style statt in direkten fill- oder stroke-Attributen. Aktualisieren Sie in diesem Fall die benötigte CSS-Deklaration und lassen Sie den restlichen Inline-Stil unverändert.

 1import os
 2from aspose.svg import SVGDocument
 3
 4
 5def set_style_property(style_text, property_name, property_value):
 6    declarations = []
 7    updated = False
 8
 9    for part in style_text.split(";"):
10        part = part.strip()
11        if not part:
12            continue
13        if ":" not in part:
14            declarations.append(part)
15            continue
16
17        name, value = part.split(":", 1)
18        if name.strip().lower() == property_name.lower():
19            declarations.append(f"{name.strip()}: {property_value}")
20            updated = True
21        else:
22            declarations.append(f"{name.strip()}: {value.strip()}")
23
24    if not updated:
25        declarations.append(f"{property_name}: {property_value}")
26
27    return "; ".join(declarations)
28
29
30input_folder = "data/"
31output_folder = "output/"
32input_path = os.path.join(input_folder, "change-svg-colors.svg")
33output_path = os.path.join(output_folder, "badge-recolored.svg")
34os.makedirs(output_folder, exist_ok=True)
35
36with SVGDocument(input_path) as document:
37    badge = document.root_element.query_selector(".badge")
38
39    if badge is not None:
40        style = badge.get_attribute("style")
41        style = set_style_property(style, "fill", "#0f766e")
42        style = set_style_property(style, "stroke", "#134e4a")
43        badge.set_attribute("style", style)
44
45    document.save(output_path)

Die Hilfsfunktion ändert nur die angeforderten Stileigenschaften. Dadurch wird ein häufiger Fehler vermieden, bei dem Code das gesamte Attribut style ersetzt und versehentlich opacity, Strichstärke, Schrift oder transformbezogene Stile im selben Attribut entfernt.

Farben von Gradientenstops ändern

Gradientenfarben sind normalerweise in <stop>-Elementen gespeichert. Um einen Gradienten umzufärben, aktualisieren Sie die Attribute stop-color statt das Attribut fill an der Form zu ändern, die auf den Gradienten verweist.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "change-svg-colors.svg")
 7output_path = os.path.join(output_folder, "change-svg-gradient-colors.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10new_gradient_colors = ["#2563eb", "#22c55e", "#facc15"]
11
12with SVGDocument(input_path) as document:
13    stops = document.get_elements_by_tag_name("stop")
14
15    for index, stop in enumerate(stops):
16        color = new_gradient_colors[min(index, len(new_gradient_colors) - 1)]
17        stop.set_attribute("stop-color", color)
18
19    document.save(output_path)

Wenn der Gradient mehr Stops enthält, als Farben in der Liste stehen, verwendet das Beispiel erneut die letzte Farbe. In Produktionscode können Sie Farben nach offset, nach Position im Gradienten oder nach einem vorhandenen stop-color-Wert zuordnen.

Die Abbildung unten vergleicht den ursprünglichen SVG-Gradienten (a) mit dem Ergebnis nach dem Aktualisieren der stop-color-Werte an den Gradientenstops (b). Der Kreis, das Inline-Style-Element und die geerbte Gruppenfarbe bleiben unverändert, sodass sich das Bild nur auf die Gradientenbearbeitung konzentriert.

Ursprüngliches SVG und Ergebnis nach dem Ändern der Farben von Gradientenstops

Häufige Fehler und Lösungen

Problem	Wahrscheinliche Ursache	Lösung
Die Farbe hat sich nicht geändert	Die Farbe ist in `style`, einer CSS-Regel, einem Gradienten oder einer übergeordneten Gruppe gespeichert	Prüfen Sie das SVG-Markup und aktualisieren Sie den tatsächlichen Speicherort der Farbe
Nur ein Element wurde geändert	Der Code hat `query_selector()` verwendet und nur den ersten Treffer gefunden	Verwenden Sie für viele Attributänderungen die Tag-Namen-Suche wie oben gezeigt. Nutzen Sie `query_selector_all()` nur für Änderungen, die von den zurückgegebenen Knoten unterstützt werden, etwa Textänderungen.
Inline-Stile gingen verloren	Das gesamte Attribut `style` wurde überschrieben	Aktualisieren Sie nur die benötigte CSS-Eigenschaft und behalten Sie andere Deklarationen bei
Die Gradientenfarbe blieb gleich	Die sichtbare Farbe kommt aus Gradienten-`<stop>`-Elementen	Aktualisieren Sie `stop-color` an den `<stop>`-Knoten im Gradienten
Passende Farben wurden übersprungen	Die Datei verwendet unterschiedliche Schreibweisen wie `red`, `#f00` oder `rgb(255,0,0)`	Behandeln Sie jedes erwartete Farbformat oder normalisieren Sie Farben vor dem Vergleichen
Die Ausgabedatei ist unverändert	Das bearbeitete Dokument wurde nicht gespeichert oder die falsche Datei wurde geöffnet	Rufen Sie nach den Änderungen `document.save(output_path)` auf und prüfen Sie den Eingabepfad

FAQ

Wie ändere ich die SVG-Fill-Farbe in Python?

Laden Sie das SVG mit SVGDocument, finden Sie das Element mit document.root_element.query_selector() oder get_elements_by_tag_name(), rufen Sie dann element.set_attribute("fill", "#2e86de") auf und speichern Sie das Dokument mit document.save(output_path).

Wie ändere ich die SVG-Stroke-Farbe in Python?

Laden Sie das SVG mit SVGDocument, wählen Sie das Element aus, das die Kontur zeichnet, und rufen Sie element.set_attribute("stroke", "#1b4f72") auf. Wenn die Kontur fehlt oder zu dünn ist, setzen Sie auch stroke-width, zum Beispiel element.set_attribute("stroke-width", "4"), und speichern Sie das SVG.

Kann ich eine Farbe in der ganzen SVG-Datei ersetzen?

Ja. Durchlaufen Sie die relevanten Elemente und aktualisieren Sie passende Werte in fill, stroke, style oder stop-color. Der Vergleich als Text funktioniert nur, wenn die Farbschreibweise im SVG dem Wert entspricht, mit dem Ihr Code vergleicht.

Warum wirkt sich das Ändern von fill nicht auf mein SVG aus?

Die sichtbare Farbe kann aus einem inline style, einer CSS-Regel, einem Gradienten oder einem geerbten Stil des Elternteils stammen. Prüfen Sie das SVG-Markup, bevor Sie die Bearbeitungsmethode wählen.

Kann ich SVG-Gradientenfarben ändern?

Ja. Laden Sie das SVG mit SVGDocument, durchlaufen Sie die Gradientenstops mit document.get_elements_by_tag_name("stop"), aktualisieren Sie jeden Stop mit stop.set_attribute("stop-color", new_color) und speichern Sie die bearbeitete Datei mit document.save(output_path).