SVG (Scalable Vector Graphics) est un langage de balisage permettant de décrire des graphiques vectoriels bidimensionnels. Vous pouvez utiliser du texte en SVG pour ajouter différents types d'éléments de texte à vos graphiques. Voici quelques façons d’utiliser le texte en SVG :

1. Élément <text> : l'élément <text> est utilisé pour créer des éléments de texte simples. Vous pouvez spécifier le contenu et la position du texte dans le canevas SVG.

    XML
    <svg width="300" height="100">
     <text x="10" y="40">Hello, SVG!</text>
   </svg>
   

2. Style du texte : vous pouvez appliquer diverses options de style au texte, telles que la taille de la police, la famille de polices, la couleur de remplissage, le trait, etc.

    XML
    <svg width="300" height="100">
     <text x="10" y="40" font-family="Arial" font-size="20" fill="blue">Styled Text</text>
   </svg>
   

3. <tspan> éléments : l'élément <tspan> vous permet de regrouper plusieurs étendues de texte au sein d'un seul élément <text> . Ceci est utile pour appliquer différents styles à différentes parties du texte.

    XML
    <svg width="300" height="100">
     <text x="10" y="40">
       <tspan fill="red">Red</tspan>
       <tspan fill="green" dx="5">Green</tspan>
       <tspan fill="blue" dx="5">Blue</tspan>
     </text>
   </svg>
   

4. Chemins de texte : vous pouvez placer du texte le long d'un chemin à l'aide de l'élément <textPath> . Cela vous permet de créer du texte qui suit une forme ou une courbe spécifique.

    XML
    <svg width="300" height="100">
     <path id="myPath" d="M10 80 Q 52.5 10, 95 80 T 180 80" />
     <text>
       <textPath href="#myPath">Curved Text</textPath>
     </text>
   </svg>
   

5. Rotation du texte : vous pouvez faire pivoter le texte à l'aide de l'attribut rotate .

    XML
    <svg width="300" height="100">
     <text x="10" y="40" transform="rotate(45 10,40)">Rotated Text</text>
   </svg>
   

6. Alignement du texte : vous pouvez utiliser l'attribut text-anchor pour spécifier l'alignement du texte. Les valeurs peuvent être « début », « milieu » ou « fin ».

    XML
    <svg width="300" height="100">
     <text x="10" y="40" text-anchor="start">Start</text>
     <text x="150" y="40" text-anchor="middle">Middle</text>
     <text x="290" y="40" text-anchor="end">End</text>
   </svg>
   

Ce ne sont là que quelques exemples, et SVG fournit un riche ensemble de fonctionnalités pour travailler avec du texte. Vous pouvez explorer des attributs et des éléments supplémentaires pour personnaliser le texte en SVG en fonction de vos besoins de conception.