Texte SVG – élément texte SVG, SVG textPath

SVG permet de créer trois types d’objets graphiques : des formes graphiques vectorielles, des images et du texte. De la même manière, comme pour les formes, les éléments de texte SVG peuvent subir des transformations de système de coordonnées, un découpage et un style. Dans cet article, nous examinons comment insérer du texte dans une image SVG.

Cet article présente les éléments de texte SVG tels que <text>, <tspan> et <textPath> et passe en revue certains attributs courants qui permettent d’afficher, de formater et de styliser le texte dans une image SVG. Grâce à des exemples et des explications détaillés, vous apprendrez à manipuler le placement, l’orientation et l’apparence du texte. L’article fournit également des informations de base sur les glyphes, les caractères et les polices.

Polices et glyphes

Quand on parle de texte SVG, il est bon de savoir ce que sont les glyphes, les caractères et les polices.

Un glyphe est une unité graphique élémentaire au sein d’un ensemble convenu d’unités destinée à l’écriture de caractères de police. En référence à la spécification officielle sur W3.org :

“A glyph represents a unit of rendered content within a font. Typically, a glyph is defined by one or more shapes such as a path, possibly with additional information such as rendering hints that help a font engine to produce legible text in small sizes”.

En d’autres termes, les glyphes sont utilisés comme un ensemble de chemins graphiques (courbes) pour la création de lettres ou de symboles.

Une police est un bloc de données (ou un fichier) composé de descriptions de caractères individuels dans l’ensemble utilisé par un programme lors de l’affichage de texte. D’autre part, la police représente une collection organisée de glyphes graphiquement liés dans laquelle les différentes représentations de glyphes partageront une apparence ou un style particulier caractérisé pour une police donnée.

Les polices vectorielles utilisent des chemins, des courbes de Bézier, des instructions de dessin et des formules mathématiques pour chaque description de glyphe, grâce auxquelles les contours des caractères peuvent être mis à l’échelle à n’importe quelle taille.

Le caractère est une représentation numérique d’une lettre ou d’un symbole. Un caractère peut être une instruction de contrôle, une marque pouvant être rendue ou un modificateur, c’est-à-dire qu’il s’agit d’une unité atomique ou de base du texte. Selon la norme de codage de caractères universel UTF-8, la représentation d’un caractère peut prendre entre 1 et 4 octets.

Lorsqu’un ordinateur restitue des caractères, il mappe ces caractères aux glyphes d’une police.

Dans une chaîne, les caractères du texte sont alignés le long d’une ligne droite imaginaire. Cette ligne est appelée ligne de base. En général, la ligne de base peut être orientée de différentes manières. Cela dépend de la langue et des caractères affichés. Dans la plupart des langues, les caractères sont alignés sur une ligne de base «alphabétique» qui s’étend au bas des caractères.

Éléments de contenu de texte SVG

SVG définit trois éléments de contenu qui génèrent du texte visible :

Élément	Objectif
`<text>`	Définit un bloc de texte.
`<tspan>`	Fournit un positionnement fin et un style à l’intérieur de `<text>`.
`<textPath>`	Aligne le texte le long d’une courbe `<path>`.

Élément SVG `<text>`

L’élément <text> est utilisé pour définir un texte. x et y sont les principaux attributs responsables de la position du texte. La ligne de base du texte commence à partir du coin inférieur gauche du premier symbole textuel. Il est essentiel de définir une valeur y supérieure à la taille de la police. Sinon, le texte n’apparaît pas dans la fenêtre.

L’exemple suivant illustre comment spécifier correctement un début de ligne de base. Les x et y définissent les coordonnées du début de la ligne de base ( svg-text-position.svg).

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

Deux lignes de texte SVG – l’une ne rentre pas dans la fenêtre, mais l’autre oui.

Les attributs des éléments <text> et <tspan> indiquent la direction d’écriture, l’alignement, la police et d’autres propriétés et fonctionnalités spécifiantes qui décrivent précisément comment restituer les caractères. Les principaux attributs sont :

