Struktura SVG animace (DOM + JavaScript)

<svg xmlns="&ns_svg;" 
     xmlns:xlink="&ns_xlink;" 
     xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     width="320" height="200" 
     shape-rendering="optimizeSpeed"
     onload="testAdobe();fade()">
 <title>A16.3 - Fyzika - fáze 3</title>
 <desc>
   Realistické řízení rychlosti a zrychlení pomocí JavaScriptu vč. postupného zmenšování amplitudy kmitů.
 </desc>

 <script type="text/ecmascript">
 <![CDATA[
 function testAdobe() {
  //created by Martin Hejral, 2003
  //test if Adobe SVG Viewer 3 (ASV3) or greater is present -- only ASV3+ return "Adobe SVG Viewer"
  //alert(navigator.appName+navigator.appVersion);
  if(window.navigator)
   if( (navigator.appName=="Adobe SVG Viewer") && (navigator.appVersion>="3.0") )
  return true;
  alert("PROSIM, nainstalujte novou verzi Adobe SVG Prohlizece!!! PLEASE, install latest version of the Adobe SVG Viewer!!!");
  return false;
 }

 //global variables
 var amp=50, scale=0.34, time=0, to=-1;

 //perform fading animation 
 function fade() {
  //get pointer to animated objects
  var obj1 = document.getElementById('sphere1');
  var obj2 = document.getElementById('spring1');
  var s = y = Math.cos(time/1000);
  //window.status="time = "+time/1000+" s";

  //multiply COS t with amplitude
  y *= amp;

  //shift sphere to base position
  y -= 50;

  //scale spring
  s *= scale;

  //set base position
  s += 0.34 + 0.32;
  time += 50;

  //amplitude and scale decay
  amp = amp*999/1000;
  scale = scale*999/1000;

  //modify SVG graphics
  obj1.setAttribute( "transform", "translate(0,"+y+")" );
  obj2.setAttribute( "transform", "scale(1,"+s+")" );

  //start timer
  to = window.setTimeout("fade()", 50);
 }
 ]]>
 </script>
 <defs>
 <symbol id="spring">
  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M16.3,3v9.9l9.1,2.4L7.1,20.2"/>
  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,20.2l18.3,4.9L7.1,30"/>
  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,30l18.3,4.9L7.1,39.8"/>
  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,39.8l18.3,4.9L7.1,49.5"/>

  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,49.5l18.3,4.9L7.1,59.3"/>
  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,59.3l18.3,4.9L7.1,69.1"/>
  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,69.1L25.4,74L7.1,78.9"/>
  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,78.9l18.3,4.9L7.1,88.7"/>
  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,88.7l18.3,4.9L7.1,98.5"/>
  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,98.5l18.3,4.9l-18.3,4.9"/>
  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,108.3l18.3,4.9L7.1,118"/>
  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,118l18.3,4.9l-18.3,4.9"/>
  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,127.8l18.3,4.9l-18.3,4.9"/>

  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,137.6l18.3,4.9l-9.1,2.4v16"/>
 </symbol>
 <symbol id="sphere">
   <radialGradient id="XMLID_1_" cx="10.75" cy="162.811" r="23.0054" fx="10.75" fy="162.811" gradientUnits="userSpaceOnUse">
   <stop  offset="0" style="stop-color:#FFFFFF"/>
   <stop  offset="1" style="stop-color:#000000"/>
   <a:midPointStop  offset="0" style="stop-color:#FFFFFF"/>
   <a:midPointStop  offset="0.5" style="stop-color:#FFFFFF"/>
   <a:midPointStop  offset="1" style="stop-color:#000000"/>

  </radialGradient>
  <path fill="url(#XMLID_1_)" d="M32.5,168.6c0,9-7.3,16.3-16.3,16.3S0,177.5,0,168.6s7.3-16.3,16.3-16.3S32.5,159.6,32.5,168.6z"/>
 </symbol>
 <symbol id="fix_point">
  <path fill="none" stroke="#000000" stroke-width="6" d="M8.3,3h16"/>
 </symbol>
 </defs>
  <!-- symboly vlozime do obrazu -->
 <use id="spring1" x="50" xlink:href="#spring">

 </use>
 <use id="sphere1" x="50" xlink:href="#sphere">
 </use>
 <use x="50" xlink:href="#fix_point">
 </use>
 <!-- obrys platna -->
 <rect x="0" y="0" width="319" height="199" 
        fill="none" stroke="blue" />
</svg>