+## Principe
+
+Le principe est simple : on dispose d'un ensemble d'images au format
+SVG qui constituent, par une suite chronologique, une animation à
+visionner. La libraire `SVGAnimation` permet de visionner cette
+animation dans une page HTML grâce à JavaScript.
+
+### La famille d'images
+
+Les différentes images composant l'animation doivent se nommer avec un
+*prefixe* puis d'un nombre (indice), celui-ci pouvant être
+formater de différente façons :
+
+ monfichier-1.svg monfichier-2.svg monfichier-3.svg ...
+
+ou, autre exemple :
+
+ monfichier-001.svg monfichier-002.svg monfichier-003.svg ...
+
+Nous verrons comment gérer le formatage de l'indice des images dans
+les sections suivantes.
+
+<div class="alert alert-info">
+<p>L'idée d'une telle librairie est venue du fait que le logiciel
+MetaPost permet de produire des images SVG, et nous l'utilisons
+abondamment pour la production d'animations.</p>
+</div>
+
+
+## L'utilisation
+
+### Côté HTML
+
+La librairie `SVGAnimation` définit le *prototype* javascript
+`Animation`. Pour l'utiliser il faut déclarer une balise HTML `div`
+avec un identifiant (`id`) unique. Choisissons pour l'exemple `XXXX`.
+À l'intérieur de ces balises, il
+faut :
+* une balise `img` contenant un image `svg` qui servira de vignette à
+ l'animation;
+* une balise `div` avec l'identifiant `id="XXXX_message"` où `XXXX` est
+ l'identifiant de la balise englobante. Dans cette balise *message*,
+ on y met, si on le souhaite, un message à afficher avant le
+ chargement de l'animation.
+* une balise `div` avec l'identifiant `id="XXXX_boutons"`
+
+
+En supposant que les images SVG se trouvent dans un répertoire nommé
+`svg`, voici un exemple d'une telle structure :
+
+~~~~~~~ { .html }
+<div id="anim1">
+ <img src="svg/ellipsographe-1.svg" alt="animation1"/>
+ <div class="message" id="anim1_message">Chargement</div>
+ <div id="anim1_boutons"></div>
+</div>
+~~~~~~~
+
+### Côté JavaScript
+
+Une fois qu'on a la structure HTML présentée ci-dessus, il est
+nécessaire d'ajouter un peu de code JavaScript permettre à l'animation
+de se jouer.
+
+#### Construire l'objet `Animation`
+
+Le *constructeur* du prototype JavaScript s'utilise, pour l'exemple
+donné à la section précédente, de la façon
+suivante :
+
+~~~~~~~ { .javascript }
+var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
+anim.loopOnload();
+~~~~~~~
+
+`XXXX` est l'identifiant de la balise `div` HTML *englobante*,
+`svg/ellipsographe-` est le préfixe dont on a parlé plus haut, `1` est
+l'indice de la première image à animer, et `91` l'indice de la
+dernière.
+
+`anim.loopOnload()` permet le chargement de l'animation.