Modifier les couleurs SVG en Python

Reponse rapide: Pour modifier les couleurs SVG en Python, chargez le fichier avec SVGDocument, trouvez les elements avec des selecteurs ou une recherche par nom de balise, mettez a jour fill, stroke, style ou stop-color avec set_attribute(), puis enregistrez le SVG edite.

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")

Dans cet article, vous apprendrez a:

modifier les attributs SVG fill et stroke en Python;
remplacer une valeur de couleur textuelle exacte dans plusieurs elements SVG;
mettre a jour les couleurs stockees dans des attributs inline style;
modifier les couleurs des stops de degrade SVG sans changer le reste du dessin.

Ou les couleurs SVG sont stockees

Les couleurs SVG peuvent etre definies a plusieurs endroits. Avant de modifier un fichier, inspectez le balisage et choisissez la methode d’edition qui correspond a l’endroit ou le SVG d’origine stocke la couleur.

Emplacement de la couleur	Exemple	Meilleure approche d’edition
Attribut de presentation	`fill="#ff0000"`	Definir `fill`, `stroke` ou un autre attribut de couleur sur l’element
Style inline	`style="fill:#ff0000;stroke:#222"`	Mettre a jour la propriete requise dans l’attribut `style`
Stop de degrade	`<stop stop-color="#ff0000">`	Mettre a jour `stop-color` sur les elements `<stop>`
Style de groupe herite	`<g fill="#ff0000">`	Modifier l’attribut du groupe ou remplacer les elements enfants
Regle CSS	`<style>.logo { fill: red; }</style>`	Modifier le texte de la feuille de style ou convertir la regle en attributs inline

Les exemples ci-dessous utilisent une edition basee sur le DOM. C’est generalement plus sur qu’un remplacement de texte brut, car le code cible des elements et attributs SVG au lieu de chaque chaine correspondante dans le fichier.

Comment modifier les couleurs SVG en Python

Utilisez ce flux lorsque vous devez recolorer un fichier SVG tout en conservant sa structure:

Chargez le fichier SVG avec SVGDocument.
Verifiez ou la couleur est stockee, par exemple dans fill, stroke, inline style ou stop-color.
Trouvez l’element cible ou le groupe d’elements avec un selecteur, une recherche par nom de balise ou un parcours DOM.
Mettez a jour l’attribut de couleur ou la declaration de style pertinente.
Enregistrez le SVG edite et comparez la sortie avec l’image source.

Cet article utilise le fichier d’exemple change-svg-colors.svg pour les exemples de code et les illustrations. Il contient des attributs de couleur directs, un style inline, une couleur de groupe heritee et un degrade, ce qui permet d’utiliser la meme entree dans tout l’article. Utilisez-le comme data/change-svg-colors.svg lors de l’execution des exemples.

Modifier les couleurs Fill et Stroke

Utilisez ce flux lorsque le SVG stocke les couleurs directement dans les attributs fill ou stroke. L’exemple charge change-svg-colors.svg, trouve le premier cercle, modifie son fill et son stroke, puis enregistre le resultat comme nouveau fichier SVG.

 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)

Le code suit ce flux d’edition de couleur SVG:

Il charge le fichier SVG comme SVGDocument.
Il trouve l’element cible avec query_selector().
Il met a jour les attributs fill, stroke et stroke-width avec set_attribute().
Il enregistre le SVG edite avec SVGDocument.save().

L’illustration ci-dessous montre le fichier SVG source (a) et le resultat apres modification des attributs fill, stroke et stroke-width du cercle (b). Les autres elements restent inchanges, ce qui rend l’effet du premier exemple facile a voir.

SVG original et resultat apres modification des couleurs fill et stroke du cercle

Remplacer une couleur specifique dans de nombreux elements

Utilisez cette approche lorsque vous voulez remplacer une valeur de couleur textuelle exacte dans de nombreux elements SVG. L’exemple modifie chaque attribut fill ou stroke qui correspond exactement a l’ancienne couleur.

 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)

Cet exemple compare la couleur comme valeur textuelle. Il modifie #ff0000 et #FF0000, mais ne traite pas red, rgb(255,0,0) et #f00 comme la meme couleur. Si votre entree utilise plusieurs formats de couleur, normalisez ces valeurs dans une etape de pretraitement ou traitez chaque ecriture explicitement.

