Tutoriel Inkscape & Boxy - sommaire

Insérer du texte dans un document SVG

Très souvent on utilise un éditeur WYSIWYG (Inkscape ou Boxy SVG) pour produire un document SVG simple comprenant :
• une image matricielle incorporée
• image suivie d'un texte

Utiliser l'éditeur en ligne Boxy SVG

Une fois n'est pas coutume, je vais d'abord évoquer l'éditeur en ligne de Google.
En effet Inkscape pose un problème en ce qui concerne l'insertion de texte ; il peut générer du code SVG incompatible avec les navigateurs, si vous ne prenez pas certaines précautions ...

Un document SVG produit avec Boxy SVG

Le code correspondant - extrait

Le code généré est conforme à la syntaxa SVG :
• le conteneur text avec différents attributs
• Cet élément text inclut plusieurs éléments tspan : un par ligne

Comment créer le texte dans l'ellipse ?

J'ai dessiné une ellipse puis j'ai utilisé l'outil Texte, saisi un texte, réglé la taille de police et positionné ce texte au dessus de la grande ellipse.

Utiliser l'éditeur Inkscape

Inkscape utilise parfois des éléments flowPara (dans un conteneur flowRoot) pour gérer du texte flottant ou adaptatif (par exemple, du texte dans une forme ou un cadre).
Cela permet au texte de s’adapter automatiquement à la taille d’un conteneur, comme dans un rectangle ou une forme.
Le problème est que cette syntaxe n'est pas comprise pas les navigateurs ; donc ce texte ne s'affiche pas !

Exemple de rendu incorrect

Le texte au dessus de l'image n'apparait pas !

Le code SVG généré par Inkscape

Message apparu lorsque j'ai demandé une version optimisée du code :
WARNING: SVG input document uses 2 flow text elements, which won't render on browsers!
Il n'est pas nécessaire d'être très bon en anglais pour comprendre la signification de cette phrase : le code SVG généré ne sera pas interprété correctement par les navigateurs.

Inkscape a en effet généré le texte selon deux syntaxes :
• texte au dessus de l'image : éléments flowroot & flowPara
• Texte sous l'image : éléments text & tspan

Le code construit à partir des éléments flowroot & flowPara n'est pas pris en compte par les navigateurs.
SVG 1.2 a introduit les éléments de texte fluide (flowRoot, flowRegion, flowPara, flowDiv) mais les navigateurs ne les ont pas implémentés ...

La solution

Solution préventive

Si vous dessinez un rectangle ou une forme avant d’ajouter du texte dedans, Inkscape peut interpréter cela comme un conteneur de texte flottant (flowRoot).
Pour éviter cela ajoutez simplement du texte avec l’outil Texte sans dessiner de forme au préalable.

Solution correctrice

Convertissez un flowPara en text :
• sélectionnez le texte dans Inkscape.
• produisez la commande Texte / convertir en texte (normal). Le texte sera alors converti en un élément text

La version 'débuggée' du penseur

Le texte flottant a été converti en un élément text.