Tutoriel Inkscape & Boxy SVG - sommaire

Inkscape : les calques

Nous allons aborder dans cette page une technique très utile : les calques.

Ci-dessous une document Inkscape composée de trois calques :
• Le premier calque contient le ciel, la prairie, les nuages
• Le deuxième calque contient la maisonnette, l'arbre
• Le troisième calque contient toutes les formes effectuées à main levée c'est à dire : le chemin vers la porte, la clôture, les croisillons de fenêtres, etc.

Ici les trois calques sont visibles mais ce n'est pas obligatoire.
L'une des astuces pour animer un document Inkscape est de masquer/démasquer les calques : voir exemple 2 dans ce chapitre.

Il n'est pas obligatoire d'utiliser les calques. Mais leur emploi facilite énormément le travail du graphiste.
Par défaut un document Inkscape a un seul calque appelé calque1.

Si un document ne comprend qu'un calque il contient forcément de nombreux objets et donc la sélection d'un de ces objets devient des plus délicate. La crise de nerfs est assurée ...

Donc l'astuce est de répartir les objets sur plusieurs calques.
Quand vous pensez avoir finalisé le premier calque vous le verrouillez et vous en ajouter un au dessus.
Ainsi vous êtes assuré que les modifications ne concerneront que le calque courant.
Vous verrouillez le deuxième calque puis vous en ajoutez un troisième et ainsi de suite ...

Production d'un document statique contenant plusieurs calques

Taille de ce nouveau document de 900 pixels par 900.

Le premier calque

Aperçu :

Des rectangles floutés (ciel et sol) et des ellipses floutées (nuages)

Un conseil : laissez toujours la boîte de dialogue "remplissage et contour" affichée !

Le deuxième calque

Aperçu :

La maison : des rectangles floutés puis convertis en chemins afin de pouvoir les transformer en trapèzes par déplacement de certains noeuds.

L'arbre : aucune difficulté.

Le troisieme calque

Aperçu :

Emploi du "crayon" pour dessiner à main levée en particulier pour créer le chemin vers la porte.
Le chemin vers la porte est justement un "chemin" dans le jargon SVG & Inkscape.

Pensez simplifier ce chemin ; commande : Chemin/simplifier

Ensuite vous le sélectionnez pour le remplir de gris et supprimer son contour.

Masquer les calques inactifs

Lorsque vous travaillez sur le deuxième calque vous pouvez non seulement verrouiller le premier calque mais aussi le masquer ainsi vous ne voyez que les formes que vous pouvez manipuler dans le cadre du calque courant.

Utiliser la barre d'état

Vous n'êtes pas obligé d'utiliser le menu "Calque" pour masquer/ démasquer OU verrouiller/déverouiller un calque.

Dans la barre d'état du logiciel Inkscape vous avez une liste déroulante indiquant tous les calques et à gauche de cette liste vous avez deux icônes :
• icône "oeil" qui peut être fermé ou ouvert
• icône "verrou" qui peut être fermé ou ouvert

En cliquant sur ces icônes vous faites basculer le calque courant d'un état à un autre.

Une application cartographique dynamique reposant sur les calques

Je dirai même une animation cartographique ...
Le principe de l'animation repose sur les calque !
Le document Inkscape comprend quatre calques. Grâce à un script trois calques sur quatre sont masqués.

Utilisez l'application

Cliquez successivement sur "Relief", "Fleuves", "Rail" et "Routes" et observez.

Donc successivement vous voyez le relief de la France puis les fleuves, puis la France ferrovière et enfin la France routière
Et jamais les quatre cartes en même temps ne se superposent, ce qui serait illisible.

La réalisation de cette application

Il s'agit d'un fichier SVG mais contenant aussi un script.

Le travail sous Inkscape

