Animer son site web grâce aux animations en SVG

Le SVG, le présent et l’avenir des images du web.
Format créé depuis maintenant presque dix ans, en 1998 exactement, et ne cesse d’envahir nos navigateur pour notre bien.
Grâce à ces nombreux avantages, notamment en terme de poids de l’image, de modularité et d’animation.
Le SVG ou Scalable Vector Graphics, que l’on peu traduire dans la langue de Molière 2.0 par Graphisme vectorielle modulable.

Les points fort du SVG

Le SVG c’est un format d’image qui utilise la technologie vectorielle, nous n’allons pas nous attarder, car ça mériterait un article complet. Mais le fait que le vectoriel calcul la distance et la courbure entre un point A et un point B
c’est un format très léger, il utilise un balisage XML, et de ce fait est entièrement modifiable en javascript ou CSS.

Réaliser son dessin vectoriel pour le web

Vous pouvez réaliser vos dessin vectoriel directement dans votre éditeur de texte pour les dessin simple (cercle, carré…), si vous avez du courage ou que vous recherchiez la prouesse technique. Cependant je vous conseil d’utiliser un logiciel de dessin vectoriel tels que :
en gratuit :  Inkspace …
en Payant : Illustrator , Affinity designer …

L’important c’est lors de la conception de bien séparer les éléments en calques et de surtout bien les nommer et de l’enregistrer en .svg dans votre logiciel vectoriel préféré

Pour l’exemple j’ai crée 2 carré un noir et un rose :

<svg>
<g id="carrenoir">
	<rect fill="#231F20" width="94" height="94"/>
</g>
<g id="carrerose">
	<rect x="100" y="1" fill="#D8275A" width="94" height="94"/>
</g>
</svg>

le dessin se trouve entre 2 balises <svg>, les balise <g> designe le groupe d’objets.  Ayant nommé les calques carrenoir et carrerose, le noms de mes claques se retrouve en id se qui permet de le modifier en javascript ou css.
pour les dessin directement en code vous trouverez différentes dénominations  rect, circle, polygon, path…
avec leurs valeurs respectives, c’est important de le noter car lors de vos animations il vous faudra ciblé (exemple : #carrenoir rect {fill:#fff;} ).

L’animation du SVG en CSS

Pour effectuer une animation SVG en CSS , rien de plus simple, étant donnée qu’il utilise un code XML on utilise le CSS classique pour pouvoir le modifier. Quelque détails cependant, il existe quelque variante itinérante au forme crée  par rapport a une simple div en CSS (exemple : Pour changer la couleur d’une div nous utiliserons « background:#000 » pour une forme nous utiliser « fill:#000 » …).
Mais le fonctionnement est le même.
Si vous souhaitez réviser les animation CSS visionner notre article COMMENT FAIRE UNE ANIMATION CSS

Un exemple vaut mieux que de long discours pour vous montrer comment procéder vous pouvez regarder ce petit code qui simule un cycle jour nuit.
Pour cet exemple il y a  une utilisation un transfom: translateX  pour le soleil et des variations de couleur avec fill: pour les couleur générales du SVG.

Creativité en SVG

En conclusion, si vous avez un bon niveau en dessin vectoriel et des notions de CSS vous pouvez vraiment réaliser de superbes animations pour vos logo, fond et icônes animées, n’hésiter pas partager vos créations en commentaire.