Modifier les couleurs dans les attributs Inline Style

Certains outils SVG stockent les couleurs dans l’attribut style plutot que dans des attributs directs fill ou stroke. Dans ce cas, mettez a jour la declaration CSS requise tout en conservant le reste du style inline.

 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)

La fonction auxiliaire ne change que les proprietes de style demandees. Cela evite une erreur courante ou le code remplace tout l’attribut style et supprime accidentellement l’opacite, l’epaisseur de trait, la police ou des styles lies a transform stockes dans le meme attribut.

Modifier les couleurs des stops de degrade

Les couleurs de degrade sont generalement stockees dans des elements <stop>. Pour recolorer un degrade, mettez a jour les attributs stop-color au lieu de modifier le fill de la forme qui reference le degrade.

 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)

Si le degrade contient plus de stops que la liste ne contient de couleurs, l’exemple reutilise la derniere couleur. En code de production, vous pouvez associer les couleurs par offset, par position dans le degrade ou par une valeur stop-color existante.

L’illustration ci-dessous compare le degrade SVG d’origine (a) au resultat apres mise a jour des valeurs stop-color sur les stops de degrade (b). Le cercle, l’element avec style inline et la couleur de groupe heritee restent inchanges, de sorte que l’image se concentre uniquement sur l’edition du degrade.

SVG original et resultat apres modification des couleurs des stops de degrade

Erreurs courantes et solutions

Probleme	Cause probable	Solution
La couleur n’a pas change	La couleur est stockee dans `style`, une regle CSS, un degrade ou un groupe parent	Inspectez le balisage SVG et mettez a jour l’emplacement reel de la couleur
Un seul element a change	Le code a utilise `query_selector()` et n’a trouve que le premier resultat	Pour de nombreuses mises a jour d’attributs, preferez la recherche par nom de balise comme ci-dessus. Utilisez `query_selector_all()` seulement pour les changements pris en charge par les noeuds retournes, comme les mises a jour de texte.
Les styles inline ont ete perdus	Tout l’attribut `style` a ete remplace	Mettez a jour uniquement la propriete CSS necessaire et conservez les autres declarations
La couleur du degrade est restee identique	La couleur visible vient des elements `<stop>` du degrade	Mettez a jour `stop-color` sur les noeuds `<stop>` dans le degrade
Des couleurs correspondantes ont ete ignorees	Le fichier utilise differentes ecritures comme `red`, `#f00` ou `rgb(255,0,0)`	Traitez chaque format de couleur attendu ou normalisez les couleurs avant comparaison
Le fichier de sortie est inchange	Le document edite n’a pas ete enregistre ou le mauvais fichier a ete ouvert	Appelez `document.save(output_path)` apres les editions et verifiez le chemin d’entree

FAQ

Comment changer la couleur fill d'un SVG en Python?

Chargez le SVG avec SVGDocument, trouvez l’element avec document.root_element.query_selector() ou get_elements_by_tag_name(), appelez ensuite element.set_attribute("fill", "#2e86de") et enregistrez le document avec document.save(output_path).

Comment changer la couleur stroke d'un SVG en Python?

Chargez le SVG avec SVGDocument, selectionnez l’element qui dessine le contour, puis appelez element.set_attribute("stroke", "#1b4f72"). Si le contour manque ou est trop fin, definissez aussi stroke-width, par exemple element.set_attribute("stroke-width", "4"), puis enregistrez le SVG.

Puis-je remplacer une couleur dans tout le fichier SVG?

Oui. Parcourez les elements pertinents et mettez a jour les valeurs correspondantes de fill, stroke, style ou stop-color. La comparaison comme texte fonctionne seulement lorsque l’ecriture de la couleur dans le SVG correspond a la valeur comparee par votre code.

Pourquoi modifier fill n'affecte-t-il pas mon SVG?

La couleur visible peut venir d’un inline style, d’une regle CSS, d’un degrade ou d’un style herite du parent. Inspectez le balisage SVG avant de choisir la modification.

Puis-je modifier les couleurs d'un degrade SVG?

Oui. Chargez le SVG avec SVGDocument, parcourez les stops de degrade avec document.get_elements_by_tag_name("stop"), mettez a jour chaque stop avec stop.set_attribute("stop-color", new_color) et enregistrez le fichier edite avec document.save(output_path).