Animations SVG : qu’est ce que c’est ? Comment en créer ?

Pourquoi utiliser des animations ?

Dans une animation, il doit y avoir une histoire derrière le mouvement. Il s’agit d’insuffler une âme (en latin, anima). Elles peuvent ainsi apporter beaucoup de vie à un site web et le démarquer nettement de la concurrence.

L’"animateur web" doit se concentrer sur l’expérience utilisateur et déterminer des chemins d’interactions intuitifs. Tout doit être logique et parfaitement fluide.

La décision d’implémenter une animation doit être traitée comme toute autre décision au sujet du design. Les pour et les contre doivent être soigneusement pesés et il faut s’assurer de ne pas compromettre l’expérience utilisateur, ni de se retrouver avec beaucoup de code difficile à maintenir et faire évoluer.

Si on parlait de SVG ?

C’est quoi, le SVG ?

SVG, c’est l’acronyme de Scalable Vector Graphics. C’est donc un format qui décrit des ensembles graphiques vectoriels. Il s’appuie sur le XML et sa structure de balises.

Pourquoi utiliser le SVG ?

• C’est flexible. Redimensionner un élément est aisé et instantané (Scalable)
• C’est visuellement très précis, comme tout format vectoriel (Vectorial)
• C’est graphique. Bon, il fallait bien terminer l’acronyme (Graphics). Plus sérieusement, les fichiers sont relativement petits, et surtout leur taille dépend de la complexité de l’élément, pas de sa dimension d’affichage, contrairement à d’autres formats.

Attention, les fichiers produits dans certains logiciels, comme Illustrator, comportent des éléments parfois incompatibles avec un export SVG. Il y a donc un certain nombre de points à respecter lorsque vous créez un SVG destiné à un site.

De la même façon, il y a des possibilités d’optimisation du fichier une fois celui-ci exporté. Elles peuvent être faites manuellement comme à l’aide d’outils, comme SVGO qui s’appuie sur NodeJS.

Comment insérer un SVG ?

• En tant qu’image :
        <img src="image.svg" alt="image">
• En tant qu’image de fond CSS :
        .element { background-image: url(/images/image.svg);
• En tant que balise HTML (inline SVG). C’est sûrement la meilleure façon de l’insérer pour une manipulation ultérieure de votre SVG.
• En tant qu’iframe/object/embed
• Dans le Data URI d’une balise image :
        <img src="data:image/svg+xml;utf8 <svg> { placez ici votre contenu SVG } </svg>">

Et maintenant, on l’anime !

Et pour animer votre beau SVG, vous n’avez pas une, pas deux, pas trois mais quatre manières de le faire !

• CSS3 Animation
• SMIL Animation
• API Animation
• En utilisant JavaScript

Animation via CSS

Il est possible d’animer les SVG comme tous les éléments HTML (ou presque) par le CSS.

Bon, je le mets où mon CSS ?

Là encore, il y a quatre possibilités, qui ont chacune des répercussions sur les capacités d’interaction et d’animation ultérieures.

• Style inline (style="…")
• Embedded Styles (balises "<style></style>") dans le corps du SVG
• Embedded styles hors du SVG (balises "<style></style>" dans le "head" du fichier HTML)
• Feuilles de style externes

Et qu’est-ce que je peux faire comme animations SVG avec le CSS ?

• CSS Transitions

• CSS Animations & Transforms

Attention à la propriété transform-origin. Elle peut vous causer bien du souci si vous ne gardez pas ce schéma en tête :



 

Quand vous affectez des valeurs à la propriété CSS transform-origin :

1.  Valeurs en pourcentage : la valeur est passée relativement à la bounding box de l’élément, y compris sa bordure.

2.  Valeurs absolues : l’origine est définie par rapport au canvas du SVG.

A l’heure actuelle, il y a un bug bien connu sous Firefox qui fait que l’utilisation des valeurs en pourcentage ne fonctionne pas comme attendu. Utilisez plutôt les valeurs absolues.*

• 3D Transforms
  Il y a pas mal de bugs connus :
  •       Perspective ne marche pas actuellement sous Chrome*
  •       Il n’y a pas d’accélération matérielle sur les 3D Transforms sous Chrome (pour le moment).*

*En tout cas, à la date de rédaction de cet article, Décembre 2017

Limites actuelles

1.   Motion along the path (voir sur CodePen)

2.  Morphing Shapes (voir sur CodePen)

3.  Certains attributs du SVG ne peuvent être définis/stylisés/changés par CSS

Les animations SVG avec SMIL

Synchronized Multimedia Integration Language est un langage de balises (comme XML ou HTML) qui permet d’animer les SVG sans CSS ou JavaScript.

Du fait de la nature vectorielle des SVG, il est possible de les animer de manière plus complexe qu’avec la manipulation du DOM par CSS.

Pourquoi utiliser SMIL ?

• Declarative animations (c’est quoi ?)
• Les attributs inaccessibles en CSS sont animables (path, morphing shapes…)
• Les animations fonctionnent quand le SVG est embarqué comme image ou image de fond dans la page web
• Gestion des événements et synchronisation des animations possibles

 



 

Les animations SMIL fonctionnent sur tous les navigateurs sauf Internet Explorer et Edge (quelle surprise…) et OperaMini.

Depuis les versions 45 de Chrome et 32 de Opera, SMIL est déprécié et son utilisation va provoquer des avertissements dans la console. Le support de SMIL devrait être abandonné dans des versions futures.

API Animations

L’API Web Animations (WAAPI, Web Animations API) offre aux développeurs une interface JavaScript au moteur d’animation du navigateur.

Il s’agit en fait d’une passerelle entre les animations CSS et les animations dynamiques JavaScript. Chrome et Firefox assurent plus ou moins le support de l’API.

Il apparaît également dans les previews technologiques de Safari tandis que Edge l’a placé en priorité moyenne sur son Backlog.

Animer le SVG avec JavaScript

Il existe des librairies JavaScript dédiées aux animations qui supportent le format SVG ou lui sont carrément dédiées. En voici quelques exemples :

• SnapSVG est la référence parmi les librairies dédiées purement au SVG
• Bonsai est une librairie JavaScript puissante qui permet de dessiner, modifier et animer les éléments graphiques sur une page
• D3 est spécialisée dans la représentation graphique de données grâce au SVG
• Velocity permet des animations d’une rapidité incroyable
• GSAP est une bibliothèque d’animation pour HTML5. Cela permet d’animer tout ce à quoi JavaScript peut accéder (propriétés CSS, SVG, objets de la bibliothèque canevas, objets génériques…)
• Lazy Line Painter est quant à lui un plugin jQuery pour l’animation des SVG
• SVG.js est une librairie JavaScript légère pour manipuler et animer SVG
• Vivus permet quant à elle de donner une apparence « main levée » à vos SVG

Il y a pléthore d’autres librairies, qui ont chacune leur spécificité, leurs forces et faiblesses. Comme toujours, le choix d’une librairie tient autant de l’adéquation à vos besoins, que de la facilité d’utilisation, de la présence de ressources et de documentation et surtout de leurs  garanties de stabilité dans le temps.

Pour vous faire accompagner dans votre apprentissage du développement web, consultez nos formations.

 

Envie d’en savoir plus ?

Si vous souhaitez que l’on vous accompagne sur la création d’animations SVG ou tout autre supports, n’hésitez pas à nous envoyer un message.