Jan 26, 2018 svg

svg : le texte

Dans le format SVG le texte est géré pratiquement comme les autres formes : positionnement, bordure, remplissage… On pourrait évidemment dessiner les lettres avec les outils de base du SVG mais il est plus simple d’utiliser du texte comme on le fait classiquement dans une page HTML. On retrouve donc ce qu’on utilise déjà classiquement dans le CSS pour la mise en forme du texte.

Mais on va voir qu’il y a quand même des spécificités à connaître avec le SVG. On dispose de la balise text et chaque entité devient indépendante des autres, contrairement au texte d’une page HTML. Mais le SVG n’est pas fait pour afficher de longs textes mais pour participer de la décoration d’une image.

Une approche consiste à convertir le texte en chemins pour se retrouver avec une forme parfaitement gérable, mais évidemment ce n’est plus alors du texte et il devient délicat à modifier.

Simple texte

Voici une mise en œuvre simple de la balise text :

<svg width="500" height="80">
    <text 
        x="1em" y="60"
        font-size="50" 
        font-weight="bold"
        font-family="Verdana, Arial, Helvetica, sans-serif">
        Mon texte
    </text>
</svg>

Les valeurs x et y correspondent à la ligne de base. Le reste est tout à fait classique.

On peut donc utiliser toutes les familles de polices disponibles :

Si on ne précise rien pour la police c’est le navigateur qui décidera de tout ça…

On peut prévoir une dimension relative au contenant :

<svg width="500" height="80">
    <rect width="100%" height="100%" fill="lightblue" />
    <text 
        x="20px" y="70%"
        font-size="50" 
        font-weight="bold"
        font-family="Cursive, Arial, Helvetica, sans-serif">
        Mon texte
    </text>
</svg>

 

Un peu de couleur

Comme on est en SVG on dispose de stroke et fill, alors utilisons les :

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background-color: rgba(234, 238, 18, 0.205);
            }
            svg {
                height: 1em;                   
                overflow: visible;
                font-family: sans-serif;
                stroke: rgb(36, 23, 54);               
                fill: rgb(172, 146, 201);
            }
        </style>
    </head>
<body>
    <h1>
        <svg>                          
            <text y="1em">Mon joli titre</text>               
        </svg>
    </h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>    
</body>
</html>

On peut styliser différemment des portions du texte avec la balise tspan :

<svg width="600">   
    <text y="1em" style="stroke:none; font-family: Cursive; font-size: 4em;">
        <tspan fill="red">
            Mon
        </tspan>
        <tspan fill="green">
            joli
        </tspan>
        <tspan fill="blue">
            texte
        </tspan>
    </text>               
</svg>

Cette balise tspan peut aussi être utilisée pour positionner les éléments comme on veut :

<text y="1em" style="stroke:none; font-family: Cursive; font-size: 4em;">
    <tspan x="30" y="100" fill="red">B</tspan>
    <tspan y="110" fill="green">O</tspan>
    <tspan y="90" fill="blue">U</tspan>
    <tspan y="70" fill="magenta">M !</tspan>
</text>

On a vu dans le premier article qu’on peut appliquer un dégradé dans une image SVG, donc le texte en bénéficie également :

<svg width="600">   
    <defs>
        <linearGradient id="lgrad" x1="0%" y1="100%" x2="100%" y2="0%" >
            <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(0,128,0);stop-opacity:1" />
        </linearGradient>
    </defs>   
    <text y="1em" style="fill: url('#lgrad'); stroke: rgb(36, 23, 54); font-family: Cursive; font-size: 4em; overflow: visible;">Mon joli texte</text>               
</svg>

Positionnement horizontal

En CSS on utilise text-align pour positionner horizontalement un texte. En SVG on utilise text-anchor avec ces valeurs :

  • start : début (valeur par défaut)
  • middle : milieu
  • end : fin

Mais par rapport à quoi ? Tout simplement la valeur x qu’on définit pour le texte.

<svg width="600">
    <rect width="600" height="100" fill="lightblue"></rect>
    <g style="font-family:'Trebuchet MS', 'Lucida Sans Unicode'; font-size: 2em;">
        <text text-anchor="start" fill="darkGreen" y="1em" >Début</text>
        <text text-anchor="middle" fill="navy" x="50%" y="2em" >Milieu</text>
        <text text-anchor="end" fill="darkRed" x="600" y="3em" >Fin</text> 
    </g>
</svg>

Je rappelle que la balise g permet de grouper des éléments, par exemple ici pour leur appliquer un style commun.

