Editer les styles SVG en Python

Reponse rapide: Pour editer des styles SVG en Python, chargez le fichier avec SVGDocument, trouvez l’element cible, mettez a jour les attributs de presentation ou l’attribut style avec Element.set_attribute(), modifiez le texte de <style> lorsque le SVG utilise des regles CSS, puis enregistrez le document.

1from aspose.svg import SVGDocument
2
3with SVGDocument("document.svg") as document:
4    element = document.root_element.query_selector("#target")
5    if element is not None:
6        element.set_attribute("style", "fill:#dffbe1;stroke:#006b07;stroke-width:3")
7    document.save("styled.svg")

Dans cet article, vous apprendrez a:

definir des attributs de presentation SVG comme fill, stroke et stroke-width;
mettre a jour des valeurs dans un attribut inline style;
editer des regles CSS stockees dans un bloc SVG <style>;
changer des noms de classes et comprendre quelle couche de style a priorite.

Options de style SVG

Les styles SVG peuvent venir d’attributs, de CSS inline, de blocs de style, de classes ou de styles de groupe herites. Avant d’editer un fichier, inspectez la source et identifiez quelle couche de style controle le resultat visible. Cet article se concentre sur la structure et la priorite des styles, tandis que Modifier les couleurs SVG en Python traite des flux propres aux couleurs comme fill, stroke et les stops de degrade.

Emplacement du style	Exemple	Quand l’editer
Attributs de presentation	`fill="#e3f2fd" stroke="#1565c0"`	Pour un style simple et explicite sur un element
Style inline	`style="fill:#fff3e0;stroke:#ef6c00"`	Lorsque le SVG source stocke deja plusieurs declarations dans `style`
Bloc CSS `<style>`	`<style>.panel { stroke-width: 3; }</style>`	Lorsque de nombreux elements partagent des regles basees sur des classes
Classe ou ID	`class="panel muted"`	Lorsque vous voulez changer quelle regle CSS s’applique
Style herite	`<g opacity="0.45">...</g>`	Lorsqu’un groupe doit controler des elements enfants qui ne remplacent pas la propriete

Regle de priorite des styles: Pour une meme propriete SVG, inline style sur l’element a generalement la priorite la plus forte. Les regles CSS dans un bloc <style> peuvent remplacer les attributs de presentation selon la specificite du selecteur et l’ordre dans la source. Les attributs de presentation comme fill, stroke ou opacity sont souvent les valeurs les plus simples au niveau element. Les styles herites des groupes parents ne s’appliquent que si l’element enfant ne definit pas une valeur plus forte.

Comment editer des styles SVG en Python

Utilisez ce flux lorsque le resultat visible est controle par les styles SVG plutot que par la geometrie:

Chargez le fichier SVG avec SVGDocument.
Identifiez la couche de style active, par exemple attributs de presentation, inline style, regles CSS, noms de classes ou styles de groupe herites.
Trouvez l’element cible ou le bloc <style> avec query_selector() et un selecteur stable.
Mettez a jour l’attribut de style, la declaration, la regle CSS ou la valeur class avec set_attribute() ou en modifiant le texte de <style>.
Enregistrez le SVG edite avec SVGDocument.save() et verifiez que des couches de style plus fortes ne remplacent pas votre changement.

Cet article utilise le fichier d’exemple work-with-svg-styles.svg pour les exemples de code. Vous pouvez l’utiliser comme data/work-with-svg-styles.svg lors de l’execution des exemples. L’exemple contient trois cartes visibles: une stylisee avec des attributs de presentation, une avec inline style et une avec des regles CSS d’un bloc <style>.

Definir des attributs de presentation

Les attributs de presentation sont la couche de style la plus simple a editer. Utilisez-les lorsqu’un element precis doit porter un style explicite comme fill, stroke, stroke-width, opacity, font-size ou display.

