Dessiner du texte SVG en Python

Réponse rapide: Pour dessiner du texte SVG en Python, créez un élément <text> avec create_element_ns(), définissez les attributs x, y, font-family, font-size, fill et text-anchor avec set_attribute(), définissez text_content, ajoutez le texte à la racine SVG et enregistrez le document.

from aspose.svg import SVGDocument

with SVGDocument() as document:
    text = document.create_element_ns("http://www.w3.org/2000/svg", "text")
    text.set_attribute("x", "20")
    text.set_attribute("y", "40")
    text.text_content = "Hello SVG"
    document.root_element.append_child(text)
    document.save("text.svg")

Dans cet article, vous apprendrez à:

• créer des éléments SVG <text> en Python;
• positionner du texte avec les coordonnées x et y;
• définir les attributs font-family, font-size, fill et text-anchor;
• créer un texte multiligne simple avec des éléments <tspan>.

Le texte SVG reste du vrai texte dans le balisage SVG. Il peut être sélectionné, recherché, localisé, stylisé et modifié plus tard. Si vous devez convertir du texte en contours vectoriels pour une illustration finale ou un rendu indépendant des polices, utilisez plutôt la vectorisation du texte. Pour un contexte plus large sur le balisage SVG, consultez le guide SVG Text.

Bases du texte SVG

Attribut ou élément	Utilisation
x, y	Positionne la ligne de base du texte
font-family	Choisit la famille de police demandée
font-size	Définit la taille du texte en unités SVG
fill	Définit la couleur du texte
text-anchor	Aligne le texte par rapport à la coordonnée x
<tspan>	Ajoute des fragments positionnés ou un texte multiligne simple

Comment dessiner du texte SVG en Python

Utilisez ce workflow lorsque les graphiques SVG générés nécessitent des libellés, légendes, badges ou du texte dans des diagrammes:

1. Créez ou chargez un SVGDocument.
2. Définissez width, height et viewBox sur la racine SVG si vous créez un nouveau document.
3. Créez un élément <text> avec create_element_ns().
4. Définissez les attributs de position et de style comme x, y, font-size, font-family, fill et text-anchor avec set_attribute().
5. Définissez text_content ou ajoutez des enfants <tspan>.
6. Ajoutez l’élément texte à la racine SVG avec append_child() et enregistrez le document avec document.save().

Créer une étiquette de texte SVG simple

L’exemple suivant crée une petite étiquette SVG avec un rectangle d’arrière-plan et un texte centré. Utilisez text-anchor="middle" lorsque la coordonnée x doit représenter le centre horizontal du texte.

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-text-label.svg")
os.makedirs(output_folder, exist_ok=True)

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

    background = document.create_element_ns(namespace_uri, "rect")
    background.set_attribute("x", "24")
    background.set_attribute("y", "24")
    background.set_attribute("width", "272")
    background.set_attribute("height", "72")
    background.set_attribute("rx", "12")
    background.set_attribute("fill", "#f7f7fb")
    background.set_attribute("stroke", "#546e7a")
    background.set_attribute("stroke-width", "3")
    svg.append_child(background)

    label = document.create_element_ns(namespace_uri, "text")
    label.set_attribute("x", "160")
    label.set_attribute("y", "68")
    label.set_attribute("text-anchor", "middle")
    label.set_attribute("font-family", "Arial, sans-serif")
    label.set_attribute("font-size", "26")
    label.set_attribute("font-weight", "700")
    label.set_attribute("fill", "#263238")
    label.text_content = "SVG Text"
    svg.append_child(label)

    document.save(output_path)

La ligne de base du texte est contrôlée par y, pas par le bord supérieur des lettres. Si le positionnement vertical doit être visuellement centré avec précision, ajustez la valeur y ou utilisez des métriques de police dans votre propre logique de mise en page.

L’illustration montre le résultat de l’exemple: un rectangle arrondi sert d’arrière-plan simple, et text-anchor="middle" aligne le libellé SVG Text autour de la coordonnée x centrale.