J'ai créé un nouveau document et j'ai incorporé (donc dans "calque1") une image matricielle correspondant au relief de la France.
J'ai masqué "calque1" puis j'ai ajouté un nouveau calque ("calque2") et j'ai incorporé une autre image bitmap (celle correspondant aux fleuves).
J'ai masqué "calque2" puis j'ai rajouté un troisième calque ("calque3") et j'ai incorporé une troisième image matricielle (celle sur les chemins de fer).
J'ai masqué "calque3" puis j'ai rajouté un quatrième calque et j'ai incorporé la quatrième image (le réseau routier).

Ensuite j'ai produit la commande Edition /éditeur XML afin de modifier les ID des différents calques :

• l'ID du premier calque (qui était "layer1") est devenu "relief"
• l'ID du deuxième calque (qui était "layer2") est devenu "fleuves"
• l'ID du troisième calque devient "rail"
• l'ID du quatrième calque devient "routes"

Extrait du code SVG à ce stade : ... <g inkscape:label="Calque 1" inkscape:groupmode="layer" id="relief" transform="translate(-18.8988,-18.885107)" style="display:none"> <image y="13.064285" x="18.8988" id="image1374" ...

Ci-dessous un extrait du code correspondant au premier calque. Notez bien la valeur de l'attribut ID et de l'attribut STYLE.

Le travail sous NotePad

Je me méfie de l'outil "texte" de Inkscape ; le code généré n'est pas du standard ...
Je préfère travailler "en manuel" d'autant que ça ne pose vraiment pas de difficulté.
Donc j'ai rajouté le code SVG suivant qui correspond au texte. ... <text id ="b_relief" x="60" y="250" font-size="14" fill="red">Relief</text> <text id ="b_fleuves" x="110" y="250" font-size="14" fill="red">Fleuves</text> <text id ="b_rail" x="160" y="250" font-size="14" fill="red">Chemins de fer</text> <text id ="b_routes" x="260" y="250" font-size="14" fill="red">Routes</text> ...

Pourquoi y vaut 250 ? Car les valeurs du viewBox sont : "0 0 336 257".
Notez bien que chaque texte a un ID : "b_relief", ... "b_routes".
Il faut aussi rendre l'image responsive. Je modifie donc les valeurs de l'attribut width.

Il faut maintenant rajouter un script afin que sur les quatres calques il y en ait toujours qu'un seul visible (display : block) et les autes étant masqués (display : none).

Le script (sans la balise SCRIPT) : ... // identification des calques par des variables objet var relief = document.querySelector('#relief'); var fleuves = document.querySelector('#fleuves'); var rail = document.querySelector('#rail'); var routes = document.querySelector('#routes'); // si clic sur l'un des textes alors un calque est démasqué et les trois autres sont masqués document.querySelector('#b_relief').onclick = function() {relief.style.display ='block' ; fleuves.style.display ='none' ; rail.style.display ='none'; routes.style.display ='none'; } document.querySelector('#b_fleuves').onclick = function() {relief.style.display ='none' ; fleuves.style.display ='block' ; rail.style.display ='none'; routes.style.display ='none'; } document.querySelector('#b_rail').onclick = function() {relief.style.display ='none' ; fleuves.style.display ='none' ; rail.style.display ='block'; routes.style.display ='none'; } document.querySelector('#b_routes').onclick = function() {relief.style.display ='none' ; fleuves.style.display ='none' ; rail.style.display ='none'; routes.style.display ='block'; } ...

Le script est rajouté en fin de document mais juste avant la balise fermante :

Le code JavaScript ne pose pas de difficulté : quatre fonctions anonymes qui se ressemblent beaucoup à un détail près ...
Chaque calque est identifié. Dans chaque fonction trois calques sont masqués ("display : none" en JS) et un seul est affiché ("display: block" en JS).

Insertion de ce fichier SVG dans un page web

Le document Inkscape est un peu lourd : 800 KO mais c'est logique puisqu'il intégre l'équivalent de 4 images matricielles.

Attention ce document contient un script ; il faut donc impérativement l'insérer avec la balise OBJECT.
Si vous insérez avec IMG le script sera inopérant ...