L’exemple suivant met a jour uniquement le cercle dans #presentation-card. Il trouve l’element avec Element.query_selector(), definit de nouveaux attributs lies au style et enregistre le SVG edite sous presentation-attributes-updated.svg avec SVGDocument.save().

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "work-with-svg-styles.svg")
 7output_path = os.path.join(output_folder, "presentation-attributes-updated.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument(input_path) as document:
11    circle = document.root_element.query_selector("#presentation-card circle")
12
13    if circle is not None:
14        circle.set_attribute("fill", "#ffd4f8")
15        circle.set_attribute("stroke", "#1565c0")
16        circle.set_attribute("stroke-width", "3")
17
18    document.save(output_path)

La sortie conserve la structure SVG d’origine, mais le cercle a maintenant ses propres attributs fill, stroke et stroke-width. Cette approche est facile a inspecter dans le fichier enregistre, car le style est ecrit directement sur l’element cible.

L’image ci-dessous compare le SVG source (a) au resultat apres modification des attributs de presentation sur le cercle (b).

SVG original et resultat apres definition des attributs de presentation en Python

Mettre a jour des declarations Inline Style

Utilisez cette approche lorsque l’element SVG possede deja un attribut style et que vous devez changer des valeurs a l’interieur sans deplacer le style vers des attributs de presentation. Dans le SVG d’exemple, le rectangle de #inline-card contient trois declarations inline: fill, stroke et stroke-width.

L’exemple lit la valeur style existante, remplace les declarations connues, reecrit le style mis a jour sur le meme rectangle et enregistre inline-style-updated.svg.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "work-with-svg-styles.svg")
 7output_path = os.path.join(output_folder, "inline-style-updated.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument(input_path) as document:
11    panel = document.root_element.query_selector("#inline-card .panel")
12
13    if panel is not None:
14        style = panel.get_attribute("style")
15        style = style.replace("fill:#fff3e0", "fill:#dffbe1")
16        style = style.replace("stroke:#ef6c00", "stroke:#006b07")
17        panel.set_attribute("style", style)
18
19    document.save(output_path)

Le code conserve l’attribut inline style et ne modifie que les declarations qui definissent la couleur du panneau et son contour. C’est utile pour des modeles SVG controles ou le texte exact du style est previsible. Pour des fichiers SVG exportes de facon arbitraire, analysez ou normalisez les declarations CSS avant de remplacer du texte.

L’image montre comment le panneau avec style inline change apres la mise a jour des declarations fill, stroke et stroke-width.

SVG original et resultat apres mise a jour des declarations de style inline en Python

Editer un bloc CSS Style

Certains fichiers SVG contiennent un element <style> avec des regles basees sur des classes. C’est frequent dans les fichiers exportes depuis des outils de design ou generes a partir de modeles. Dans ce cas, mettez a jour le texte de la feuille de style plutot que de definir le meme attribut sur chaque element.

Le SVG d’exemple utilise la regle .panel pour le rectangle dans #css-card et la regle .muted pour reduire l’opacite de toute la carte. L’exemple suivant edite ces deux regles CSS visibles: il change la couleur partagee du panneau et rend la carte stylisee par CSS totalement opaque.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "work-with-svg-styles.svg")
 7output_path = os.path.join(output_folder, "css-block-updated.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument(input_path) as document:
11    style_element = document.root_element.query_selector("style")
12
13    if style_element is not None:
14        css_text = style_element.text_content
15        css_text = css_text.replace(
16            ".panel { fill: #ffffff; stroke: #546e7a; stroke-width: 3; }",
17            ".panel { fill: #ede7f6; stroke: #512da8; stroke-width: 5; }"
18        )
19        css_text = css_text.replace(".muted { opacity: 0.45; }", ".muted { opacity: 1; }")
20        style_element.text_content = css_text
21
22    document.save(output_path)

Ce modele fonctionne bien pour des modeles SVG controles ou le texte CSS est previsible. Le code met a jour des regles de classe partagees dans le bloc <style>, de sorte que chaque element utilisant ces classes peut changer depuis un seul endroit. Si la feuille de style est minifiee, reordonnee ou generee par un autre outil, mettez-la a jour avec un parseur CSS dans votre application avant de remettre le texte final dans l’element <style>.

L’image compare le SVG source (a) a la sortie apres edition des regles dans le bloc CSS <style> (b).

SVG original et resultat apres edition d’un bloc CSS style en Python

Modifier les styles bases sur les classes

Utilisez les changements de classe lorsque l’apparence du SVG est deja decrite par des regles CSS et que l’element doit seulement changer d’etat. Par exemple, vous pouvez supprimer muted, ajouter selected ou remplacer une classe par une autre sans reecrire le bloc <style>.

Le SVG d’exemple utilise class="muted" sur #css-card. L’exemple suivant supprime cette classe, de sorte que la regle .muted ne reduit plus l’opacite de la carte.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "work-with-svg-styles.svg")
 7output_path = os.path.join(output_folder, "class-updated.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument(input_path) as document:
11    css_card = document.root_element.query_selector("#css-card")
12
13    if css_card is not None:
14        css_card.set_attribute("class", "")
15
16    document.save(output_path)

Le fichier enregistre conserve les regles CSS sans changement, mais #css-card ne correspond plus a .muted. Utilisez cette technique lorsque des classes representent des etats comme selected, disabled, muted, highlighted ou hidden.

Choisir la bonne methode de style

Tache	Methode recommandee	Pourquoi
Rendre un element facile a inspecter	Attributs de presentation	La valeur finale est visible directement sur l’element
Conserver les declarations inline existantes	Mettre a jour l’attribut `style`	Le SVG garde le meme format de style que le fichier source
Modifier de nombreux elements qui partagent une regle	Bloc CSS `<style>`	Une regle peut mettre a jour tous les elements correspondants
Basculer un etat visuel predefini	Modifier `class`	Le CSS reste centralise et l’element choisit l’etat
Deboguer un style qui ne change pas	Inspecter priorite et selecteurs	Un style inline, une regle CSS ou une valeur de groupe heritee plus forte peut etre actif

Utilisez les attributs de presentation pour une sortie explicite au niveau element. Utilisez les styles inline lorsque vous devez conserver la facon dont le fichier source stocke deja le style. Utilisez les blocs CSS lorsque le fichier est base sur des classes ou lorsque de nombreux elements doivent partager les memes regles visuelles.

Erreurs courantes et solutions

Probleme	Solution
Le selecteur ne trouve rien	Verifiez l’ID de l’element, la classe, le namespace et l’existence de la cible dans le SVG source.
Le changement d’attribut n’a pas d’effet visible	Cherchez un inline `style`, une regle CSS ou une valeur de groupe heritee ayant une priorite plus forte.
La mise a jour de `style` supprime d’autres reglages	Lisez d’abord la valeur actuelle de `style` et conservez les declarations qui doivent rester dans la sortie.
Le remplacement du texte CSS ne s’applique pas	Le texte de la feuille de style peut avoir des espaces ou un ordre differents. Utilisez des modeles previsibles ou analysez le CSS avant de le reecrire.
Le fichier de sortie est inchange	Enregistrez le document edite avec `document.save(output_path)` et ouvrez le fichier de sortie, pas l’entree d’origine.

FAQ

Comment editer des styles SVG en Python avec Aspose.SVG?

Chargez le SVG avec SVGDocument, trouvez l’element cible, puis mettez a jour les attributs de presentation, l’attribut inline style, le texte CSS dans <style> ou la classe class de l’element. Enregistrez le document edite apres la modification.

Dois-je utiliser des attributs de presentation ou inline style?

Utilisez les attributs de presentation pour des editions simples au niveau element qui doivent etre faciles a inspecter. Utilisez inline style lorsque le SVG source stocke deja plusieurs declarations CSS dans un attribut style et que vous voulez conserver cette structure.

Quand dois-je editer le bloc style SVG?

Editez le bloc <style> lorsqu’une regle CSS controle plusieurs elements ou lorsque le SVG vient d’un modele utilisant des classes. Ainsi, une seule regle peut mettre a jour chaque element correspondant.

Pourquoi ma modification de style SVG n'apparait-elle pas?

Une source de style plus forte peut etre active. Verifiez inline style, les selecteurs CSS correspondants, les styles de groupe herites et le selecteur exact utilise pour trouver l’element.

Puis-je changer l'apparence SVG en modifiant les classes?

Oui. Si le SVG definit des classes CSS reutilisables, mettez a jour l’attribut class de l’element pour changer les etats visuels sans reecrire la feuille de style.