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é.
Pour réaliser un dessin vectoriel animé (voire un jeu) il faut donc procéder en deux étapes : dessiner le décor avec
Inkcape ou Boxy SVG puis saisir le code correspondant à l'animation de certains objets du dessin.
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 (mais j'aurai pu utiliser Inkscape) ; le document se nomme "boxy_paysage2.svg".
Dans le cadre de Boxy SVG, le déplacement des deux animaux peut être généré via le panneau "animations".
Maintenant si vous connaissez le SMIL, vous irez aussi vite à encoder vous même ...
Et de surcroit vous pourrez opter pour la liaison entre images matricielles et document SVG (plutôt qu'une incorporation).
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 de prendre en compte les liaisons avec des images matricielles.
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 SVG fin l'importation des images par liaison.
Notez que l'attribut height a disparu.
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 script doit être 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 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
Il est préférable d'insérer ce document via la balise OBJECT (et non pas IMG). Voir le chapitre suivant pour davantage d'explications sur ce choix HTML.