Texte courbé

Grace au SVG nous pouvons dépasser les limite de l’imagination dans notre web design, grâce au texte courbé, les réalisations les plus étonnantes sont permises.

Les SVG au cœur de l’astuce

Pour effectuer un effet de vague dans votre texte, mettre votre texte dans une spirale, en cercle… Il faut créer un premier lieu le chemin en SVG.
Pour créer une forme en SVG il vous faudra posséder un logiciel de dessin vectoriel tel qu’Illustrator ou Inkscape.
Vous pouvez alors dessiner un courbe, dans l’exemple ci-dessous un vague.

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -100 1680.75 200">
<path id="vague" fill="none" stroke="#000"  d="M.36,90.6c44.09-46,109.57-98.57,182-88.81C257.49,11.92,271,78.85,348.25,90.6c95.57,14.54,119-81.74,230.15-85.82C683.51.93,697.28,86.67,808.54,87.61c109.2.92,119.91-81.46,229.25-86.82,134.34-6.58,155.42,100.19,279.57,89,114.46-10.31,163.52-104.74,260.11-77,37.71,10.82,87.6,58.49,102.89,77" />
</svg>

Vous pouvez remarquer la composition du SVG entre les balise <svg> vous avez donc le <path> qui vas être le chemin suivi par le texte, noter aussi qu’un id lui est attribué, c’est important pour la suite.

Comment courber le texte

Nous allons utiliser la balise <texte> dans le SVG pour y noter la phrase à afficher.
Texte qui pourra donc, en CSS ou directement dans le code XML du SVG, être modifié couleur, taille, police…
Dans cette balise<text>, nous allons ajouter une balise <textPath> afin d’indiquer le chemin de texte avec un simple lien href qui relis au <path> du SVG par son ID.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -100 1680.75 200">
<path id="vague" fill="none" stroke="transparent"  d="M.36,90.6c44.09-46,109.57-98.57,182-88.81C257.49,11.92,271,78.85,348.25,90.6c95.57,14.54,119-81.74,230.15-85.82C683.51.93,697.28,86.67,808.54,87.61c109.2.92,119.91-81.46,229.25-86.82,134.34-6.58,155.42,100.19,279.57,89,114.46-10.31,163.52-104.74,260.11-77,37.71,10.82,87.6,58.49,102.89,77" />
<text font size="35px">  
  <textPath id="chemin" href="#vague" startOffset="100">
 C'est pas l'homme qui prend la mer, c'est la mer qui prend l'homme tintin tin !
  </textPath>
</text>
</svg>

Analysons les petits secrets de ce bout de code. Dans le <path> le stroke (trait) est passé en transparent, le texte et mis en font-size: 35px c’est un chiffre au hasard pour l’exemple à vous de l’adapter en fonction.
L’indication startOffset permet de décaler la phrase sur la courbe, et c’est l’élément sur lequel vous pouvez agir pour l’animé.

Conclusion

Il est très simple d’adapter du texte dans une courbe grâce au SVG, ce qui peu apporter plusieurs avantages. Le texte reste sélectionnable et modifiable, la possibilité de l’animer, nous pouvons imaginer le texte défiler sur la vague au défilement de la page par exemple. Le gain de performance face à une image si nous utilisions un GIF pour le même type d’animation.
Et surtout la possibilité d’aller plus loin de votre webdesign sans être limité par les contraintes habituelles du texte en HTML.