Créer du texte SVG multiligne avec <tspan>

Utilisez <tspan> lorsqu’un bloc de texte nécessite plusieurs lignes ou des fragments positionnés indépendamment. L’exemple suivant crée un élément <text> et ajoute deux enfants <tspan> avec des positions y différentes.

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-multiline-text.svg")
os.makedirs(output_folder, exist_ok=True)

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

    text = document.create_element_ns(namespace_uri, "text")
    text.set_attribute("x", "200")
    text.set_attribute("y", "48")
    text.set_attribute("font-family", "Arial, sans-serif")
    text.set_attribute("font-size", "22")
    text.set_attribute("text-anchor", "middle")
    text.set_attribute("fill", "#263238")

    first_line = document.create_element_ns(namespace_uri, "tspan")
    first_line.set_attribute("x", "200")
    first_line.set_attribute("y", "48")
    first_line.text_content = "Generated SVG Text"
    text.append_child(first_line)

    second_line = document.create_element_ns(namespace_uri, "tspan")
    second_line.set_attribute("x", "200")
    second_line.set_attribute("y", "84")
    second_line.set_attribute("fill", "#2e86de")
    second_line.text_content = "with Aspose.SVG for Python via .NET"
    text.append_child(second_line)

    svg.append_child(text)
    document.save(output_path)

Les deux lignes appartiennent au même élément <text>, mais chaque <tspan> possède sa propre position et peut remplacer des attributs de style comme fill.

L’illustration montre la sortie de texte SVG sur deux lignes. Le premier <tspan> dessine le titre sombre, et le second <tspan> utilise une position y distincte ainsi qu’une valeur fill bleue pour le sous-titre.

Erreurs courantes et solutions

Problème	Solution
Le texte n’est pas visible	Définissez fill, vérifiez x et y, et assurez-vous que le texte se trouve dans le viewBox
Le texte apparaît trop haut ou trop bas	Rappelez-vous que y positionne la ligne de base du texte, pas le bord supérieur
Le centrage ne fonctionne pas	Définissez text-anchor="middle" et utilisez le centre souhaité comme valeur x
Le texte multiligne se chevauche	Donnez à chaque <tspan> une valeur y séparée ou utilisez l’espacement dy avec prudence
Le texte est rendu différemment sur une autre machine	Utilisez des polices courantes ou convertissez l’illustration finale en chemins vectoriels si l’indépendance vis-à-vis des polices est importante

FAQ

Comment ajouter du texte à un SVG en Python?

Créez un élément <text> avec create_element_ns(), définissez les attributs x, y, font-family, font-size et fill, définissez text_content, ajoutez-le à la racine SVG et enregistrez le SVG.

Comment centrer du texte SVG?

Définissez text-anchor="middle" et définissez x sur le centre horizontal souhaité. Ajustez y pour la position de la ligne de base.

Puis-je créer du texte SVG multiligne?

Oui. Utilisez un élément <text> avec plusieurs enfants <tspan>. Donnez à chaque <tspan> ses propres valeurs x et y, ou utilisez un espacement dy contrôlé.

Dois-je dessiner du texte SVG ou vectoriser le texte?

Dessinez du texte SVG normal lorsqu’il doit rester éditable, recherchable ou localisable. Vectorisez le texte uniquement pour une illustration finale qui doit préserver les contours exacts des glyphes sans dépendre des polices installées.

Articles associés

• SVG viewBox et coordonnées en Python explique comment les coordonnées de texte correspondent à la zone SVG visible.
• Dessiner des formes SVG en Python montre comment combiner du texte avec des formes générées.
• Créer des icônes SVG en Python utilise des modèles de dessin proches du texte pour des graphiques générés compacts.
• Convertir du texte en vecteur en Python explique comment convertir du texte SVG en contours vectoriels pour une sortie finale indépendante des polices.