Un guide pratique sur l'animation SVG

Tout ingénieur front-end digne de ce nom est conscient des défis que pose l'écosystème fragmenté d'appareils. Différentes tailles d'écran, résolutions et rapports d'aspect rendent difficile la fourniture d'une expérience cohérente. Plus encore pour ceux qui veulent offrir une expérience parfaite au pixel près.

Les graphiques vectoriels évolutifs (SVG) aident à résoudre une partie de ce problème, et le font très bien. Bien qu'ils aient leurs limites, les SVG peuvent être très utiles dans certaines occasions et, si vous avez une bonne équipe de conception, vous pouvez également créer une expérience visuellement plus époustouflante sans alourdir indûment le navigateur Web ni entraver les temps de chargement.

Au cours des derniers mois, j'ai travaillé sur un projet qui utilise largement SVG et ses capacités d'animation et d'effets. Dans cet article, je vais partager comment vous pouvez utiliser SVG et ses techniques d'animation pour donner une nouvelle vie à votre travail frontal sur le Web.

Image Vectorielle

SVG est un format d'image basé sur XML, un peu comme le fonctionnement de HTML. Il définit différents éléments pour un certain nombre de formes géométriques familières qui peuvent être combinées dans le balisage pour produire des graphiques en deux dimensions.

La spécification SVG est une norme ouverte développée par le World Wide Web Consortium (W3C) en 1999.

Tous les principaux navigateurs Web prennent en charge le rendu SVG depuis un certain temps déjà.

Étant donné que les graphiques SVG sont des documents XML, les navigateurs Web fournissent des API basées sur des nœuds DOM qui peuvent être utilisées pour interagir avec les images. Parlez de donner vie aux images !

Chemins SVG

S'il y a un élément surpuissant dans SVG, ce serait l'élément <path> .

L'élément de chemin est une forme de base qui peut être utilisée pour créer presque toutes les formes 2D avancées que vous pouvez imaginer.

L'élément fonctionne en prenant une séquence de commandes de dessin. Il ressemble beaucoup au langage de programmation Logo de 1967, seulement modernisé et conçu pour des graphismes sophistiqués. L'élément prend cette séquence de commandes de dessin via l'attribut d .

 <!-- A right-angled triangle --> <path d="M10 10 L75 10 L75 75 Z" />

Vous pouvez penser à un stylo virtuel qui dessine sur l'écran, et les commentaires de dessin dans l'élément de chemin contrôlent simplement le stylo. Dans l'exemple ci-dessus, le stylo reçoit l'instruction de se déplacer vers la position (10, 10) ( M10 10 ), de tracer une ligne vers (75, 10) ( L75 10 ), de tracer une ligne vers (75, 75) L75 75 puis de fermer le chemin en revenant au point de départ ( Z ).

En utilisant d'autres commandes de dessin, telles que les arcs ( A ), les courbes de Bézier quadratiques ( Q ), les courbes de Bézier cubiques ( C ), etc., vous pouvez créer des formes et des graphiques beaucoup plus complexes en SVG.

Vous pouvez en apprendre beaucoup plus sur l'élément de chemin ici.

Chemins SVG et CSS

"D'accord Juan, j'ai compris. Les chemins sont puissants, mais comment puis-je les animer ? » vous dites.

Pour notre première technique, nous allons tirer parti de deux attributs SVG : stroke-dasharray et stroke-dashoffset .

L'attribut stroke-dasharray contrôle le motif de tirets et d'espaces utilisés pour tracer le tracé. Si vous vouliez dessiner vos lignes comme un groupe de tirets et d'espaces au lieu d'un trait d'encre continu, c'est l'attribut que vous utiliseriez.

Les images SVG faisant partie du DOM du navigateur Web et stroke-dasharray étant un élément de présentation, l'attribut peut également être défini à l'aide de CSS.

De même, l'attribut stroke-dashoffset (qui spécifie jusqu'où dans le modèle de tiret pour commencer le tiret) peut également être contrôlé à l'aide de CSS.

Ces deux attributs SVG, ensemble, peuvent être utilisés pour animer des chemins SVG, donnant au spectateur l'illusion que les chemins sont dessinés progressivement.

Prenez cette courbe de Bézier quadratique, par exemple :

 <path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>

