Inkscape : les calques

Nous allons aborder dans cette page une technique très utile : les 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.

Remarque : l'instruction HTML pour insérer ce document Inkscape est :
<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.

Pourquoi les calques ?

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 ajouter un nouveau calque au dessus du précédent. Ainsi vous êtes assuré que les modifications ne concernent que le deuxième calque.
Ensuite vous verrouillez le deuxième calque puis vous en ajoutez un troisième et ainsi de suite ...

Par ailleurs je vous montre aussi dans ce chapitre que l'utilisation des calques permet de réaliser ensuite très facilement un document animé.

Production d'un document statique contenant plusieurs calques

Taille de ce nouveau document de 900 pixels par 900.

Le premier calque

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

Le deuxième calque

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

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.

Production d'un document animé

La version 1.4 est beaucoup plus ergonomique concernant la gestion des calques grâce au volet "calques et objets".
Ci-dessous un document est affiché en mode "contour" et j'ai produit la commande Calque/calques et objets.
Ce document comprend trois calques avec une forme dans chaque calque.

Grâce au volet "calques et objets" il est facile de verrouiller, masquer un calque.
Vous voyez ici qu'aucun des trois calques n'est verrouillé ni masqué (on voit les trois formes).

Le code SVG produit par Inkscape (code optimisé)

<svg id="svg1" width="900" height="600" version="1.1" viewBox="0 0 900 600" xmlns="http://www.w3.org/2000/svg">
 <g id="layer1">
  <rect id="rect1" x="301.3" y="174.9" width="243" height="243" style="fill:#000080"/>
 </g>
 <g id="layer2">
  <circle id="path1" cx="425.5" cy="294.8" r="114.5" style="fill:#0000ff"/>
 </g>
 <g id="layer3">
  <ellipse id="path2" cx="428.7" cy="297" rx="157.7" ry="113.4" style="fill:#00ffff"/>
 </g>
</svg>

Comme j'ai choisi pour la sauvegarde "SVG optimisé" j'obtiens un code très succinct et très facile à comprendre pour un humain ayant des notions de SVG.
Notez les trois calques identifiés "layer1, layer2, layer3".

Travail sous NotePad

Pour l'instant il s'agit encore d'un dessin vectoriel statique.
Je vais rajouter du code pour afficher successivement les différents calques et donc créer une animation.
Plutôt que CSS ou JavaScript, je vais animer les calques avec une composante du langage SVG : le SMIL.

Le code SVG amendé

<svg id="svg1" width="900" height="600" version="1.1" viewBox="0 0 900 600" xmlns="http://www.w3.org/2000/svg">
 <g id="layer1" style ="display : none;">
  <rect id="rect1" x="301.3" y="174.9" width="243" height="243" style="fill:#000080"/>
  <set attributeName="display" attributeType="CSS" to="block"  begin="0s;a3.end" dur="5s" id ="a1" />
 </g>
 <g id="layer2" style ="display : none;">
  <circle id="path1" cx="425.5" cy="294.8" r="114.5" style="fill:#0000ff"/>
  <set attributeName="display" attributeType="CSS"   to="block"    begin="a1.end" dur="5s" id ="a2" />
 </g>
 <g id="layer3"  style ="display : none;">
  <ellipse id="path2" cx="428.7" cy="297" rx="157.7" ry="113.4" style="fill:#00ffff"/>
  <set attributeName="display" attributeType="CSS"  to="block"    begin="a2.end" dur="5s" id ="a3" />
 </g>
</svg>

J'ai donc rajouté dans le code de chaque élément G (calque) une balise "set" qui modifie la valeur de la propriété "display" pour ce calque : passe de "none" à "block" donc le calque invisible devient visible.

Le rendu

Le fichier "animation.svg" amendé est inséré dans cette page via la balise IMG !
Observez l'image vectorielle durant au moins 20 secondes.

Successivement affichage d'un carré bleu marine puis d'un rond bleu roi et d'une ellipse bleu azur et le cycle recommence ...
L'animation est volontairement saccadée. Si vous voulez une transition, il faut jouer sur une autre propriété.

Une application cartographique dynamique reposant sur les calques

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.
Puis j'ai ajouté un nouveau calque et j'ai incorporé une autre image bitmap (celle correspondant aux fleuves).
Puis j'ai rajouté un troisième calque et j'ai incorporé une troisième image matricielle (celle sur les chemins de fer).
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 (le code du premier calque) : ... <g id="relief" style="display:none"> <image y="13.064285" x="18.8988" id="image1374" ...> </g>

Le travail sous NotePad

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 et les autes étant masqués.

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

Ce script ne pose pas de difficulté : quatre fonctions anonymes qui se ressemblent beaucoup à un détail près ...
Dans chaque fonction trois calques sont masqués et un seul est affiché.

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 dans la page web avec la balise OBJECT.
Si vous l'insérez avec IMG le script sera inopérant.

Traduction

Tutoriel Inkscape - sommaire

Inkscape : dessin vectoriel

Les filtres avec Inkscape

Inkscape - divers

Animations avec Inkscape

Draw de Libre Office

Tutoriel Inkscape - recherche

L'auteur : Patrick Darcheville