Je vais prendre un exemple avec une bulle récupérée publicdomainvectors. J’ai un peu simplifié le dessin, nettoyé et optimisé le code. Et j’ai ajouté du texte :

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 244 198">
    <g style="stroke:rgb(0,0,0); stroke-linejoin:round; stroke-linecap:round;">
        <path
            d="m231 67.031c-4 82.999-183 91.999-185 8 2-80.998 185-83.998 185-8z"
            style="stroke-width:3;fill:rgb(255,255,255)"/>
        <path
            d="m110 133.03c-1 17-47 19-48 2 1-19 48-19 48-2z"
            style="stroke-width:3;fill:rgb(255,255,255)"/>
        <path
            d="m74 147.03c0 5-14 6-14 0s14-6 14 0z"
            style="stroke-width:3;fill:rgb(255,255,255)"/>
        <path
            d="m22 146.03c-5 1-9 10-7 17 1 8 8 14 12 13 5-1 9-9 7-17-1-7-8-14-12-13z"
            style="stroke-width:3;fill:#f9e1e1"/>
        <path
            d="m49 147.03c-5-1-12 5-14 12s1 16 5 17c5 1 12-4 14-12 3-7 0-15-5-17z"
            style="stroke-width:3;fill:#f7dfdf"/>
        <path
            d="m24 165.03c-2 0-2 3-2 5 1 2 4 4 5 3 2-1 2-3 2-5-1-2-4-4-5-3z"
            style="fill:#1a1a1a"/>
        <path
            d="m44 164.03c-1 0-4 1-5 3 0 2 0 5 2 6 1 0 4-1 5-3 0-2 0-5-2-6z"
            style="fill:#1a1a1a"/>
        <path
            d="m57.057 148.6c-4.854-6.02-17.603-16.45-20.932-3.04"
            style="stroke-width:2.7537;fill:none"/>
        <path
            d="m12.548 146.32c6-7 21-16 20 0"
            style="stroke-width:3;fill:none"/>
    </g>
    <text style="font-family: cursive; font-size: 18; text-anchor: middle" x="135" y="60">Je pense</text>
    <text style="font-family: cursive; font-size: 18; text-anchor: middle" x="135" y="90">Que c'est centré !</text>
</svg>

Le fait d’utiliser la propriété text-anchor rend le centrage très simple.

Un chemin pour le texte

On a vu dans le précédent article qu’on peut créer des chemins. Eh bien avec la balise textPath on peut faire en sorte que le texte suive le chemin ! Voici un exemple :

<svg width="600" height="600">
    <defs>
        <path id="chemin" d="M50,200 Q80,0 400,20" />
    </defs>
    <text style="font-family:cursive;font-size: 2rem;"><textPath xlink:href="#chemin">Texte sur un chemin</textPath></text>
</svg>

En voilà un autre plus tortueux :

<svg width="700" height="600">
    <defs>
        <path id="path-for-text" d="m 47.8,283 c 0,0 18.7,-92 82.2,-92 63,5 61,158 166,163 107,11 238,-153 238,-153" />
    </defs>
    <text style="font-family:cursive;font-size: 3rem;"><textPath xlink:href="#path-for-text">Texte sur un chemin tortueux</textPath></text>
</svg>

Créer du texte avec Inkscape

Il est évidemment plus facile d’utiliser un éditeur graphique alors voyons comment ça fonctionne avec Inkscape (version 0.92 au moment où j’écris ces lignes).

Dans la barre des outils on trouve un bouton pour le texte :

je vous conseille d’ouvrir l’éditeur XML pour suivre la création du code :

Je rentre du texte avec l’outil de création de texte :

En suivant le XML je vois que Inkscape utilise systématiquement une balise tspan :

Notez que vous avez toutes les valeurs modifiables dans l’éditeur XML :

Vous trouvez un éditeur pour le choix des polices, la justification, la taille…

En quelques clics vous adaptez à votre goût :

Je ne vous ai pas encore parlé des transformations mais évidemment il est facile d’appliquer une rotation :

Vous disposez d’un éditeur pour le fond et les contours :

On peut donc fixer la couleur, ajouter un dégradé, ajouter du flou ou jouer avec l’opacité :

Mes réglages ont été automatiquement placé dans le style du tspan :

stroke-width:0.465;fill-opacity:1;fill:#00dd00;stroke:#780000;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none;filter:url(#filter2686)

POur mettre le texte sur un chemin il faut d’abord en créer un :

Sélectionnez à la fois le chemin et le texte et utilisez cette commande :

Et le texte vient se coller sur le chemin:

Bon là le texte est trop long, ou le chemin trop court mais vous avez le principe tout simple.

Si vous regardez dans l’éditeur vous trouvez un textPath :

On peut aussi faire en sorte qu’un texte vienne se loger dans une forme. prenons l’exemple de ce texte que je veux mettre dans une ellipse :

Il suffit de sélectionner les deux et d’utiliser cette commande :

Pratique non ?

Conclusion

Dans cet article on a vue les riches possibilités du SVG au niveau du texte et l’aide précieuse que peut nous apporter Inkscape.

Laisser un commentaire