Travailler avec les chemins SVG en Python

Réponse rapide: Pour travailler avec les chemins SVG en Python, chargez le fichier avec SVGDocument, trouvez un élément <path> avec Element.query_selector(), remplacez son attribut d avec set_attribute() et enregistrez le SVG modifié.

from aspose.svg import SVGDocument

with SVGDocument("document.svg") as document:
    path = document.root_element.query_selector("#wave-path")
    if path is not None:
        path.set_attribute("d", "M40 125 C90 65 150 65 200 125 S310 185 370 95")
    document.save("edited.svg")

Dans cet article, vous apprendrez à:

• remplacer tout l’attribut d d’un <path> SVG;
• construire des path data depuis des valeurs de forme plus faciles comme coordonnées, tailles ou points;
• ajouter un segment de chemin contrôlé à un modèle connu;
• choisir entre modifier les path data et utiliser l’attribut transform.

Les SVG path data sont stockées dans l’attribut d d’un élément <path>. Elles contiennent des commandes de dessin comme M pour move, L pour line, C pour courbe de Bézier cubique, Q pour courbe quadratique et Z pour fermer le chemin. Modifier cette valeur change la géométrie réelle du chemin, pas seulement sa position rendue.

Utilisez la modification des path data lorsque vous devez changer le contour lui-même. Si vous devez seulement déplacer, faire pivoter ou mettre à l’échelle une forme existante, utilisez plutôt l’attribut transform. Voir Déplacer, faire pivoter et mettre à l’échelle des éléments SVG en Python pour les workflows de transformation.

Bases de la modification des path data

Le workflow le plus sûr consiste à remplacer toute la valeur d par une chaîne de chemin valide connue. C’est utile pour les icônes, diagrammes générés, marques simples et fichiers SVG de modèle où le chemin possède un ID stable.

Tâche	Modifier	À utiliser lorsque
Changer le contour du chemin	attribut d	La géométrie de la forme doit changer
Déplacer ou mettre à l’échelle le même contour	attribut transform	La forme doit conserver ses coordonnées d’origine
Générer un chemin depuis des paramètres de forme	attribut d construit depuis des coordonnées, tailles ou points	L’entrée utilisateur est plus simple sous forme de valeurs de forme que de commandes de chemin
Recolorer ou restyler le chemin	fill, stroke, style	Seule l’apparence change

Comment modifier SVG path data en Python

Utilisez ce court workflow lorsqu’un SVG existant contient un élément <path> et que vous devez modifier sa géométrie:

1. Chargez le fichier SVG avec SVGDocument.
2. Trouvez le <path> cible par ID, nom de balise ou autre sélecteur stable, par exemple avec query_selector().
3. Préparez une valeur d valide. Vous pouvez écrire la chaîne de chemin complète, la construire depuis des paramètres de forme comme coordonnées, tailles ou points, ou ajouter un segment connu dans un modèle contrôlé.
4. Définissez les nouvelles path data avec set_attribute(), par exemple set_attribute("d", path_data).
5. Enregistrez le SVG modifié avec document.save() et ouvrez le fichier de sortie pour vérifier la nouvelle géométrie.

Les exemples ci-dessous suivent ces mêmes étapes avec différentes sources pour la nouvelle valeur d.

Remplacer SVG path data

Les exemples de code utilisent python-edit-svg-path-data.svg comme fichier d’entrée. Dans le premier workflow, le code trouve #wave-path, remplace son attribut d par une nouvelle courbe et enregistre le résultat sous path-data-replaced.svg.

import os
from aspose.svg import SVGDocument

input_folder = "data/"
output_folder = "output/"
input_path = os.path.join(input_folder, "python-edit-svg-path-data.svg")
output_path = os.path.join(output_folder, "path-data-replaced.svg")
os.makedirs(output_folder, exist_ok=True)

new_path_data = "M30 140 C85 60 155 80 220 120 S320 180 380 90"

with SVGDocument(input_path) as document:
    wave_path = document.root_element.query_selector("#wave-path")

    if wave_path is not None:
        wave_path.set_attribute("d", new_path_data)

    document.save(output_path)

Le code modifie la géométrie du chemin ondulé. Il ne change ni stroke ni fill, donc le style visuel reste le même tandis que la forme de la courbe change. L’image ci-dessous compare le SVG source (a) avec path-data-replaced.svg (b).

Construire path data depuis des coordonnées de rectangle

Écrire l’attribut d à la main est peu pratique lorsque l’entrée vient d’un formulaire, d’une base de données, d’une mise en page de graphique ou d’une autre partie d’une application. Les utilisateurs et les données applicatives décrivent généralement un rectangle par x, y, width et height, pas par des commandes de chemin SVG.

L’exemple suivant conserve ce modèle d’entrée plus convivial. Il prend des coordonnées de rectangle, les convertit en commandes de chemin, écrit ces commandes dans le #marker-path existant et enregistre le résultat sous path-data-from-rectangle.svg. Le marqueur source est un triangle, mais la nouvelle géométrie est volontairement générée comme un rectangle. C’est utile lorsqu’un modèle doit conserver un élément <path>, alors que l’application ou l’interface utilisateur collecte de simples valeurs de rectangle. Les jeux d’icônes, masques et modèles réutilisables attendent souvent des chemins, même lorsque les données d’entrée sont plus faciles à décrire comme une boîte.

import os
from aspose.svg import SVGDocument

input_folder = "data/"
output_folder = "output/"
input_path = os.path.join(input_folder, "python-edit-svg-path-data.svg")
output_path = os.path.join(output_folder, "path-data-from-rectangle.svg")
os.makedirs(output_folder, exist_ok=True)

