SVG et les animations par M2I FORMATION MERIGNAC

Formats d'image
Matriciel
Vectoriel
Insertion classique et data URI
Dessiner dans une page HTML
SVG VS Canvas
Déclaration VS programmation
Intérêt du DOM SVG
Les modes d'insertion dans la page HTML
Dessiner avec SVG
Les outils : Illustrator, Inkscape...
Optimiser les exports
Déclaration XML
ViewBox
Les formes simples : lignes, rectangles, ellipses
Les formes complexes : polygones et lignes polygonales
Filtres SVG
Texte
Texte en ligne
L'élément
Propriétés CSS
Alignement
Décalage et rotation
Animation SMIL
Compatibilité des navigateurs
Eléments animables
Balises d'animation
Attributs des balises
Interactions
Utiliser JavaScript
Scripts internes : balise
Scripts externes
Evènements
Fonctions
Styles CSS
Appliquer un style CSS
Attributs de présentation et CSS
Propriétés CSS de SVG
Attribut "style"
Balise : dans le ou dans la page
Ordre d'application des styles
Animations CSS
Points d'origine des éléments
Le module de propriétés "transition"
Le module de propriétés "animation"
La fonction translate
Définir les étapes avec keyframes
Pseudo
- classes de déclenchement
Ecouter les évènements d'animation avec JavaScript
Finaliser l'animation
Rendre les SVG responsive
Utiliser les Media Queries
Créer une bannière cliquable

Créer des fichiers SVG, les optimiser et les modifier
Animer des images SVG grâce à la SMIL, aux CSS et à JavaScript
Rendre ces animations interactives
Intégrer ces animations dans des pages HTML.