Dessiner des formes SVG en Python

Réponse rapide: Pour dessiner des formes SVG en Python, créez un SVGDocument, définissez la taille et le viewBox de la racine SVG, créez des éléments de forme avec create_element_ns(), définissez les attributs de géométrie et de style avec set_attribute(), ajoutez chaque forme à la racine et enregistrez le SVG.

from aspose.svg import SVGDocument

with SVGDocument() as document:
    svg = document.root_element
    rect = document.create_element_ns("http://www.w3.org/2000/svg", "rect")
    rect.set_attribute("width", "80")
    rect.set_attribute("height", "50")
    svg.append_child(rect)
    document.save("shapes.svg")

Dans cet article, vous apprendrez à:

• créer des éléments de forme SVG en Python;
• définir les attributs de géométrie pour rect, circle, ellipse, line, polyline et polygon;
• appliquer les attributs fill et stroke aux formes générées;
• enregistrer un dessin SVG complet construit à partir de plusieurs éléments.

Les formes SVG sont les blocs les plus simples pour générer des diagrammes, icônes, graphiques, badges et illustrations. Chaque forme possède ses propres attributs de géométrie: un rectangle utilise x, y, width et height; un cercle utilise cx, cy et r; un polygone utilise une liste points. Pour un contexte plus large sur le balisage SVG, consultez le guide SVG Shapes.

Bases des formes SVG

Élément	Attributs de géométrie principaux	À utiliser pour
<rect>	x, y, width, height, rx	Boîtes, panneaux, cartes et rectangles arrondis
<circle>	cx, cy, r	Points, badges, marqueurs et icônes circulaires
<ellipse>	cx, cy, rx, ry	Ovales ou marqueurs non circulaires
<line>	x1, y1, x2, y2	Un seul segment droit
<polyline>	points	Segments ouverts connectés
<polygon>	points	Formes fermées comme les triangles et les étoiles

Comment dessiner des formes SVG en Python

Utilisez ce workflow lorsque vous devez générer un dessin SVG à partir de primitives de forme:

1. Créez un SVGDocument.
2. Définissez les attributs width, height et viewBox de la racine SVG.
3. Créez chaque forme avec document.create_element_ns(namespace_uri, qualified_name).
4. Définissez les attributs de géométrie et de style avec set_attribute().
5. Ajoutez chaque forme visible à la racine SVG avec append_child().
6. Enregistrez le document avec document.save(output_path).

Dessiner des rectangles, cercles et ellipses

Utilisez rectangles, cercles et ellipses lorsque l’illustration peut être décrite par des valeurs simples de centre, taille et rayon. L’exemple suivant crée une petite scène avec un rectangle plein comme arrière-plan, un cercle comme objet principal et une ellipse comme ombre douce.

import os
from aspose.svg import SVGDocument

namespace_uri = "http://www.w3.org/2000/svg"

output_folder = "output/"
output_path = os.path.join(output_folder, "svg-basic-shapes.svg")
os.makedirs(output_folder, exist_ok=True)

with SVGDocument() as document:
    svg = document.root_element
    svg.set_attribute("width", "300")
    svg.set_attribute("height", "200")
    svg.set_attribute("viewBox", "0 0 300 200")

    rectangle = document.create_element_ns(namespace_uri, "rect")
    rectangle.set_attribute("width", "300")
    rectangle.set_attribute("height", "200")
    rectangle.set_attribute("fill", "#e6eafa")
    svg.append_child(rectangle)

    circle = document.create_element_ns(namespace_uri, "circle")
    circle.set_attribute("cx", "150")
    circle.set_attribute("cy", "75")
    circle.set_attribute("r", "50")
    circle.set_attribute("fill", "#2e86de")
    circle.set_attribute("stroke", "#0d47a1")
    circle.set_attribute("stroke-width", "8")
    svg.append_child(circle)

    ellipse = document.create_element_ns(namespace_uri, "ellipse")
    ellipse.set_attribute("cx", "150")
    ellipse.set_attribute("cy", "155")
    ellipse.set_attribute("rx", "70")
    ellipse.set_attribute("ry", "20")
    ellipse.set_attribute("fill", "#90a4ae")
    ellipse.set_attribute("opacity", "0.35")
    svg.append_child(ellipse)

    document.save(output_path)

Le SVG enregistré contient uniquement des éléments DOM générés. Cette approche est utile lorsqu’une application calcule les positions des formes, puis écrit le fichier SVG final.

L’illustration montre comment les trois éléments fonctionnent ensemble: <rect> couvre tout le viewBox comme arrière-plan clair, <circle> crée l’objet bleu et l’<ellipse> semi-transparente en dessous se lit comme une ombre.

Dessiner des lignes, polylignes et polygones

Utilisez line pour un segment, polyline pour une ligne ouverte connectée et polygon pour une forme fermée. L’attribut points est une liste de paires de coordonnées séparées par des espaces.

import os
from aspose.svg import SVGDocument

namespace_uri = "http://www.w3.org/2000/svg"

output_folder = "output/"
output_path = os.path.join(output_folder, "svg-lines-polygons.svg")
os.makedirs(output_folder, exist_ok=True)