rect_x = 60
rect_y = 20
rect_width = 80
rect_height = 60

rect_path_data = (
    f"M{rect_x} {rect_y} "
    f"H{rect_x + rect_width} "
    f"V{rect_y + rect_height} "
    f"H{rect_x} Z"
)

with SVGDocument(input_path) as document:
    marker_path = document.root_element.query_selector("#marker-path")

    if marker_path is not None:
        marker_path.set_attribute("d", rect_path_data)

    document.save(output_path)

Le code ne demande pas à l’utilisateur d’écrire les commandes M, H, V ou Z. Il accepte des valeurs ordinaires de rectangle et génère des SVG path data valides à partir d’elles. Le <path> existant conserve fill, stroke et les autres attributs; seule la géométrie stockée dans d change.

L’image ci-dessous compare le SVG source (a) avec path-data-from-rectangle.svg (b).

Ajouter un segment de chemin dans un modèle contrôlé

Vous pouvez ajouter des commandes à des path data existantes lorsque le chemin d’entrée est un modèle contrôlé et que vous savez où se termine le chemin actuel. L’exemple ci-dessous lit la valeur d actuelle de #wave-path, ajoute un segment de ligne et enregistre path-data-extended.svg.

import os
from aspose.svg import SVGDocument

input_folder = "data/"
output_folder = "output/"
input_path = os.path.join(input_folder, "python-edit-svg-path-data.svg")
output_path = os.path.join(output_folder, "path-data-extended.svg")
os.makedirs(output_folder, exist_ok=True)

with SVGDocument(input_path) as document:
    wave_path = document.root_element.query_selector("#wave-path")

    if wave_path is not None:
        current_path_data = wave_path.get_attribute("d").strip()
        wave_path.set_attribute("d", current_path_data + " L395 95")

    document.save(output_path)

Utilisez cette approche uniquement lorsque le chemin source est prévisible. Dans des fichiers SVG arbitraires, les path data peuvent contenir des commandes relatives, plusieurs sous-chemins, des commandes abrégées ou des formes fermées. Dans ces cas, remplacer toute la valeur d ou utiliser un analyseur de chemins SVG dédié est plus sûr que modifier le texte des commandes par hypothèse.

L’image ci-dessous compare le SVG source (a) et path-data-extended.svg (b). Le segment de ligne ajouté continue depuis la fin du chemin ondulé original; cette technique doit donc être utilisée uniquement lorsque le point final et le contexte de commande sont connus.

Erreurs courantes et solutions

Problème	Solution
Le chemin disparaît	Vérifiez que la nouvelle valeur d est une SVG path data valide et commence par une commande de déplacement comme M
Le chemin bouge mais la forme ne change pas	Vous avez modifié transform au lieu de d; modifiez d lorsque la géométrie elle-même doit changer
Le fichier de sortie est inchangé	Enregistrez le document après la modification et ouvrez le chemin de sortie, pas le SVG d’entrée
Les commandes ajoutées créent une forme étrange	Ajoutez seulement lorsque vous connaissez le point final actuel et le type de commande; sinon remplacez toute la valeur d
Le rectangle apparaît au mauvais endroit	Vérifiez les valeurs x, y, width et height avant de construire la chaîne d
Les courbes ne ressemblent pas au résultat attendu	Vérifiez si le chemin utilise des commandes cubiques C, quadratiques Q, lisses S ou T, ou des commandes relatives en minuscules

FAQ

Comment modifier SVG path data en Python?

Chargez le SVG avec SVGDocument, trouvez l’élément <path> cible et appelez set_attribute("d", new_path_data). Enregistrez le document après la mise à jour de l’attribut d.

Qu'est-ce que l'attribut SVG d?

L’attribut d stocke les commandes de chemin qui définissent la géométrie d’un élément <path>. Des commandes comme M, L, C, Q et Z décrivent des déplacements, lignes, courbes et chemins fermés.

Dois-je modifier path data ou utiliser transform?

Modifiez d lorsque le contour réel doit changer. Utilisez transform lorsque vous devez seulement déplacer, faire pivoter ou mettre à l’échelle le contour existant sans réécrire ses coordonnées.

Puis-je ajouter des commandes à des SVG path data existantes?

Oui, mais uniquement pour une entrée contrôlée où vous connaissez le point final actuel et le contexte de commande. Pour des fichiers SVG arbitraires, remplacez toute la valeur d ou analysez les path data avant de les modifier.

Puis-je modifier tous les chemins avec query_selector_all()?

Non, pas pour le workflow set_attribute("d", ...) présenté dans cet article. Dans Aspose.SVG for Python via .NET, les éléments retournés par query_selector_all() peuvent être des objets Node qui n’exposent pas set_attribute(). Pour mettre à jour l’attribut d sur plusieurs chemins, utilisez document.get_elements_by_tag_name("path"), parcourez les éléments retournés et appelez set_attribute() sur chacun d’eux.

Articles associés

• Dessin SVG et chemins en Python présente les workflows de dessin, formes de base, chemins, coordonnées et création d’icônes.
• Déplacer, faire pivoter et mettre à l’échelle des éléments SVG en Python explique quand utiliser transform au lieu de réécrire les path data.
• Modifier des éléments SVG avec des sélecteurs CSS en Python montre comment trouver des éléments SVG avec des ID, classes et sélecteurs limités.
• Travailler avec les attributs SVG explique comment lire, mettre à jour, vérifier et supprimer des attributs SVG.
• Modifier les styles SVG en Python couvre les modifications de style pour les chemins et autres éléments SVG.
• Changer les couleurs SVG en Python explique comment mettre à jour les couleurs fill, stroke et de style des chemins.