Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site
Nous allons aborder dans cette page une technique très utile : les calques.
Instruction HTML pour insérer ce document Inkscape :
<img src ="chaumiere.svg" class="grand" style ="border : 15px solid gold; box-shadow : 20px 20px 20px gray;" >
Ainsi l'image ressemble à un beau tableau avec son cadre.
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 ...
Taille de ce nouveau document de 900 pixels par 900.
Aperçu :
Des rectangles floutés (ciel et sol) et des ellipses floutées (nuages)
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é.
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.
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.
Vous n'êtes pas obligé d'utiliser le menu "Calque" pour masquer/ démasquer OU verrouiller/déverouiller un calque.
En cliquant sur ces icônes vous faites basculer le calque courant d'un état à un autre.
En fait un calque SVG c'est un regroupement d'objets grâce à la balise G.
Ci-dessous un exemple simple de document Inkscape avec des calques.
Le code correspondant :
Normalement ce sont les objets du calque "calque2" qui doivent apparaitre puisqu'ils sont écrit après ceux de "calque1".
Mais ici "calque2" est masqué (display ; none).
Dans le cadre du format SVG on ne peut pas utiliser la propriété z-index pour gérer la superposition. Mais cela devrait changer avec
la version 2 de SVG ...
Remarquez que Insckape n'utilise par la balise circle pour dessiner un cercle mais ellipse avec rx = ry.
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.
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.
Il s'agit d'un fichier SVG mais contenant aussi un script.
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 :
Extrait du code SVG à ce stade :