Boxy SVG et animation de 'sprites'

Dans cette page je vais vous montrer intégrer puis animer des gif animés dans une document 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 WYSIWIG mais un éditeur de textes.
Je vais "mettre les mains" dans le code. Des connaissances en SVG deviennent indispensables !

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

Le code (extraits)

... <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> ... <desc>GIF animes inseres dans zone de dessin</desc> <image y="350" width = "60" xlink:href="../images/cycliste1.gif" id ="cycliste1" /> <image y="350" width = "60" xlink:href="../images/cycliste2.gif" id ="cycliste2" /> </svg>

Pour insérer des images dans un fichier SVG il faut utiliser la balise image avec différents attributs : x,y, width ou height 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"
Notez que j'ai identifié chaque élément IMAGE ; lisez la suite pour comprendre la raison.

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)"

En fait les filtres existent sous Boxy SVG (et en particulier le flou gaussien).
Dans le menu de droite il faut cliquer sur compositing puis sélectionner un type de filtre à appliquer à l'objet sélectionné.

Déplacements des "sprites"

J'ai décidé de déplacer dans le décor les gifs animés avec CSS.

La feuille de style dans le document :

...
		@keyframes deplace
		{ 
		0% {transform : translateX(800px);  }
		100% {transform : translateX(-60px); }
		}
	#cycliste1 {animation : deplace 15s 1s infinite linear;}
	#cycliste2 {animation : deplace 20s 1s infinite linear;}
...

Insertion du document Boxy SVG dans une page web

Dans la page précédente j'ai pu insérer un document boxy SVG dans une page via la balise IMG.
Ici ce n'est pas possible car mon document comprend des liens vers d'autres fichiers (des gifs animés).
Seule la balise OBJECT est capable d'afficher correctement cette animation plus complexe.
Le code d'insertion est donc :

<object type="image/svg+xml" data="road_css.svg" alt ="image SVG" style ="border: 1px solid black; width :90%;" ></object>
Retour menu