SVG

= Scalable Vector Graphic

Créer un SVG

• Si on nomme bien les layers, on peut exporter le nom du layer en tant qu'id
• Logiciels : Illustrator, Figma, Inkscape
• Nettoyer le svg : avec svgomg

Animer un SVG

• Z-index ne fonctionne pas avec les SVG
• En CSS on ne peut pas chaîner les animations, donc on doit jouer avec les delay : si on a une animation qui dure 2s, on doit mettre "animation-delay: 2s" à notre 2e animation
• "Transform" peut réagir différemment en fonction des navigateurs, à cause du transform origin
• Solution, utiliser une feature query : @supports (transform-box: fill-box)
• Library :
  • anime (le + léger et modulaire)
  • Greensock : forums, plugins (si on doit vendre un produit, on a besoin d'une licence comparé aux autres)
  • velocity.js (pas de timeline)
• Ease in /ease out pour ajouter des différences de vitesse dans la transition