Les animations prennent de plus en plus de place dans le Web actuel, notamment avec les progrès en matière de lecture du format SVG. Ce format vectoriel (non pixellisé, sans perte) est en vogue car il allie à la fois l'esthétisme, la performance et la polyvalence, et nous permet donc de créer des images d'une grande précision, avec possibilité de l'animer à sa guise.
Tout d'abord, sachez qu'il ne faut pas confondre les animations réalisées directement dans le fichier SVG, fixées par les principes du W3C, et les animations appliquées à un fichier SVG via du CSS. Dans cet article, nous allons traiter essentiellement de ce second cas, bien que le deuxième exemple présenté profite tout de même d'une petite animation en SVG pur. Si vous souhaitez rendre vos SVG vivants, attrayants et animés, il faut toutefois savoir qu'à ce jour, le format natif offre bien plus de possibilités et de libertés que les animations en CSS. Cela demande donc de se former quelque peu si vous souhaitez générer certains types d'animations, comme nous le verrons plus tard dans cet article.
Pour rédiger cet article, je me suis basé sur le logo de la commune dans laquelle j'ai eu le bonheur d'être élu (conseiller délégué aux questions numériques et la communication institutionnelle, ça ne s'invente pas ^^). Le format SVG étant souvent utilisé pour des pictogrammes ou des logos, l'exemple est assez révélateur de ce que l'on peut attendre de petites animations en SVG et CSS. On pourrait beaucoup plus loin dans les animations, bien entendu, mais l'objectif n'est pas de trop en mettre et de ne pas vous perdre avec trop de superflu. Si vous avez besoin des codes d'exemples, vous pouvez les télécharger directement ici ou en recopiant les extraits des programmes dans les CodePen présentés ci-après...
Télécharger “Logos animés en SVG et CSS”logos-svg-animes.zip – Téléchargé 159 fois – 6,43 Ko
Générer un effet d'écriture manuscrite
Le premier CodePen présente le logo de Buxerolles sans aucune animation initiale en SVG. C'est ici uniquement le code CSS qui génère l'animation. L'idée était de créer un effet de texte en écriture manuscrite avec ensuite un remplissage des lettres. Pour varier les plaisirs, les remplissages changent juste quelque peu d'un bout de texte à un autre.
Il s'agit juste de créer des animations CSS, de les appliquer aux bonnes balises SVG (car oui, c'est un format balisé comme HTML pour celles et ceux qui ne le sauraient pas encore), et surtout de mettre en œuvre les bons délais d'animation pour que tout s'imbrique correctement (à l'image d'une timeline en vidéo par exemple).
On observe ici que les animations principales représentent l'effet d'écriture manuscrite, et l'autre grande famille d'animations consiste à remplir les lettres avec un effet de fondu (opacité progressive). Autant dire que pour animer en SVG en CSS à l'heure actuelle, il n'existe quasiment que ces effets possibles. D'autres propriétés CSS évoluent ou vont arriver prochainement, et devraient donner bien plus de liberté d'action en la matière...
See the Pen
Logo animé SVG + CSS by Mathieu Chartier (@MathieuChartierSEO)
on CodePen.
S'il y a un effet à retenir essentiellement, c'est bien celui de l'écriture manuscrite. Elle repose essentiellement sur des propriétés propres au SVG, dont voici quelques explications :
- fill : définit le remplissage de la forme (vecteur). Parfois, les couleurs sont directement définies dans le SVG, mais il est possible de prendre le dessus avec cette propriété CSS.
- stroke : définit la couleur du contour de la forme. Au même titre que fill, la propriété CSS prend le dessus sur le stroke appliqué directement en SVG.
- stroke-linecap : définit la forme de l'extrémité des vecteurs SVG. La valeur "square" de l'exemple permet de terminer avec une section bien droite et une longueur adaptée au contour des lettres (tout du moins dans notre cas), contrairement à "butt" qui s'applique à la longueur strict du vecteur (sans prendre en compte le contour). L'autre valeur possible est "round" qui arrondit l'extrémité, mais qui ne nous intéressait pas ici.
- stroke-dashoffset : décale la position de départ sur les vecteurs SVG. L'animation d'écriture manuscrite s'appuie sur cette propriété pour créer le remplissage des traits dans notre exemple.
- stroke-dasharray : gère le décalage entre les segments qui dessinent le contour d'un vecteur. Cette propriété est utilisée dans l'animation pour artificiellement "éclater" les formes, pendant que l'animation vient tracer le contour.
Il existe bien d'autres propriétés applicables au SVG, comme le montre la documentation de Mozilla notamment, alors n'hésitez pas à jeter un œil dedans si nécessaire...
Effet de texte avec remplissage de lettres en SVG
Le second exemple reprend les grandes lignes de la première animation, sauf qu'au lieu de remplir les lettres colorées du logo avec un fondu, on créé un effet de remplissage en couleur de bas en haut. Ce petit changement peut sembler anodin au premier abord, mais il n'est pas réalisable en pur CSS à ce jour (enfin sans bidouiller avec un masque, etc.), il faut donc passer par de l'animation SVG pour arriver à nos fins.
Le CodePen ci-dessous reprend donc à la fois des animations en CSS pour l'écriture manuscrite et le fondu des lettres en gris, mais le code SVG a été revu pour accueillir quelques animations pour les lettres colorées. Les délais d'animation ont dû être adaptés pour bien s'ajuster entre les animations SVG et CSS. Pour animer le remplissage, il est possible d'utiliser la balise <lineargradient> (dégradé de fond) en SVG, couplés aux balises d'animations <stop> (étape/couleur d'un dégradé) et <animate> (animation), le tout encapsulé dans une balise <defs> (généralement faite pour accueillir les éléments réutilisables en SVG). Selon le SVG à animer, il faut absolument réadapter les "stop" et les animations, l'exemple ci-dessous serait à réadapter selon le cas rencontré...
<defs>
<linearGradient id="B-fill" x1="0" y1="100%" x2="0" y2="0">
<stop offset="0%" stop-opacity="0" stop-color="#1fafb8">
<animate id="startB" attributeName="offset" values="0;1" repeatCount="1" dur="1.5s" begin="3.5s" fill="freeze"/>
<animate attributeName="stop-opacity" values="1" repeatCount="1" dur="1.5s" begin="startB.begin" fill="freeze"/>
</stop>
<stop offset="100%" stop-opacity="0" stop-color="#1fafb8">
<animate attributeName="offset" values="0;1" repeatCount="1" dur="1.5s" begin="3.5s" fill="freeze"/>
</stop>
</linearGradient>
</defs>
Voici le CodePen général du logo animé en SVG + CSS.
See the Pen
Logo Buxerolles animé (SVG + CSS) by Mathieu Chartier (@MathieuChartierSEO)
on CodePen.
J'espère que ces deux exemples vous auront donné envie de créer des animations en SVG et en CSS avec ce format vectoriel riche. Les possibilités sont innombrables et on peut trouver des merveilles sur la Toile à ce sujet. Merci à vous d'avoir lu jusqu'ici, et n'hésitez pas si vous avez des questions...