SVG: Embedding Javascript

svg-js.svg

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
  viewBox="0 0 400 400"
  style="background-color: #000;"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
>
  <circle id="circle1" cx="200" cy="200" r="100" fill="#f00" />

  <!-- you must wrap scripts in CDATA tags as SVG should be valid XML -->
  <script type="text/javascript"><![CDATA[
    // get reference to circle
    var circle = document.documentElement.getElementById('circle1');
    var cx = 200;

    function doAnimationFrame() {
      cx += 1;
      circle.setAttribute('cx', cx);

      if (cx > 400) {
        cx = 0;
      }

      // continue animation
      window.requestAnimationFrame(doAnimationFrame);
    }

    // start animation
    window.requestAnimationFrame(doAnimationFrame);
  ]]></script>
</svg>