Animating

All (almost.. all) elements in SVG can be animated using javascript.
An example is shown below. The javascript is payload in the CDATA section. The square registers a listener: onclick. The corresponding handler can be found in the CDATA section.
When click the square will invoke the randomcolor function and the color attribute will be randomized. Code:

  <svg xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" >
  <script type="text/ecmascript">
  <![CDATA[
    function randomcolor(evt) {
      var red = Math.round(Math.random() * 255);
      var green = Math.round(Math.random() * 255);
      var blue = Math.round(Math.random() * 255);
      evt.target.setAttributeNS(null,"fill","rgb("+ red +","+ green+","+blue+")");
    }
  ]]>
  </script>
  <g id="g1">
    <rect id="square" width="80" height="80" x="40" y="20" 
     fill="blue" onclick="randomcolor(evt)"/>
  </g>
  <text x="40" y="120">Click on square to change it's color.</text>
</svg>
        
It will show up like:

alt : It seems your browser does not support SVG. Consider using Google Chrome or another SVG enabled browser

© Jan van der Meiden 2015