Texte SVG – éléments text, tspan et textPath

SVG peut rendre trois grands types de contenu graphique : formes vectorielles, images et texte. Le texte SVG n’est pas simplement posé sur un canvas; il peut être positionné par coordonnées, stylisé avec CSS ou attributs de présentation, transformé, découpé et placé le long d’un path. Cet article explique comment le texte est écrit et organisé dans le balisage SVG.

Dans cet article, vous apprendrez à :

• Utiliser <text> pour placer du texte SVG sur une ligne de base.
• Utiliser <tspan> pour du texte multilignes et des styles en ligne.
• Utiliser <textPath> pour faire suivre une courbe au texte.
• Contrôler alignement, direction, mode d’écriture, textLength et espacement des glyphes.
• Comprendre caractères, glyphes et polices.

Glyphes, polices et caractères

• Glyphe – représentation visuelle d’un caractère dans une police. Un glyphe est souvent défini par des formes ou paths.
• Police – collection de glyphes partageant un style graphique. Les polices vectorielles stockent des contours scalables.
• Caractère – point de code abstrait, par exemple Unicode, que le programme associe à un glyphe. Les caractères s’alignent sur une ligne de base.

Éléments de contenu texte SVG

Élément	Rôle
<text>	Définit un bloc de texte.
<tspan>	Ajoute positionnement et style fins dans <text>.
<textPath>	Aligne du texte le long d’une courbe <path>.

Comment ajouter du texte à SVG

1. Créez un élément <text> dans le document <svg>.
2. Définissez les attributs x et y pour placer la ligne de base.
3. Ajoutez des attributs de police et de peinture comme font-family, font-size, fill ou stroke.
4. Utilisez <tspan> pour plusieurs lignes ou des styles mixtes.
5. Utilisez <textPath> si le texte doit suivre une courbe.
6. Vérifiez viewport, ligne de base et taille de police si le texte est coupé.

Élément SVG <text>

<text> crée une séquence de texte. x et y positionnent le début de la ligne de base, pas l’angle supérieur gauche d’une boîte. Un petit y peut donc couper les lettres en haut.

<svg height="100" width="200" xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="6" fill="red">The text is not fully visible </text>
    <text x="10" y="30" fill="green">The text is fully visible </text>
</svg>

Attributs courants de <text> et <tspan> :

• x, y – coordonnées absolues du début de ligne de base.
• dx, dy – déplacements relatifs.
• rotate – rotation appliquée aux caractères.
• textLength – longueur cible du texte rendu.
• lengthAdjust – adaptation par espacement ou glyphes.
• text-anchor – alignement par rapport à la coordonnée x.
• writing-mode – direction du flux de texte.

<tspan> – styles en ligne et retours à la ligne

SVG ne fait pas de retour automatique à la ligne. Utilisez plusieurs <tspan> dans un <text> pour créer des lignes séparées et appliquer des styles à des fragments précis.

<svg height="300" width="600" xmlns="http://www.w3.org/2000/svg">
    <text x="20" y="60" style="font-family:arial">
        <tspan style="font-weight:bold; font-size:55px">ASPOSE</tspan>
        <tspan x="50" y="90" style="font-size:20px; fill:grey">Your File Format APIs </tspan>
    </text>
</svg>

x et y sur un <tspan> commencent une nouvelle ligne à des coordonnées données. Les styles en ligne ne s’appliquent qu’à ce <tspan>.

SVG <textPath> – texte sur une courbe

<textPath> attache du texte à un <path> pour que les caractères suivent une courbe. Le path peut être référencé avec href / xlink:href ou donné directement avec l’attribut path.

<svg height="300" width="800" xmlns="http://www.w3.org/2000/svg">
    <path id="my_path1" d="M 50 100 Q 25 10 180 100 T 350 100 T 520 100 T 690 100" fill="transparent" />
    <text>
        <textPath href="#my_path1">
            Aspose.SVG for .NET is a flexible library for SVG file processing and is fully compatible with its specifications.
        </textPath>
    </text>
</svg>

Si le path est plus court que le texte, le dépassement est coupé à la fin du path. Les propriétés de style fonctionnent comme pour le texte normal.

Erreurs courantes et corrections

Problème	Cause	Correction
Texte coupé en haut	y plus petit que la taille de police	Choisissez y plus grand que font-size
Texte qui ne suit pas la courbe	href pointe vers un id absent	Vérifiez l’id du <path>
Glyphes déformés	textLength avec mauvais lengthAdjust	Utilisez spacingAndGlyphs si les glyphes doivent s’adapter
Texte RTL mal affiché	unicode-bidi absent	Ajoutez direction: rtl; unicode-bidi: bidi-override
Pas de retour à la ligne	SVG ne wrap pas automatiquement	Ajoutez des <tspan> avec x/y ou dy

Recettes rapides

Objectif	Fragment SVG
Centrer du texte	<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">Centered</text>
Texte vertical	<text x="20" y="20" writing-mode="tb">Vertical</text>
Étendre à une largeur	<text x="10" y="40" textLength="200" lengthAdjust="spacingAndGlyphs">Stretch me</text>
Texte sur courbe	<path id="curve" d="M10,80 C40,10 65,10 95,80" fill="none"/> <text><textPath href="#curve">On a curve</textPath></text>

FAQ – texte SVG

Comment positionner du texte SVG ?

Définissez x et y sur <text>. y positionne la ligne de base; il doit souvent être supérieur à la taille de police.

Comment créer du texte SVG multiligne ?

Utilisez plusieurs <tspan> dans un <text>, avec leurs propres valeurs x et y, ou dy pour un décalage relatif.

Le texte SVG peut-il suivre une courbe ?

Oui. Définissez un <path> avec un id, puis référencez-le depuis <textPath href="#path-id">.

Puis-je convertir du texte SVG en contours vectoriels ?

Oui. Consultez Text Vectorization & Text Security – .NET et Convertir du texte SVG en vecteur avec Python.

Spécification et ressources associées

• La section SVG text elements définit <text>, <tspan> et <textPath>.
• Remplissages et contours en SVG explique fill, stroke et opacity pour le texte.
• Données de path SVG aide à comprendre les paths utilisés par <textPath>.
• Working with Fonts and Text donne des exemples .NET avec polices et glyphes.
• Dessiner du texte SVG en Python montre la création d’éléments <text> avec Aspose.SVG for Python via .NET.