x, y – coordonnées absolues du départ de la ligne de base.
dx, dy – déplacements relatifs pour chaque caractère.
rotate – angle de rotation appliqué à chaque caractère.
textLength – force le texte rendu à occuper une longueur précise.
lengthAdjust – contrôle comment l’espacement et le redimensionnement des glyphes s’ajustent à textLength (spacing, spacingAndGlyphs).
text-anchor – alignement du texte par rapport à la coordonnée x (start, middle, end).
writing-mode – définit la direction d’écriture (lr, rl, tb, bt).

Ces attributs peuvent être combinés pour créer des mises en page complexes, comme du texte étiré, des scripts de droite à gauche ou de l’écriture verticale.

Voyons comment organiser le texte ( svg-text-arranger.svg) :

1 <svg  height="300" width="400" xmlns="http://www.w3.org/2000/svg">
2    <text x="180" y="30" fill="red">Aspose.SVG</text>
3    <text x="180" y="60" fill="blue" textLength="140" >Aspose.SVG</text>
4    <text x="180" y="90" fill="grey" textLength="160" lengthAdjust="spacingAndGlyphs" style="direction: rtl; unicode-bidi: bidi-override">Aspose.SVG</text>
5    <text x="180" y="120" fill="green" style="text-anchor: middle" >Aspose.SVG</text>
6    <text x="260" y="90" style="writing-mode: tb">Aspose.SVG</text>
7</svg>

Organisation du texte SVG – cinq lignes de texte identique qui diffèrent par la position, l’orientation du texte et la longueur.

Le texte rouge utilise la valeur par défaut text-anchor:start.
Le texte vert centre le texte avec text-anchor:middle.
Le texte gris montre la direction de droite à gauche grâce à direction:rtl.
Les textes bleu et gris illustrent comment textLength et lengthAdjust étirent les glyphes.
Le texte vertical utilise writing-mode:tb (de haut en bas).

`<tspan>` – Style en ligne et sauts de ligne

L’élément <tspan> se trouve dans l’élément <text> ou dans un autre élément <tspan>. En tant qu’élément enfant, <tspan> remplit plusieurs fonctions importantes dans l’affichage et le formatage du texte :

En SVG, le texte est affiché sous la forme d’une seule ligne à l’intérieur d’une fenêtre; il ne s’enroule pas automatiquement dans une autre chaîne. Vous pouvez le diviser en plusieurs lignes en utilisant l’élément <tspan>. Chaque élément <tspan> peut contenir un formatage et une position différents.
Pour définir des styles (ou d’autres attributs) et les appliquer uniquement à une partie spécifique du texte, vous devez utiliser l’élément <tspan>. Il vous permet de changer le style ou la position du texte affiché dans l’élément <tspan> par rapport à l’élément parent.

Prenons un exemple simple de <tspan>> ( svg-text.svg):

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

Texte Aspose vos API de format de fichier

L’élément <text> avec un ou plusieurs éléments enfants <tspan> définit de nouvelles positions pour les caractères qui commencent de nouvelles lignes.

x / y sur un <tspan> démarre une nouvelle ligne aux coordonnées indiquées.
Les propriétés style en ligne (par ex. font-weight, font-size, fill) n’affectent que ce <tspan>.

SVG `<textPath>` – Texte le long d’une courbe

En SVG, le texte peut être affiché non seulement horizontalement ou verticalement, mais également le long de n’importe quelle courbe vectorielle. SVG peut placer du texte le long d’un chemin défini par un élément <path>. Ceci est réalisé par un élément <textPath> de plusieurs manières :

L’attribut href (xlink:href) fait référence à une URL pointant vers l’élément <path>.
L’attribut path spécifie directement les données du chemin SVG.

L’attribut path et l’attribut href spécifient tous deux un chemin le long duquel les caractères seront rendus. Le texte affiché le long de la courbe prend principalement l’attribut href en référence à l’élément <path>. Voici un exemple ( svg-text-path.svg) :

 1<svg height="300" width="800" xmlns="http://www.w3.org/2000/svg">
 2    <path id="my_path1" d="M 50 100 Q 25 10 180 100 T 350 100 T 520 100 T 690 100"  fill="transparent" />
 3    <path id="my_path2" d="M 50 100 Q 25 10 180 100 T 350 100" transform="translate(0,75)" fill="transparent" />
 4    <text>
 5        <textPath href ="#my_path1">  Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications. 
 6        </textPath>
 7        <textPath href ="#my_path2">  Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications. 
 8        </textPath>
 9    </text>
