<?xml version="1.0" encoding="utf-8"?>

<!--

	© Xenos 2013 - jeuweb.org

	Licence LGPL, exemple de démonstration d'animation SVG.

	Lecture, exécution, modification, rediffusion (tel quel / modifié) autorisées, 

	sous condition de conserver le droit moral (aka nom des auteurs originaux).

-->

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

	<path id="test" d="M 150 50 q 40 25 0 50" stroke="blue" stroke-width="2" fill="none"/>

	<path id="test2" d="M 150 150 a 50 50 0 0 1 0 100 a 50 50 0 0 1 0 -100" stroke="blue" stroke-width="2" fill="none"/>

	<script type="text/ecmascript"><![CDATA[

		document.getElementById("test").p = 1;

		document.getElementById("test2").p = 1;

		setInterval(function ()

		{

			var o = document.getElementById("test");

			var o2 = document.getElementById("test2");

			o.p *= 1.01;

			o2.p *= 1.01;

			if (o.p > 500)

				o.p = o.p%500+1;

			if (o2.p > 200)

				o2.p = o2.p%200+1;

			var y = square(o2.p/200.)*25.;

			o.setAttribute('d', "M 150 50 q "+(40+o.p)+" 25 0 50");

			o2.setAttribute('d', "M 150 "+(150-y)+" a "+(50+o2.p)+" "+(50-2*y)+" 0 0 1 0 "+(100-2*y)+" a 50 50 0 0 1 0 "+(2*y-100)+"");

		},

		15);

		function square(x) { return(x*x); };

	]]></script>

</svg>

• SVG par W3Schools et le tag path (sommairement expliqué)
  
• SVG basics + arc elliptiques (utilisés dans l'exemple)
  
• SVG par le W3C, exhaustif (puisqu'il s'agit de la norme elle-même)
  
• Lier ECMAScript (javascript) et SVG