with SVGDocument() as document:
    svg = document.root_element
    svg.set_attribute("width", "520")
    svg.set_attribute("height", "300")
    svg.set_attribute("viewBox", "0 0 520 300")

    line = document.create_element_ns(namespace_uri, "line")
    line.set_attribute("x1", "30")
    line.set_attribute("y1", "20")
    line.set_attribute("x2", "130")
    line.set_attribute("y2", "290")
    line.set_attribute("stroke", "#4387be")
    line.set_attribute("stroke-width", "10")
    svg.append_child(line)

    polyline = document.create_element_ns(namespace_uri, "polyline")
    polyline.set_attribute("points", "100,100 160,50 220,100 280,50 340,100 400,50")
    polyline.set_attribute("fill", "none")
    polyline.set_attribute("stroke", "#fb6796")
    polyline.set_attribute("stroke-width", "5")
    svg.append_child(polyline)

    polygon = document.create_element_ns(namespace_uri, "polygon")
    polygon.set_attribute("points", "360,290 430,20 500,290")
    polygon.set_attribute("fill", "#86a9b9")
    polygon.set_attribute("stroke", "#fb6796")
    polygon.set_attribute("stroke-width", "5")
    svg.append_child(polygon)

    document.save(output_path)

La ligne et la polyligne utilisent stroke, car elles dessinent des contours. Le polygone utilise à la fois fill et stroke, car il crée une zone fermée.

L’illustration montre la différence entre les trois éléments. <line> dessine un segment droit, <polyline> dessine un zigzag ouvert depuis la liste points, et <polygon> ferme automatiquement ses points pour former un triangle rempli.

Erreurs courantes et solutions

Problème	Solution
La forme n’apparaît pas	Vérifiez que l’élément a été ajouté à la racine SVG avec append_child()
La forme est hors de la zone visible	Vérifiez viewBox, les coordonnées, width et height
La ligne est invisible	Définissez stroke et stroke-width; fill ne rend pas une ligne visible
Le polygone semble ouvert ou incorrect	Vérifiez les paires de coordonnées points et leur ordre
Le rectangle arrondi n’est pas arrondi	Définissez rx ou ry sur l’élément <rect>

FAQ

Les réponses ci-dessous utilisent le même modèle DOM que les exemples: créer l’élément SVG avec document.create_element_ns(namespace_uri, element_name), définir ses attributs de géométrie et de style, l’ajouter à la racine SVG et enregistrer le document.

Quels éléments de forme SVG puis-je créer en Python?

Vous pouvez créer des formes SVG de base comme rect, circle, ellipse, line, polyline et polygon. Utilisez ces éléments pour les boîtes, badges, marqueurs, diagrammes simples, lignes connectées, triangles et autres formes à arêtes droites.

Comment dessiner un rectangle SVG avec Python?

Utilisez un élément rect et définissez x, y, width et height. Ajoutez des attributs de style comme fill, stroke ou rx, ajoutez le rectangle à la racine SVG et enregistrez le document.

Comment dessiner un cercle SVG avec Python?

Utilisez un élément circle avec cx, cy et r. Ajoutez des attributs fill ou stroke, ajoutez le cercle à la racine SVG et enregistrez le SVG.

Comment dessiner une ellipse SVG avec Python?

Utilisez un élément ellipse avec cx et cy pour le centre, puis définissez rx et ry pour les rayons horizontal et vertical. Ajoutez fill, stroke ou opacity avant d’ajouter l’élément à la racine SVG.

Comment dessiner une ligne SVG avec Python?

Utilisez un élément line et définissez x1, y1, x2 et y2. Une ligne nécessite stroke et généralement stroke-width; définir seulement fill ne la rendra pas visible.

Comment dessiner une polyligne SVG avec Python?

Utilisez un élément polyline et définissez l’attribut points avec des paires de coordonnées comme "30,120 70,75 115,110". Définissez fill="none" lorsque vous voulez uniquement le contour connecté.

Comment dessiner un triangle SVG avec Python?

Utilisez un élément polygon avec trois paires de coordonnées dans l’attribut points, par exemple "50,10 90,80 10,80". Ajoutez fill et stroke, ajoutez le polygone à la racine SVG et enregistrez le SVG.

Comment créer un rectangle arrondi SVG avec Python?

Utilisez un élément rect et définissez rx ou ry en plus de x, y, width et height. Les valeurs rx et ry contrôlent le rayon des coins.

Pourquoi ma forme SVG n'est-elle pas visible?

Une forme est souvent invisible si elle n’a pas été ajoutée à la racine SVG, si elle se trouve hors du viewBox ou si les attributs de peinture nécessaires manquent. Pour les lignes et polylignes, définissez stroke et stroke-width; pour les formes fermées, définissez fill, stroke ou les deux.

Quand utiliser polygon plutôt que path?

Utilisez polygon pour les formes fermées composées de segments droits. Utilisez <path> lorsque la forme nécessite des courbes, des commandes mixtes, plusieurs sous-chemins ou une géométrie plus complexe.

Articles associés

• SVG viewBox et coordonnées en Python explique comment les coordonnées correspondent à la zone SVG visible.
• Dessiner du texte SVG en Python montre comment ajouter des libellés et légendes aux dessins SVG générés.
• Travailler avec les chemins SVG en Python explique la géométrie de chemins personnalisés.
• Modifier un fichier SVG couvre les modèles de modification DOM de plus bas niveau.