Traduction
Tutoriel Inkscape & Boxy - sommaire
Tutoriel Inkscape & Boxy - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Inkscape n'est pas en mesure de générer le code correspondant à un dessin SVG animé.
Par contre la version 4 de Boxy SVG comprend une interface pour générer des instructions d'animation basées sur le SMIL.
Le panneau "animations" de Boxy SVG
Il y a donc un retour en force du SMIL (Synchronized Multimedia Integration Language) c'est à dire la composante du langage
SVG pour animer les objets SVG et plus précisément le "couteau suisse" du SMIL : la balise ANIMATE.
Dans ce paragraphe je ne vais pas faire appel au module "animations" de Boxy SVG.
Je veux en effet vous montrer que l'encodage manuel d'une animation, c'est pas compliqué.
Par ailleurs Boxy SVG ne propose que la génération via son interface de code SVG-SMIL.
Vous pouvez préférer utiliser un autre langage pour l'animation ...
Par ailleurs la connaissance du SMIL vous permet d'avoir un regard critique via du code généré par Boxy SVG.
Un chien poursuit un chien dans un décor urbain.
Il faut donc deux "sprites" qui seront des gifs animés.
Un sprite ("lutin" en français) est un élément graphique pouvant se déplacer sur l'écran. En règle générale, cet élément est transparent et peut être animé.
Les sprites doivent se déplacer dans un décor statique.
Le décor est réalisé en utilisant l'éditeur Boxy SVG ; le document se nomme "boxy_paysage2.svg".
J'ouvre le document SVG avec un éditeur tel Notepad et je rajoute juste avant la balise fermante SVG :
Donc les images faisant fonction de "sprites" sont simplement liées au document SVG.
N'oubliez pas de rajouter un attribut à la balise SVG début : xmlns:xlink="http://www.w3.org/1999/xlink"
afin que les liaisons avec des images matricielles soient prises en compte.
Si vous oubliez cet attribut et en cas de liaison avec des images, vous avez un message d'erreur du navigateur :
"Namespace prefix xlink for href on image is not defined".
Constatez que l'élément IMAGE devient une balise double afin de contenir la balise simple animate
Notez l'absence de l'attribut X dans cette balise car la position horizontale est géré par l'élément ANIMATE.
Toujours dans IMAGE, notez les attributs width & height. Or un seul de ces deux paramètres est nécessaire ; le deuxième
sera calculé pour respecter le ratio largeur/hauteur dans l'image originale.
Si vous ignorerez la syntaxe du SMIL, je vous invite à consulter un chapitre du tuto sur le SVG.
La balise animate du SMIL
Vous verrez que c'est relativement simple.
Si il y a plus de deux valeurs il faut remplacer les attributs from & to par values = liste de valeurs.
La connaissance des fonctions de rappel (setTimeOut & setInterval) est indispensable pour créer le script d'animation.
Par rapport au document initial ("boxy_paysage2.svg") il faut toujours rajouter le "namespace" dans la balise SVG début.
De plus il faut insérer avant la balise fermante SVG les instructions ci-dessous :
Notez que l'attribut height a disparu ; la hauteur sera calculée en fonction du "width".
Puis il faut saisir le script :
var chien = document.querySelector('#chien');
var chat = document.querySelector('#chat');
var X = 900;
var x_chien = 0 ;
var x_chat = 100;
setInterval(animate,50) ; // fonction animate exécutée 20 fois par seconde
function animate()
{
x_chien = x_chien + 4 ;
x_chat = x_chat + 4 ;
if(x_chien >= X) {x_chien = 0 ; x_chat = 100 ; }
chien.setAttribute('x', x_chien);
chat.setAttribute('x', x_chat);
}
Le code JS doit être bien sûr contenu dans le conteneur SCRIPT.
Le conteneur SCRIPT peut être placé entre la balise fermante BODY et la balise fermante HTML.
Il existe une troisième solution pour animer les sprites : définir un modèle d'animation CSS ou "keyframes".
Par rapport au document initial ("boxy_paysage2.svg") il faut rajouter le "namespace" dans la balise SVG ouvrante. Et entre la balise SVG debut et le bloc DEFS il faut insérer une feuille de style. Le code CSS ci-dessous doit bien sûr être à l'intérieur de la balise double STYLE.
@keyframes deplace_chien
{
0% {transform:translateX(0px); }
100% {transform : translateX(900px);}
}
@keyframes deplace_chat
{
0% {transform:translateX(100px); }
100% {transform : translateX(1000px);}
}
#chien{animation : deplace_chien 10s 0s infinite linear;}
#chat{animation : deplace_chat 10s 0s infinite linear;}
Je crée deux modèles d'animation basés sur la translation sur l'axe des X.
Puis j'applique le modèle "deplace_chien" à l'objet SVG identifié "chien" et j'applique le
modèle "deplace_chat" à l'objet SVG identifié "chat".
En fin de document (juste avant la balise SVG fermante) j'insère :
Notez que l'attribut height a disparu.
Inskcape ne propose pas encore de panneau d'animations. Donc le titre de ce paragraphe est trompeur. En fait je démarre avec Inkscape et je termine la production du document SVG via un encodage manuel.
La croix de Lorraine change de couleur de fond : bleu puis blanc puis rouge.
J'ai obtenu le code suivant en utilisant Inkscape et en sauvegardant selon le type "SVG optimisé".
Pour générer ce code j'ai dessiné la croix de Lorraine (3 rectangles sans contour qui se croisent) remplis de bleu
puis j'ai groupé les trois formes et j'ai appliqué un ombrage par le biais d'un filtre prédéfini :
commande : filtre/ombre et lueurs / ombre portée ...
J'obtiens donc une belle croix de lorraine ombrée mais statique.
Rappel : pour produire un code SVG "propre" sous Inkscape, il faut "nettoyer le document" avant sauvegarde puis l'enregistrer en "SVG optimisé".
J'ai ensuite ouvert le document SVG avec NotePad et j'ai inséré une feuille de style
(entre la balise SVG début et la balise DEFS) car je désire une animation via CSS.
J'ai aussi modifié le code de la balise G.
Le code définitif est alors :
Le document initialement produit avec Inkscape, comprend quatre calques.
Chaque calque contient une carte incorporée.
Grâce à un animation en JS seul un calque sur quatre est affiché !
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 ne se superposent en même temps.
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 :
Extrait du code SVG à ce stade (le code du premier calque) :
Un calque c'est tout simplement le conteneur G affecté des attributs ID et style et incluant différents objets.
Donc j'ai rajouté le code SVG suivant qui correspond au texte.
Notez bien que chaque texte a un ID : "b_relief", ... "b_routes".
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.
...
// identification des calques par des variables
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 (contenur dans la balise double SCRIPT) est rajouté en fin de document, 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 (display : none) et un seul est affiché (display : block).
Le document Inkscape est un peu lourd : 800 KO mais c'est logique puisqu'il incorpore quatre images matricielles.
J'ai préféré ici l'incorporation à la liaison pour éviter de devoir télécharger les images matricielles.
Attention ce document contient un script ; il faut donc impérativement l'insérer dans la page web avec la balise OBJECT.
Pour davantage d'explications sur l'insertion d'un document SVG dans une page web : voir le chapitre suivant.
Inkscape propose un outil très intéressant : la vectorisation.
La vectorisation de photos (images matricielles) donnent à celles-ci un aspect artistique.
La vectorisation en une seule passe donne une esquisse en noir et blanc alors que la vectorisation en N passes produit
une aquarelle avec autant de couleurs (ou nuances de gris) que de passes.
Il s'agit d'un document SVG inséré dans cette page web via l'élément OBJECT.
Ce document comprend 8 calques avec une image vectorielle incorporée (liaison) dans chaque calque.
Via Inkscape j'ai vectorisé 8 photos ; j'ai donc obtenu 8 images vectorielles.
Le poids de chaque fichier Inkscape est fonction du nombre de passes ; léger avec une seule passe (simple esquisse) et
plus lourd avec plusieurs passes. En effet le nombre de chemins dans l'image vectorielle est fonction du nombre de passes.
Pour certains photos j'ai vectorisé en une passe (obtention d'une "esquisse" en noir et blanc) OU j'ai fait plusieurs passes
en couleurs ou en nuances de gris ; j'ai alors obtenu une "aquarelle".
Pour en savoir davantage sur la vectorisation d'images matricielles
Ensuite j'ai encodé manuellement un document SVG. En effet le code SVG est simple et surtout très répétitif donc le recours à un éditeur WYSIWIG de SVG est inutile si vous avez quelques notions sur le langage SVG.
Observez la valeur de l'attribut begin du premier SET : "0s;a8.end". Donc on crée une boucle d'animations.
Notez que dans chaque balise IMAGE il y a l'attribut width ou height mais pas les deux pour
éviter toute déformation éventuelle.
L'attribut width / height est fixé à 400 selon que l'image est en portrait ou en paysage.
La balise SET du SMIL
Inkscape & Boxy SVG ont chacun des avantages et inconvénients.
Lorsqu'on demande l'importation d'une image matricielle, Inskcape vous propose le choix entre l'incorporation et une simple liaison.
Alors qu'avec Boxy SVG l'image est obligatoirement "rastérisée" dans le document SVG.
Boxy SVG est désormais capable de générer le code SMIL pour des animations d'objets du canevas alors qu'Inkscape ne propose par encore de module d'animation.
Aussi l'idée est de démarrer la production d'un document SVG avec Inkscape pour bénéficier des avantages de la liaison, puis de terminer la réalisation via Boxy SVG pour bénéficier des avancées de ce logiciel en matière d'animation.
Cliquez sur le skieur pour lancer l'animation
Ce fichier ne pèse qu'1 KO grâce à l'utilisation de liaisons.
Les images liées sont bien sûr dans le même dossier que le document SVG.
Donc lors du téléversement de ce document vers votre hébergeur, pensez à transférer aussi les images ...
J'ai lancé Inkscape et créé un nouveau document.
J'ai importé par liaison l'image "paysage_hiver.jpg" et j'ai demandé d'ajuster les dimensions du document à cette image (700 par 437).
J'ai importé toujours par liaison "fondeur2.gif".
J'ai enregistré le document SVG.
D'office Inkscape crée pour chaque document un calque. Donc les deux instructions image ... sont à l'intérieur du conteneur G ; cette balise G est identifiée : ... id ="layer".