Animation en utilisant Boxy SVG

Dans cette page je vais vous montrer comment produire une image animée en utilisant surtout l'application Boxy SVG.
Bien évidemment - comme Inkscape - Boxy SVG est incapable de générer le code SVG (ou JavaScript ou CSS) permettant d'animer des objets SVG.
Donc il faut "mettre les mains" dans le code généré (à partir d'un éditeur de textes tel Notepad) mais tout le codage en amont (celui correspondant aux dessins statiques) peut être confié à Boxy SVG.

L'animation obtenue

Je vais maintenant vous expliquer ma démarche pour obtenir ce fichier vectoriel SVG et animé.

Première étape : utilisation de Boxy SVG

Le code obtenu (extrait)

Il est très court.

<?xml version="1.0" encoding="utf-8"?> <svg viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com"> <defs> <bx:grid x="0" y="0" width="100" height="100"/> </defs> <rect y="1" width="800" height="333" style="fill-opacity: 0.4; fill: rgb(152, 220, 239); stroke-width: 1; pointer-events: none;"/> <rect y="334" width="800" height="166" style="fill: rgb(114, 109, 109); stroke-width: 1; pointer-events: none;"/> <rect y="334" width="800" height="53" style="fill: rgb(55, 225, 70); stroke-width: 1; pointer-events: none;"/> <g style="pointer-events: none;"> <ellipse style="fill: rgb(255, 255, 255);" cx="279" cy="83" rx="148" ry="43"/> <ellipse style="stroke-width: 2; fill: rgb(255, 255, 255);" cx="512" cy="49" rx="143" ry="30"/> </g> <g transform="matrix(1.1261, 0, -0.00688, 1.11564, 113.61607, -34.63032)" style="pointer-events: none;"> <ellipse style="fill: rgb(19, 229, 19);" cx="201" cy="180" rx="26" ry="79"/> <rect x="196" y="259" width="11" height="83" style="fill: rgb(159, 55, 14);"/> </g> <g transform="matrix(1.1261, 0, 0, 1.10802, 483.35812, -32.02557)" style="pointer-events: none;"> <ellipse style="fill: rgb(19, 229, 19);" cx="201" cy="180" rx="26" ry="79"/> <rect x="196" y="259" width="11" height="83" style="fill: rgb(159, 55, 14);"/> </g> ...

Notez la propriété pointer-events : none; qui signifie que l'objet est verrouillé (ne peut être modifié).
Pour verrouiller un objet il faut utiliser le menu "objects" dans la barre de droite ("panels").
Grâce à ce menu on peut aussi grouper plusieurs formes en un seul objet. Il suffit de sélectionner les formes dans la liste et de produire la commande "group". C'est ce que j'ai fait avec les deux formes (ellispe vert et rectangle marron) du premier arbre. Puis j'ai dupliqué plusieurs fois ce groupe.

Le menu "objects" permet aussi de modifier l'ordre de superposition des formes. Ainsi j'avais déjà dessiné les arbres lorsque j'ai voulu dessiner le nuage (deux ellipses blanches). Donc ce nuage se retrouvait devant les arbres ...
J'ai alors ouvert le menu "objects" et avec des "glisser-déposer" j'ai modifié l'ordre d'apparition des objets.

L'outil "calque" n'existe pas sous Boxy SVG. Donc dès que vous êtes satisfait du rendu d'un objet pensez à le verrouiller pour éviter de le modifier par erreur ...

Deuxième étape : utilisation de NotePad

A partir de maintenant je ne vais plus utiliser d'éditeur graphique mais un éditeur de textes tel notepad.
Je vais "mettre les mains" dans le code. Des connaissances en SVG deviennent indispensables !

Je n'ai pas trouver l'outil floutage sous Boxy SVG or je veux que mes objets soient un peu flouté.
Je veux aussi insérer dans le document deux gifs animés.

Le code (extraits)

<?xml version="1.0" encoding="utf-8"?> <svg viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <bx:grid x="0" y="0" width="100" height="100"/> <filter id="flou"> <feGaussianBlur stdDeviation="2" /> </filter> </defs> <rect y="1" width="800" height="333" style="fill-opacity: 0.4; fill: rgb(152, 220, 239);" filter="url(#flou)" /> <rect y="334" width="800" height="166" style="fill: rgb(114, 109, 109);" filter="url(#flou)" /> <rect y="334" width="800" height="53" style="fill: rgb(55, 225, 70);" filter="url(#flou)" /> <rect x="0" y="437" width="800" height="6" style="fill: rgb(245, 234, 115);" filter="url(#flou)"/> <g filter="url(#flou)"> ... <desc>GIF animes inseres dans zone de dessin</desc> <image y="350" x = "700" width = "60" height ="60" xlink:href="../images/cycliste2.gif" /> <image y="350" x = "750" width = "60" height ="60" xlink:href="../images/cycliste1.gif" /> </svg>

Explications

Pour insérer des images matricielles dans un fichier SVG il faut utiliser la balise image avec différents attributs : x,y, width, height (pour positionnement et redimensionnement) et xlink:href = chemin relatif de l'image insérée

Attention l'instruction image est interprétée uniquement si vous rajoutez un "namespace" dans la balise SVG : xmlns:xlink="http://www.w3.org/1999/xlink"

Comme je ne vais plus utiliser Boxy SVG je peux supprimer pour toutes les formes : pointer-events : none;

J'ai défini un flou sous forme d'un filtre identifié "flou". J'applique ce filtre à toutes les formes ou groupes de formes : filter="url(#flou)"

Le rendu

Les GIF animés sont bien intégrés mais ils ne se déplacent pas le long de la route ...

Déplacements des "sprites"

Il y avait aussi une troisième solution : JavaScript (traditionnel ou jQuery).

Utilisation du SMIL

Le code (extrait) :

... <desc>GIF animes inseres dans zone de dessin</desc> <image y="350" width = "60" height ="60" xlink:href="../images/cycliste2.gif" > <animate attributeName="x" values ="800;-60" attributeType ="XML" begin = "0s" dur="20s" repeatCount="indefinite" /> </image> <image y="360" width = "60" height ="60" xlink:href="../images/cycliste1.gif" > <animate attributeName="x" values ="800;-60" attributeType ="XML" begin = "1s" dur="15s" repeatCount="indefinite" /> </image> </svg>

Les balises image deviennent des conteneurs (balises doubles) pour contenir une balise animate.

Utilisation du CSS

Le code (extraits):

... <style> @keyframes deplace { 0% {transform : translateX(800px); } 100% {transform : translateX(-60px); } } #cycliste1 {animation : deplace 15s 1s infinite linear;} #cycliste2 {animation : deplace 20s 1s infinite linear;} </style> ... <desc>GIF animes inseres dans zone de dessin</desc> <image y="350" width = "60" height ="60" xlink:href="../images/cycliste1.gif" id ="cycliste1" /> <image y="350" width = "60" height ="60" xlink:href="../images/cycliste2.gif" id ="cycliste2" /> </svg>

Il a donc fallu que j'identifie les deux "sprites" insérés.
Retour menu