Pour animer ce chemin comme s'il était dessiné progressivement et en douceur sur l'écran, nous devrons définir les longueurs de tiret (et d'espace), en utilisant l'attribut stroke-dasharray, égales à la longueur du chemin. C'est ainsi que la longueur de chaque tiret et espace dans la courbe en pointillés est égale à la longueur du chemin entier.

Ensuite, nous allons définir le décalage du tiret, en utilisant l'attribut stroke-dashoffset, sur 0. Cela fera apparaître le chemin à l'écran comme une courbe solide (nous regardons essentiellement le premier tiret, et nous avons déjà fait en sorte que chaque tiret couvre l'ensemble longueur de la courbe). En définissant le décalage du tiret égal à la longueur de la courbe, nous nous retrouverons avec une courbe invisible (nous regardons maintenant la courbe rendue comme un espace entier - la partie qui suit immédiatement un tiret).

Maintenant, en animant la propriété stroke-dashoffset, vous pouvez faire apparaître progressivement la courbe à l'écran.

Voir les chemins Pen Toptal - SVG & CSS par Toptal Blog (@toptalblog) sur CodePen.

Comme vous pouvez le voir, la courbe est toujours là. Nous modifions uniquement le décalage du tiret pour faire apparaître la partie en pointillé petit à petit.

Vous pouvez aller plus loin en utilisant le même principe mais avec plus de chemins :

Voir les chemins Pen Toptal - SVG & CSS par Toptal Blog (@toptalblog) sur CodePen.

Ici, vous avez une courbe noire qui est fixe, une rouge qui se déplace le long du chemin et une autre noire qui suit la rouge mais à 40 pixels derrière.

Stroke-dasharray et stroke-dashoffset sont deux attributs très puissants qui peuvent être utilisés pour appliquer une pléthore d'animations et d'effets à vos chemins SVG. Vous pouvez essayer cet outil pratique que vous pouvez utiliser pour expérimenter les deux attributs.

Animation d'objets le long de chemins SVG

Avec SVG et CSS, une autre chose intéressante que vous pouvez faire est d'animer des objets ou des éléments suivant un chemin.

Il y a 2 attributs SVG que nous allons utiliser pour l'animation :

• offset-path : la propriété CSS offset-path spécifie le chemin de décalage où l'élément est positionné.

• offset-distance : la propriété CSS offset-distance spécifie une position le long d'un offset-path.

En combinant ces deux propriétés, vous pouvez facilement créer des animations comme celle-ci :

Voir les chemins Pen Toptal - SVG & CSS par Toptal Blog (@toptalblog) sur CodePen.

Comme vous pouvez le voir, nous avons un nouvel élément div.ball .

Cet élément peut être n'importe quoi, un div, une image, du texte, peu importe. L'idée dans cet exemple est qu'avec l'utilisation de offset-path et offset-distance, vous pouvez donner à l'élément un chemin à suivre et animer la distance et l'élément se déplacera sur le chemin.

Animations SVG utilisant JavaScript

Si tout cela n'est pas déjà assez sophistiqué, vous pouvez toujours recourir à JavaScript.

L'animation d'éléments SVG avec JavaScript peut ressembler beaucoup à l'animation d'éléments DOM. Cependant, avec JavaScript, vous pouvez réaliser les techniques d'animation que nous avons vérifiées ci-dessus, mais plus facilement.

Auparavant, nous devions coder en dur les longueurs de chemin dans notre CSS. Avec l'aide de la fonction JavaScript path.getTotalLength() , il est possible de calculer la longueur du chemin à la volée et de l'utiliser au besoin. Vous pouvez en savoir plus ici.

En outre, un certain nombre de bibliothèques sont déjà à votre disposition et peuvent rendre les animations SVG beaucoup plus faciles qu'elles ne le sont déjà.

Snap.svg facilite non seulement le dessin d'images SVG à l'aide de JavaScript, mais il rend leur animation aussi simple que d'appeler .animate({}) .

Une autre bibliothèque, anime.js, vous permet de faire en sorte qu'un élément div suive un chemin SVG avec seulement quelques lignes de code.

Si vous recherchez une bibliothèque qui fait plus par elle-même mais qui rend les résultats toujours époustouflants, alors Vivus est ce que vous recherchez. Il adopte une approche différente, plus axée sur la configuration, de l'animation de chemin SVG. Avec cette bibliothèque, il vous suffit d'ajouter un ID à l'élément SVG que vous souhaitez dessiner et de définir un objet Vivus avec cet ID. Vivus s'occupe du reste.

Lectures complémentaires

Vous trouverez ci-dessous une liste de ressources qui pourraient vous être utiles lorsque vous traitez des images SVG et que vous les animez :

Pour aller plus en profondeur avec l'animation SVG, vous pouvez lire ce court article sur les trois façons d'animer des images SVG et regarder le screencast vidéo de CSS Tricks.

Une chose que cet article n'a pas couverte est l'animation d'images SVG avec Synchronized Multimedia Integration Language (SMIL). Alors que l'utilisation de CSV pour SVG vous donne l'avantage de travailler avec quelque chose que vous connaissez déjà, SMIL fait passer les choses au niveau supérieur.

Avec SMIL, vous pouvez implémenter des effets d'animation avancés tels que le morphing de forme en utilisant SVG seul. Un guide court mais efficace sur l'utilisation de SMIL pour de tels effets est disponible ici.

Bien que le support de SMIL soit un peu énervé en ce moment (sans jeu de mots).

Animations sans compromis pour le Web

Dans cet article, vous avez parcouru plusieurs façons d'animer des éléments SVG à l'aide d'éléments CSS ou HTML sur des chemins SVG.

SVG est léger et peut être utilisé pour produire des graphiques nets quels que soient la taille de l'écran, le niveau de zoom et la résolution de l'écran. Avec SVG, offrir une expérience moderne et vivante est plus facile que jamais, tout en profitant des avantages de l'utilisation des technologies Web standard.

Et c'est tout! J'espère que vous avez trouvé ce tutoriel d'animation SVG utile et que vous avez aimé le lire.

Lectures complémentaires sur le blog Toptal Engineering :

• Comment aborder les animations SVG en CSS