Par Biljana Michel Publié le 12 déc 2017 (mis à jour le 09 jan 2018)

Comment tout a commencé ?

Dès les prémices du World Wide Web, il y a eu une volonté d’attirer l’attention sur les éléments importants d’un site. Y ajouter du mouvement permet de rendre le tout plus dynamique et attractif.

C’est ce qu’a fait Jeffrey Zeldman en 1995, dans le site dédié au film Batman, Batman Forever. Le dirigeable du superhéros et le bat-signal flottaient dans le ciel de Gotham City dans une séquence animee image par image.

 

 

C’était l’une des premières utilisations d’une animation GIF sur une page web. Le site a atteint 1,5 millions de visiteurs par jour, à une époque où on dénombrait seulement 3 millions d’internautes dans le monde.

Ce succès a marqué l’essor des animations GIF dans le développement web, très bientôt suivi par les animations Flash. Cette technologie a introduit la possibilité d’interaction utilisateur. Dès lors a émergé l’époque baroque du web, où tout bougeait, clignotait et alpaguait l’internaute de manière plus ou moins raffinée.  Mais le Flash a par la suite souffert de deux écueils majeurs : une portabilité difficile ou impossible sur certaines plateformes et l’incompatibilité avec le design responsive. Or, dans les années 2010, les terminaux mobiles sont devenus incontournables, et le Flash n’a pas su s’adapter. Il a logiquement progressivement été abandonné sur ces appareils.

Il faut donc aujourd’hui se tourner vers des technologies plus récentes et adaptées.

 

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>">
Formations Peexeo Développement web

WordPress, bases de HTML/CSS, PHP/MySQL, JavaScript/jQuery…
Découvrez nos formations assurées par un développeur de l’agence !

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 !

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

 

Animation via CSS

Les SVG peuvent être animés 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
    exemple d'animation svg
  • CSS Animations & Transforms
    exemple d'animation 3d
    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. Le support de l’API est plus ou moins assuré par Chrome et Firefox.

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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *