SVG & Animation

Par Xavier SENENTE

§ 1

Du pixel au vecteur

Matrice vs vecteur

Les éléments de bases

Point d’ancrage
Un point qui définit la forme du tracé. Il peut former un angle ou être courbé selon les poignées associées.

Segment
La ligne reliant deux points d’ancrage. Elle peut être droite ou courbe.

Poignées de tangente (Bézier)
Des guides attachés aux points d’ancrage pour contrôler l’orientation et la courbure des segments.

Les courbes de Bézier

Les courbes de Bézier sont des courbes polynomiales paramétriques développées pour concevoir des pièces de carrosserie d'automobiles. Elles ont été conçues par Paul de Casteljau en 1959 pour Citroën et, indépendamment, par Pierre Bézier en 1962 pour Renault (les travaux de Paul de Casteljau étant confidentiels, c'est le nom de Bézier qui est passé à la postérité).

Courbe de Bézier

Les types de point d'ancrage

Lorsque l'option Straight (droit) est sélectionnée, un point vectoriel n'a ni poignées ni courbes autour. Si on applique cette option à deux points adjacents, le chemin qui les relie sera une ligne droite.
“Mirrored” est la méthode par défaut, la plus courante aussi, pour contrôler une courbe de Bézier. Cette approche utilise deux poignées qui partent du point et se situent à la même distance et sur le même angle. Les poignées semblent être “tangentes” à la courbe. L'option Mirrored part du principe que si les deux poignées sont sur le même angle, la forme aura une courbe douce, c'est à dire qu'il n'y aura pas d'angle visible sur la forme, contrairement à l'option Disconnected.
“Asymmetric” est similaire à Mirrored pour ce qui est de l'angle égal, mais les poignées ne sont pas à la même distance du point vectoriel. C'est particulièrement utile lorsqu'une courbe doit retomber rapidement sur un côté.
“Disconnected” vous permet de changer chaque poignée indépendamment l'une de l'autre.

Les champs d'application

Typographie
Illustration
Pictogrammes / icones
Identité visuelle
Cartographie
Plans techniques
Webdesign

§ 2

SVG : syntaxe et structure

SVG

Scalable Vector Graphics (Wikipedia)

Scallable Vector Graphics

Langage de balisage XML décrivant des images vectorielles bidimensionnelles.

Pourquoi utiliser SVG ?

Redimensionnable et indépendant de la résolution
Bonne implémentation sur les différents navigateurs
Poids réduit des fichiers
Interactif et stylisable
Effets graphiques (masque, filtres, mode de fusion…)
Accessible
Facile à créer à l'aide d'outils

Structure de base SVG

<svg xmlns="http://www.w3.org/2000/svg">
     viewBox="0 0 400 400" 
  <path d="...">
</svg>

viewport : conteneur définissant la surface visible
namespace : Déclaration de l'espace de nom
viewBox : définit la position et la dimension de l'espace de travail dans le viewport
Élément(s) graphique(s)

Viewport, viewBox & preserveAspectRatio

Le viewBox permet de spécifier la façon dont l'élément graphique peut s’étendre pour remplir le viewport. Lorsque les valeurs de chacun des deux sont identiques, l’image est visible en entier et se redimensionne lorsque la taille du viewport est modifiée.

Si le viewBox et le viewport n’ont pas le même ratio largeur et hauteur, preserveAspectRatio indique si l’on doit ou non forcer un redimensionnement uniforme.

viewBox

min-x

min-y

width

height

preserveAspectRatio

<align>

meet slice

repères x et y

<svg viewBox="0 0 800 400" width="800" height="400"
     preserveAspectRatio="xMidYMid meet">
   <path d="..."/>
</svg>

La largeur width et la hauteur height de notre SVG établissent la surface visible (le viewport).

Si nous définissons une viewBox, nous pouvons spécifier la façon dont notre élément graphique peut s’étendre pour remplir le viewport. Lorsque les valeurs de chacun des deux sont identiques, l’image est visible en entier et se redimensionne lorsque la taille du viewport est modifiée.

Si la viewBox et le viewport n’ont pas le même ratio largeur et hauteur, preserveAspectRatio indique si l’on doit ou non forcer un redimensionnement uniforme.

preserveAspectRatio accepte deux paramètres, <align> et <meetOrSlice>. Le premier paramètre comporte deux parties et régit l’alignement de la viewBox à l’intérieur du viewport. Le second paramètre est optionnel et indique la façon dont le ratio d’aspect doit être préservé.

Il existe trois options <meetOrSlice> : meet (par défaut), slice et none. La première option meet assure une complète visibilité du graphique (autant que possible), alors que slice essaie de remplir le viewport avec la viewBox et découpe (slice off) tout ce qui dépasse. La troisième option none a pour résultat la perte du ratio d’aspect et donc une image potentiellement déformée.

Les formes de base

Rectangle

dessinés à partir de leur coin supérieur gauche.
noirs par défaut si aucun remplissage (fill) n’est indiqué.
“auto-fermant”
positionnés au dessus des éléments qui les précèdent s’il y a chevauchement.

width

stroke-w.

height

<svg viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg">
  <rect x="100" y="100"
        width="200" height="200"
        stroke="red" stroke-width="0"
        rx="0" ry="0"/>
</svg>

Les formes de base

Cercles & ellipses

“auto-fermant”
positionné à partir de son centre
La position du centre du cercle est mesurée à partir du coin supérieur gauche de l’élément SVG
Le rayon (r) du cercle est, par défaut, mesuré dans la même unité que le reste

<svg viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg">
  <circle cx="200" cy="200" r="150" />
  <ellipse cx="200" cy="200" rx="50" ry="50" />
</svg>

Les formes de base

Les polygones

les sommets sont définis comme des paires de coordonnées x et y, séparées par des virgules.
x et y ont leur origine dans le coin supérieur gauche du viewBox
“auto-fermant”

<svg viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg">
  <polygon points="50 12.5, 6.7 87.5, 93.3 87.5"/>
</svg>

Les formes de base

Lignes simples et multiples

<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
  <line x1="50" y1="100" x2="350 y2="100"
        stroke-linecap="butt"
        stroke-width="20" />
 
  <polyline points="50 200, 350 200, 50 250, 350 250, 50 300, 350 300"
            stroke-linecap="butt" stroke-linejoin="miter"
            stroke-width="20"
            fill="none" />
</svg>

Les formes complexes

L'élément path

<path d="M213.1, 6.7 c -32.4 -14.4 -73.7, 0 -88.1, 30.6 C 110.6, 4.9, 67.5 -9.5, 36.9, 6.7 C 2.8, 22.9 -13.4, 62.4, 13.5, 110.9 C 33.3, 145.1, 67.5, 170.3, 125, 217 c 59.3 -46.7, 93.5 -71.9, 111.5 -106.1 C 263.4, 64.2, 247.2, 22.9, 213.1, 6.7 z"/>

En mettant de l'ordre, on y voit plus clair !

<path d="M213.1, 6.7 
         c -32.4 -14.4 -73.7, 0 -88.1, 30.6 
         C 110.6, 4.9, 67.5 -9.5, 36.9, 6.7 
         C 2.8, 22.9 -13.4, 62.4, 13.5, 110.9 
         C 33.3, 145.1, 67.5, 170.3, 125, 217 
         c 59.3 -46.7, 93.5 -71.9, 111.5 -106.1 
         C 263.4, 64.2, 247.2, 22.9, 213.1, 6.7 z"/>

Les formes complexes

Commandes de lignes droites

Nom	Commande	Valeur(s)	Définition
Moveto	M (m)^*	x, y	Aller vers les coordonnées absolues (relatives) x,y
Lineto	L (l)^*	x, y	Tracer une ligne droite vers le point de coordonnées absolues (relatives) x,y
Horizontal	H (h)^*	x	Tracer une ligne horizontale vers la coordonnée x exacte (relative)
Vertical	V (v)^*	y	Tracer une ligne verticale vers la coordonnée y exacte (relative)
ClosePath	Z (z)^*		Tracer une ligne droite pour revenir au début du chemin

^* En minuscule le déplacement est relatif, et non absolu.

Les formes complexes

Commandes de lignes droites

<svg viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg">
  <path d="M40 20 h20 v20 h20 v20 h-20 v20 h-20 v-20 h-20 v-20 h20 z" />
</svg>

Les formes complexes

Commandes de lignes courbes

Nom	Commande	Valeur(s)	Définition
Curveto	C (c)^*	x1 y1 x2 y2 x y	Dessine une courbe de Bezier à partir de deux points de contrôle et se termine à des coordonnées spécifiées
Smooth curveto	S (s)^*	x2 y2 x y	Une commande C dans laquelle le premier point de contrôle de Bezier est le même que le dernier point de contrôle utilisé dans la commande qui précède
Quadratic Bézier curveto	Q (q)^*	x1 y1 x y	Dessine une courbe de Bézier à partir d'un unique point de contrôle et se termine à des coordonnées spécifiées
Smooth quadratic Bézier curveto	T (t)^*	x y	Une commande Q dans laquelle le premier point de contrôle de Bezier est le même que le dernier point de contrôle utilisé dans la commande qui précède
Elliptical arc	A (a)^*	rX, rY, rotation, arc, sweep, eX, eY	Dessine un arc basé sur la courbe d'un ovale. Définit d'abord la largeur et la hauteur de l'ovale. Puis la rotation de l'ovale. Avec le point final, cela fait deux ovales possibles. L'arc et la courbe ont pour valeur 0 ou 1 et déterminent quel ovale et quel chemin sera pris.

^* En minuscule le déplacement est relatif, et non absolu.

Les formes complexes

Commande Curveto

La “courbe de Bézier cubique” est la plus couramment utilisée dans les logiciels de graphisme.

<svg viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg">
  <path d="M 50 250
           C 50 100 350 100 350 250" />
</svg>

Les formes complexes

Commande Smooth curveto

<svg viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg">
  <path d="M 50 200
           C 50 50 200 50 200 200
           S 350 350 350 200" />
</svg>

Les formes complexes

Commande Quadratic Bézier curveto

<svg viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg">
  <path d="M 50 250
           Q 200 100 350 250" />
</svg>

Les formes complexes

Commande Smooth Quadratic Bézier curveto

<svg viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg">
  <path d="M 50 200
           Q 50 50 200 200
           T 350 200" />
</svg>

Les formes complexes

Path : arcs

<svg viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg">
  <path d=""/>
</svg>

Les groupes

les éléments g permettent à leurs éléments descendants d’hériter de leurs styles
Ils peuvent être déplacés vers une nouvelle position, via transform, mais du fait qu’ils n’ont pas d’attributs x ou y, ils ne peuvent être positionnés dans le document SVG.
Ils peuvent avoir un attribut id ou class
Ils peuvent avoir leurs propres éléments title (titre) et desc (description) imbriqués pour ajouter des informations supplémentaires et améliorer l’accessibilité.

<svg>
  <g fill="#CCC" stroke="black" stroke-width="10" transform="translate(0 0)" />
    <rect x="60" y="60" width="100" height="100" />
    <circle cx="290" cy="110" r="50" />
    <rect x="240" y="240" width="100" height="100" />
    <circle cx="110" cy="290" r="50" />
  </g>
</svg>

Animer une ligne

<svg viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg">
  <path stroke="#000" stroke-width="4" fill="none" d="…"
        stroke-dasharray=""
        stroke-dashoffset="0.00" />
</svg>

Un mini illustrator en javascript !

Travail réalisé par Anthony DUGOIS

Codepen Anthony DUGOIS

§ 3

Intégrer et manipuler le SVG

Les possibilités d'implémentation

Technique d'implémentation	Animation CSS	Interaction CSS
`<img src="image.svg" alt="…"/>`	Oui (avec`<svg>`)	Non
`#myelement { background-image: url(image.svg); }`	Oui (avec`<svg>`)	Non
`<object type="image/svg+xml" data="image.svg">…</object>`	Oui (avec`<svg>`)	Oui (avec`<svg>`)
`<embed type="image/svg+xml" src="image.svg" />`	Oui (avec`<svg>`)	Oui (avec`<svg>`)
`<iframe src="image.svg">…</iframe>`	Oui (avec`<svg>`)	Oui (avec`<svg>`)
`<svg><!-- svg content --></svg>`	Oui	Oui

Les propriétés de style

SVG	Équivalent CSS
`fill`	`background-color` ou `color` (selon le contexte)
`fill-opacity`	`background-color` ou `color` avec rgba/hsla (selon le contexte)
`opacity`	`opacity`
`stroke`	`border-color`
`stroke-width`	`border-thickness`
`stroke-opacity`	`border-color` avec rgba
`rx, ry`	`border-radius`

Attributs de mise en forme

Styles en ligne

Styles embarqués
(dans le svg)

Styles embarqués
(hors du svg)

Styles externes

icon.svg

— Tracés vectoriels —

styles.css

svg { width: 400px; height: 400px; }
polygon {
  fill: none; stroke: #000;
  stroke-width: 3px; stroke-linejoin: round;
}

— Aspect graphique —

§ 4

SVG en mouvement

Animation CSS

Transition VS Animation

Transition	Animation
Doit être déclenchée (survol, focus, javascript…)	N'a pas besoin d'être déclenchée pour démarrer
Ne peut pas tourner en boucle	Peut tourner en boucle
Ne propose qu'une transformation d'un état à un autre	Peut contenir plusieurs images clés avec des valeurs spécifiques pour chacune d'elles
Facile à manipuler avec Javascript	Difficile à manipuler avec Javascript

Animation CSS

Transition VS Animation

Animation CSS

Animation & keyframes

La règle @keyframes permet de créer les images clés qui définissent la séquence d'une animation CSS.

#ballcss {
  animation: 0.6s cubic-bezier(0.8, 0.01, 0.8, 0.6)
             infinite alternate bounce;
}
@keyframes bounce {
  from { transform: translate(0, 0); }
  to   { transform: translate(0, 70px); }
}

Animation CSS

Animation & keyframes

Durée de l'animation

.helice {
  animation: rotate360 8s linear infinite;
  transform-origin: 108px 92px;
}
@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Animation CSS

Transition au survol

.light-circle, .bulb-light > * {
  transition: all .5s ease-in-out;
}
.bulb:hover {
  .light-circle {
    fill: #fff682;
  }
  .bulb-light > * {
    stroke: #ffbb00;
    stroke-width: 32;
  ]
}

Animation CSS

Animation avec dashoffset

Animation CSS

Morphing avec d: path()

La propriété CSS d définit un chemin à dessiner par l'élément SVG <path>. Si elle est présente, elle remplace l'attribut d de l'élément.

Attention, cette propriété ne fonctionne pas sur Safari !

svg

style.css

svg path {
  transition: 0.5s ease;
}
svg:hover path {
  d: path('M140,250 L180,100 L220,250 L110,140
           L260,180 L110,220 L220,110 L180,260
           L140,110 L250,220 L100,180 L250,140 Z');
}

Animation CSS

Animer le long d'un chemin

La propriété offset-path définit le tracé d'un mouvement sur lequel un élément est positionné, relativement au conteneur parent ou au système de coordonnées SVG.

Attention, ne fonctionne pas toujours correctement sur Safari. Dans ce cas privilégiez l'utilisation de SMIL avec animateMotion et mpath

#bee {
  offset-path: path("M35,269.45c31.64,72.17,134.62,69.45,189.5,30.41,51-36.28,80-88.56,58-123.78-21-33.54-63.73-37.76-95.16-15.4-39.29,27.95-49.91,84.59-23.71,126.52,32.74,52.41,99.1,66.57,148.21,31.63,61.39-43.67,78-132.18,37.05-197.68C297.73,39.27,194.35,17.63,117.31,71.73,36.84,128.24,6,203.29,35,269.45Z");
  offset-rotate: auto;
  animation: flyPath var(--bee-speed, 5s) linear infinite;
}
@keyframes flyPath {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

Animation SVG (SMIL)

SMIL, la spécification d'animation native de SVG, comporte de nombreuses fonctionnalités pour un rendu d'animation SVG performant mais son utilisation est assez rare.

MDN Web Docs

SMIL

Synchronized Multimedia Integration Language

SMIL

Les éléments d’animation

Éléments d’animation	Définition
`<animate/>`	Permet d’animer des attributs et propriétés sur une période de temps donnée.
`<animateTransform/>`	permet d’animer l’un des attributs de transformation SVG dans le temps, comme l’attribut `<transform/>`
`<animateMotion/>`	Déplace un élément le long d’un chemin.
`<mpath/>`	utilisé en conjonction avec l’élément `<animateMotion>` pour référencer un chemin et indiquer qu’il servira de... chemin à une animation.L’élément `<mpath>` est inclu à l’intéreur de l’élément `<animateMotion>` avant la balise fermante

SMIL

Exemple d'animation avec SMIL

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="10">
     <animate attributeName="cy"
              from="15" to="85"
              dur="1s"
              repeatCount="indefinite"
              begin="0"
              calcMode="spline"
              values="15; 85; 15"
              keyTimes="0; 0.5; 1"
              keySplines=".8 0 1 1; 0 .8 1 1"/>
   </circle>
</svg>

Animation Javascript

MDN Web Docs

Web Animation API (WAAPI)

Support navigateurs de WAAPI

WAAPI

Element.animate()

MDN Web Docs

script.js

const player = document.getElementById('balljs').animate([
  { transform: 'translate(0, 0)', offset: 0 },
  { transform: 'translate(0, 70px)', offset: 1 },
], {
  duration: 700,
  easing: 'cubic-bezier(0.8, 0.01, 0.8, 0.6)',
  iterations: Infinity,
  direction: 'alternate',
});

WAAPI

Utiliser une boucle pour animer plusieurs éléments

script.js

let balls = document.querySelectorAll('.balljs');
balls = Array.prototype.slice.call(balls);
 
const timings = {
  easing: 'cubic-bezier(0.8, 0.01, 0.8, 0.6)',
  iterations: Infinity,
  direction: 'alternate',
  fill: 'both'
}
 
balls.forEach(function(el, i) {
  timings.delay = i * 98;
  timings.duration = 600;
  el.animate([
    {transfor: 'translateY(0)', offset: 0},
    {transform: 'translateY(76px)', offset: 1},
  ], timings);
});

WAAPI

WAAPI Particles

Louis Hoebregts

Librairie GSAP

GSAP

GSAP (GreenSock Animation Platform) est une bibliothèque JavaScript ultra-performante dédiée à l’animation d’éléments HTML, SVG, canvas, etc.

Très utilisée en motion design web, elle est compatible avec tous les navigateurs modernes.

GSAP

Librairie GSAP

Basic Tween

Tween est une animation de transition entre deux états (valeurs de propriétés) d’un élément.

Il définit quoi animer, comment, pendant combien de temps, avec éventuellement un easing ou un délai.

Tween

Librairie GSAP

Méthodes de contrôle

Librairie GSAP

Timeline

La timeline dans GSAP permet de chaîner plusieurs animations dans un ordre précis, comme une séquence.

Elle offre un contrôle global (pause, reprise, répétition) et facilite la synchronisation d'effets complexes.

Timeline

Librairie GSAP

Ipanema Pattern

Tom MILLER

Librairie GSAP

Typography animation

Louis Hoebregts

Librairie GSAP

SVG Debit Card Animation

Tom MILLER

Librairie GSAP

Interactive Eggs-ercise

Chris GANNON

Librairie Anime.js

Anime.JS

Anime.js est une bibliothèque JavaScript légère qui permet d’animer facilement des éléments DOM, SVG, CSS ou des objets JS avec une syntaxe claire et intuitive.

Moins puissante que GSAP pour les animations complexes ou interactives, elle reste idéale pour des effets rapides, fluides et simples à mettre en œuvre.

Anime.js

Anime JS

Librairie Anime.js

Layered animations

Julian GARNIER

Librairie Anime.js

Easings visualizer

Julian GARNIER

Librairie Anime.js

Modern retro - IBM THINK

Mikael AINALEM

LottieFiles

Lottie est un format d’animation JSON léger, lisible sur toutes les plateformes et redimensionnable sans perte de qualité. LottieFiles facilite la création, l’édition et la diffusion de ces animations.

lottiefiles.com

Animation SVG d'interface

Voici quelques exemples d'interfaces web qui intègrent de nombreuses animations SVG.

Local Guides

Animation SVG d'interface

Waaark

Animation SVG d'interface

Nod Coding

Animation SVG d'interface

Sui Overflow 2025

§ 5

Masques

Définition

Le découpage est une opération graphique qui permet de masquer totalement ou partiellement les parties d'un élément. L'élément découpé peut être n'importe quel conteneur ou élément graphique. Les parties de l'élément affichées ou masquées sont déterminées par un chemin de détourage.

Support navigateurs

Principe

page.html

style.css

.clippingImg { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }

Formes de bases

Polygone : polygon(x y, x y, ...)

.clipPoly { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }

Cercle : circle(rayon at x y)

.clipCircle { clip-path: circle(50% at 50% 50%); }

Ellipse : ellipse(rayon-x rayon-y at x y)

.clipEllipse { clip-path: ellipse(25% 40% at 50% 50%); }

Inset : inset(haut droit bas gauche round rayon-haut rayon-droit rayon-bas rayon-gauche)

.clipInset { clip-path: inset(25% 0 25% 0 round 0 25% 0 25%); }

Créer des formes

.clipBd { clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); }

.clipEtoile { clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 37% 38%); }

Clip-path maker

bennettfeely.com/clippy/

Clip-path avec SVG

À propos de clipPathUnits

définit le système de coordonnées utilisé pour le contenu de l'élément. Deux valeurs possibles :

userSpaceOnUse : toutes les coordonnées font référence au système de coordonnées utilisateur tel que défini lors de la création du tracé de détourage.
objectBoundingBox : toutes les coordonnées sont relatives au cadre de délimitation de l'élément auquel le tracé de détourage est appliqué. La largeur et la hauteur de la zone de délimitation de l'objet sont considérées comme ayant une longueur d'une valeur unitaire. Il faut donc que ces coordonnées sur situent entre 0 et 1.

Convertir les valeurs absolues d'un clip-path en relatives

styles.css

.clipPath { clip-path: url(#svgPath); }

page.html

Clip-path avec texte + SVG

styles.css

.clipPathText { clip-path: url(#svgTextPath); }

page.html

Clip-path + SVG + animation

styles.css

.clipPathAnim { clip-path: url(#svgPathAnim); }

page.html

SVG & Animation

Du pixel au vecteur

Matrice vs vecteur

Les éléments de bases

Les courbes de Bézier

Les types de point d'ancrage

Les champs d'application

SVG : syntaxe et structure

SVG

Scallable Vector Graphics

Pourquoi utiliser SVG ?

Structure de base SVG

Viewport, viewBox & preserveAspectRatio

Les formes de base

Rectangle

Les formes de base

Cercles & ellipses

Les formes de base

Les polygones

Les formes de base

Lignes simples et multiples

Les formes complexes

L'élément path

Les formes complexes

Commandes de lignes droites

Les formes complexes

Commandes de lignes droites

Les formes complexes

Commandes de lignes courbes

Les formes complexes

Commande Curveto

Les formes complexes

Commande Smooth curveto

Les formes complexes

Commande Quadratic Bézier curveto

Les formes complexes

Commande Smooth Quadratic Bézier curveto

Les formes complexes

Path : arcs

Les groupes

Animer une ligne

Un mini illustrator en javascript !

Intégrer et manipuler le SVG

Les possibilités d'implémentation

Les propriétés de style

Attributs de mise en forme

Styles en ligne

Styles embarqués (dans le svg)

Styles embarqués (hors du svg)

Styles externes

— Tracés vectoriels —

— Aspect graphique —

SVG en mouvement

Animation CSS

Transition VS Animation

Animation CSS

Transition VS Animation

Animation CSS

Animation & keyframes

Animation CSS

Animation & keyframes

Animation CSS

Transition au survol

Animation CSS

Animation avec dashoffset

Animation CSS

Morphing avec d: path()

Animation CSS

Animer le long d'un chemin

Animation SVG (SMIL)

SMIL

SMIL

Les éléments d’animation

SMIL

Exemple d'animation avec SMIL

Animation Javascript

Web Animation API (WAAPI)

Support navigateurs de WAAPI

WAAPI

Element.animate()

Styles embarqués
(dans le svg)

Styles embarqués
(hors du svg)