Ce matin, je me suis levé avec l’idée incongrue de faire des animations web dans lesquelles les cercles seraient déclarés comme ceci:

<circle />

au lieu de cela:

<span class="circle"></span>

et dans lesquelles un carré positionné en [0;0] se coderait ainsi:

<rect x="0" y="0" width="1" height="1" />

au lieu de:

<div class="square" style="position:absolute;top:0;left;0;width=145px;height=145px"></div>

En gros, je me suis demandé s’il me serait possible de faire de l’animation avec du SVG et du Javascript.

Et après au moins 10 minutes de recherche sur le web, j’ai découvert une solution des plus complexes à assimiler : “SVG c’est comme du HTML, on peut utiliser du Javascript dedans. Il suffit d’utiliser la balise <script>

La seule différence est dans le nom de l’attribut à indiquer si l’on souhaite mettre le code javascript dans un fichier externe.

Au lieu de:

<script src="..."></script>

il nous faudra écrire:

<script xlink:href="..."></script>

Comme souvent, il suffisait de lire les spécifications SVG