Guillaume Duverger - Développement & Graphisme

Texte avec SVG

S'il est assez aisé d'écrire (ou plutôt dessiner, puisqu'il s'agit non pas de texte à proprement parler, mais d'un élément graphique) du texte en SVG, il est important de prendre conscience que le SVG ne gère pas les blocs de texte (début du support avec la version 1.2).

<svg style="background: #7A5FFF;margin: 1rem auto" width="200" height="50" viewBox="0 0 200 50"> 
<text style="text-anchor:middle" fill="white" x="100" y="30">Texte simple avec SVG</text> 
</svg>

Contrairement au xHTML qui propose l'élément p afin de permettre d'y insérer un long paragraphe avec un retour à la ligne automatique, le SVG (dans sa version 1.1) quant à lui, ne gère le texte que ligne par ligne.

Dans l'exemple ci-dessous, le texte est tronqué. Il sort de la boite SVG et n'effectue donc pas de retour à la ligne. C'est embêtant.

<svg style="background:hsl(203,77%,61%);margin:1rem auto" width="200" height="50" viewBox="0 0 200 50"> 
<text style="text-anchor:middle" fill="white" x="100" y="30">Nouvel exemple de texte simple avec SVG
</text> 
</svg>

Pour la comparaison, voici la même chose en xHTML :

<div>
<p>Exemple de texte simple en XHTML par rapport au texte SVG</p>
</div>

Il faudra alors avoir recours à l'élément tspan.

L'élément tspan :

Dans un premier temps, utilisons cet élément dans un exemple simple, puis dans un second exemple, nous allons construire un paragraphe.

<svg width="300" height="100" viewBox="0 0 300 100">  
<text style="text-anchor:middle;font-size:1.25rem" x="150" y="55">Un exemple <tspan style="fill:red">classique</tspan>
</text> 
</svg>

Vous pouvez remarquer que l'élément tspan s'apparente à l'élément span en CSS.

Intéressons-nous maintenant au second exemple où il s'agit de construire un paragraphe.

<svg style="border:1px solid #ddd;background:#e6e6e6" width="320" height="200" viewBox="0 0 320 200"> 
<text style="text-anchor:start;font-size:1.25rem" x="10" y="30"><tspan>Exemple d'un paragraphe SVG</tspan></text>
<line x1="0" y1="0" x2="0" y2="200" stroke="#7A5FFF" stroke-width="8"/>
<text x="10" y="80">Le Lorem Ipsum est simplement du faux texte  
<tspan x="10" y="100">employé dans la composition et la mise en page.</tspan> 
<tspan x="10" y="120">Le Lorem Ipsum est le faux texte standard</tspan> 
<tspan x="10" y="140">de l'imprimerie depuis les années 1500.</tspan> 
</text> 
</svg>

Mis à part l'inconvénient du tronquage (qui sera donc corrigé dans la version 1.2 avec l'apparition de l'élément textArea), il est très simple de styliser un texte en SVG. Nous allons, pour ce faire, utiliser le langage CSS.

Mise en forme du texte SVG :

Il est ainsi possible de styliser les couleurs de trait et de remplissage, la taille, le style de font, la graisse, la police elle-même... Notez cependant que certaines propriétés ne fonctionnent pas, en particulier sous Firefox comme par exemple les propriétés word-spacing et letter-spacing.

Vous pouvez appliquer bon nombre de propriétés CSS.

Ci-dessous un exemple basique. Ici, nous avons changé la couleur du texte, ajouté une bordure colorée, souligné le texte et changé la police de caractère :

<svg width="600" height="80" viewBox="0 0 600 80"> 
<text x="300" y="60" 
style="
text-anchor:middle;
fill:#01FF89;
stroke:#7A5FFF;
stroke-width:2;
font-size:3rem;
font-family:'Lobster',cursive;">Texte en SVG et CSS
</text>
</svg>

Autre exemple de mise en forme CSS avec un dégradé :

<svg height="100" width="600" viewBox="0 0 600 100">
<defs>
<linearGradient id="rainbow" x1="0" x2="0%" y1="0" y2="100%">
<stop stop-color="hsl(203,77%,61%)" offset="0%"/>
<stop stop-color="hsl(318, 58%, 56%)" offset="80%"/>
</linearGradient>
</defs>
<text style="text-anchor:middle;font-family:'Archivo Black';text-transform:uppercase" fill="url(#rainbow)" font-size="80" x="50%" y="80">Dégradé</text>
</svg>

Positionnement du texte SVG :

Nous allons évoquer maintenant le centrage du texte. Pour un centrage horizontal simple et efficace, nous allons utiliser la propriété CSS text-anchor (sinon, vous pouvez centrer votre texte en utilisant les attributs SVG x et y)

Il existe trois valeurs à cette propriété :

• start : par défaut
• middle : milieu
• end : fin

Regardez l'exemple ci-dessous :

💡 NB : les cercles bleus indiquent la position du texte. Vous constatez bien que le premier texte est centré par rapport à la première lettre. Le deuxième texte est bien aligné en son centre. Enfin le dernier texte est centré par rapport à la dernière lettre.

<svg width="600" height="200" viewBox="0 0 600 200">
<text x="300" y="50">Mon texte en SVG</text>
<text x="300" y="110">Mon texte en SVG</text>
<text x="300" y="170">Mon texte en SVG</text>
<circle cx="300" cy="50" r="5" fill="blue"/>
<circle cx="300" cy="110" r="5" fill="blue"/>
<circle cx="300" cy="170" r="5" fill="blue"/>
</svg>

text:nth-child(2){

text-anchor:middle

}

text:nth-child(3){

text-anchor:end

}

Le centrage vertical est un peu plus complexe. Il existe trois attributs SVG pour le gérer.

L'attribut dominant-baseline comprend les valeurs suivantes :

• hanging
• mathematical
• central
• middle
• text-before-edge

💡 NB : La bordure noire sert à montrer comment se comporte les différentes valeurs de l'attribut dominant-baseline.

L'attribut baseline-shift permet de décaler la ligne de base du texte sur lequel il est appliqué par rapport au parent.

Elle comprend les mots-clefs suivant :

• baseline : valeur par défaut.
• sub : permet de mettre le texte en indice.
• super : permet de mettre le texte en exposant.

Sachez que l'attribut baseline-shift ne semble fonctionner ni sur Firefox ni sur IE/Edge.

<svg height="100" width="100" viewBox="0 0 100 100">
<text x="10" y="25" font-size="20">
<tspan>e = mc 
<tspan baseline-shift="super">2</tspan>
</tspan>
</text>
</svg>

Décalage et rotation :

En utilisant les attributs dx et dy sur les éléments text et tspan, nous allons pouvoir effectuer un décalage sur les axes x et y. Et combinés à l'attribut rotate, nous pourrons faire pencher tout ou partie d'un élément graphique.

Dans l'exemple ci-dessous, nous allons décaler les lettres de l'acronyme SVG :

<svg width="400" height="100" viewBox="0 0 400 100"> 
<text style="font-size:32px" x="30" y="60">Texte en
<tspan dx="20">S</tspan> 
<tspan dx="20">V</tspan> 
<tspan dx="20">G</tspan> 
</text> 
</svg>

Vous pouvez appliquer une transformation sur chaque lettre, comme sur l'exemple ci-dessous :

<svg style="margin:1rem auto" width="300" height="100" viewBox="0 0 300 100"> 
<text style="font-size:32px" x="100" y="50" rotate="5 10 15 20 25 30">TEXTE</text> 
</svg>

Ou indiquer une rotation à l'ensemble du texte comme ci-dessous avec l'attribut transform :

<svg style="margin:1rem auto" width="300" height="300" viewBox="0 0 300 300"> 
<text x="100" y="40" transform="rotate(45)">Texte SVG</text>
</svg>

Une autre façon d'obtenir un texte en position verticale (avec la propriété writing-mode) :

<svg viewBox="0 0 300 240"> 
<text x="50%" y="20" style="writing-mode: tb">Texte vertical</text>
</svg>