Accueil

Traduction

Tutoriel Inkscape & Boxy SVG - sommaire

Sommaire partiellement masqué - faites défiler !

Inkscape & Boxy_SVG - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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. image SVG

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 :

Texte le long d'un chemin

La procédure :

Placer du texte dans une forme

La procédure :

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 !

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