Tutoriel Inkscape - sommaire

Inkscape : outil 'créer et éditer des objets texte'

Imaginons que nous voulons créer une bannière de site web. Il faut insérer et manipuler du texte. Nous devons donc utiliser la barre d'outils "créer et éditer des objets textes".

La bannière (ou bandeau)

Ci-dessous une bannière destinée à être incorporée dans chaque page d'un site web.

Il s'agit d'un document Inkscape qui fait 900 par 200 et qui ne pèse que 6 KO ...

Réalisation de ce bandeau

Il faut créer un rectangle de 900 par 200 rempli d'abord de vert puis il faut le dégrader (vert vers blanc).

Il faut réaliser un arbre (un cercle "lime" et un tronc "maroon") puis dupliquer ce groupe.

Grâce à l'outil "Créer et éditer des objets texte" il faut insérer le texte "jardiworld.fr".

Il faut ensuite encadre ce texte avec la commande Texte/Encadrer le texte.

Il faut ensuite sélectionner ce cadre pour qu'il fasse 500 de large et soit bien positionné afin que ce cadre soit parfaitement centré verticalement et horizontalement dans le bandeau.

Il faut ensuite utiliser la boîte de dialogue "remplissage et bordure" pour que les lettres aient simplement un contour noir de 2px et pas de remplissage.

Le texte et son environnement

Dans le document SVG ci-dessous (capture d'écran) je vous présente deux manipulations possibles :

• positionner du texte le long d'un chemin
• placer du texte dans une forme

Texte le long d'un chemin

La procédure :

• tapez le texte et mettez le en forme (police, taille, couleur, etc.)
• dessiner une courbe de bézier par exemple
• Sélectionnez le texte et le chemin (avec shift) puis produisez la commande Texte/mettre suivant un chemin ; le texte suit le chemin

Placer du texte dans une forme

La procédure :

• Créez une zone de texte dans le document inkscape
• saisir le texte ou copier/coller le texte à partir d'un autre fichier
• formater le texte
• Dessiner une forme (ici un cercle)
• Sélectionner la forme et la zone de texte et produisez la commande Texte/encadrer ; le texte est envoyé dans la forme.

Intégration du document dans une page web

Très satisfait de mon travail je décide d'insérer ce document Inkscape dans la page web via la balise IMG.

C'est la grosse, très grosse déception.
Le texte n'apparait pas dans le cercle !
Le code généré par Inkscape utilise, en effet, les balises flowRoot, flowPara, etc. qui ne sont pas comprises par les navigateurs.

Cette technique n'est donc pas envisageable si vous voulez produire une image SVG qui doit être insérée dans une page web. Par contre si vous voulez simplement imprimer l'image ...

Solution

Il faut forcer Inkscape à générer du code SVG standard !

Procédure :
• taper le texte avec des sauts de ligne
• dessiner au dessus du texte une ellipse transparente (pas de remplissage)

Ci-dessous le rendu de la nouvelle version du document Inkscape.

Dans ce document, le code généré est basé sur le conteneur text incluant plusieurs balises tspan.
Il s'agit donc d'un code SVG standard. Vérifiez en suivant le lien. Gestion du texte en SVG