10</svg>

Texte SVG le long du chemin SVG

Si la longueur du chemin est plus courte que la taille du texte, seule la partie du texte située dans l’étendue du chemin est dessinée. Dans la figure, la deuxième courbe est plus courte que la longueur du texte, le texte est donc interrompu à la fin du chemin.

Le texte SVG peut être stylisé à l’aide de CSS properties comme font-weight, font-style, text-decoration, text-transform, etc. Il peut être décoré avec un soulignement, un surlignement et un barré. Comme les autres formes SVG, le texte peut comporter à la fois un trait et un fond. Vous pouvez en savoir plus sur la façon de styliser le texte dans la section Filtres et dégradés SVG.

Problème	Cause	Solution
Le texte est coupé en haut du viewport	La valeur de `y` est inférieure à la taille de la police	Augmentez `y` pour qu’il dépasse la taille de la police (par ex. `y="30"` pour du texte 24 px).
Le texte ne suit pas la courbe comme attendu	`href` pointe vers un `id` de `<path>` inexistant	Vérifiez l’attribut `id` du `<path>` et assurez‑vous que la valeur de `href` correspond exactement.
Les glyphes apparaissent déformés	`lengthAdjust` est réglé sur `spacing` alors que `textLength` est utilisé	Utilisez `lengthAdjust="spacingAndGlyphs"` pour mettre à l’échelle à la fois l’espacement et les glyphes.
Le texte de droite à gauche s’affiche toujours de gauche à droite	Absence de `unicode-bidi:bidi-override`	Ajoutez `style="direction: rtl; unicode-bidi: bidi-override"` au `<text>` ou `<tspan>`.
Le texte ne passe pas à la ligne suivante	Dépendance à un retour à la ligne automatique	Insérez un nouveau `<tspan>` avec ses propres coordonnées `x`/`y` pour chaque ligne.

Recettes rapides

Objectif	Snippet SVG (copier‑coller)
Centrer le texte horizontalement	`<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">Centered</text>`
Texte vertical (de haut en bas)	`<text x="20" y="20" writing-mode="tb">Vertical</text>`
Étendre le texte à une largeur précise	`<text x="10" y="40" textLength="200" lengthAdjust="spacingAndGlyphs">Stretch me</text>`
Placer le texte sur une courbe	`<path id="curve" d="M10,80 C40,10 65,10 95,80" fill="none"/> <text><textPath href="#curve">On a curve</textPath></text>`
Appliquer soulignement et surlignement	`<text x="10" y="40" style="text-decoration: underline overline;">Styled</text>`

Conclusion

Les éléments de texte SVG, notamment <text>, <tspan> et <textPath>, sont des composants SVG fondamentaux utilisés pour restituer le texte dans les graphiques SVG. L’élément <text> définit un bloc de texte, tandis que les éléments <tspan> permettent un contrôle plus précis sur le style et le placement du texte dans le <text>. De plus, les éléments <textPath> permettent au texte de suivre un chemin spécifié. Avec le texte SVG, vous pouvez créer des graphiques dynamiques et visuellement attrayants, augmentant ainsi l’interactivité et la convivialité des documents SVG.

Ressources liées

Dans l’article Modifier le fichier SVG, vous apprendrez comment modifier SVG à l’aide de la bibliothèque Aspose.SVG for .NET et examinerez des exemples C# détaillés sur la façon d’ajouter des éléments à un document SVG et de les modifier.
L’article Path Builder – Créer un chemin SVG – C# présente une syntaxe intuitive pour définir par programme des chemins SVG, y compris le positionnement du texte le long du chemin.
Dans l’article SVG Gradients, vous apprendrez à créer des dégradés linéaires et radiaux en C# et vous découvrirez des exemples C# d’implémentation de dégradés SVG à l’aide de la bibliothèque Aspose.SVG for .NET.