SVG and JavaScript: What Is Possible, What To Consider?

SVG has been around for quite some time now, waiting. Waiting for proper browser support. The wait is now over as all modern browsers support the format today. With Flash being on the decline, SVG has grown even more popular. Just like the proprietary Flash format, SVG is vector-based and can even contain animations. You need not even miss out on scripting, as SVG supports JavaScript right inside its own format. Think of an open ActionScript, only more commonly known.

Accessing SVG Elements With JavaScript

Using JavaScript inside an SVG generally doesn't differ much from using JavaScript in HTML. As the SVG syntax doesn't know Head and Body JavaScript is simply included anywhere inside the SVG element. Just as you know it from HTML, elements can only be accessed as soon as they already have been loaded. Thus, you'd put the JavaScript either to the end of your SVG or call a function using the event listener load. It is mandatory to execute the JavaScript inside a CDATA section.

<svg>
  <script>
    <![CDATA[
      window.addEventListener("load", function() { … }, false);
    ]]>
  </script>
  <rect x="50" y=50" width="0" height="25" fill="red" />
</svg>

As SVG elements can be equipped with classes and IDs, just like you know it from HTML, we are able to access using the known methods getElementsByTagName(), getElementById() as well as using the newer methods querySelector() and querySelectorAll(). Attributes are read via getAttribute() and defined via setAttribute() – nothing new in here.

window.addEventListener("load", function() {
  document.getElementsByTagName("rect")[0].setAttribute("width", "100");
}, false);

In our example we access the first RECT and set the attribute width with a value of 200. To animate an SVG using JavaScript try using the method requestAnimationFrame(). This method is a specialist for these things and makes sure, that - other than setTimeout() – a function gets executed only in case it is needed to keep the animation running.

window.addEventListener("load", function() {
  var breite = document.getElementsByTagName("rect")[0].getAttribute("width");
  function animation() {
    if (breite < 200) {
      breite++;
      document.getElementsByTagName("rect")[0].setAttribute("width", breite);
      window.requestAnimationFrame(animation);
    }
  }
  window.requestAnimationFrame(animation);
}, false);

In this example we use requestAnimationFrame() to perpetually call the function animation() until the value for width reaches 200. Each function call adds the value 1 which optically ends in animation, where our rectangle grows wider until it reaches 200 pixels. You could use this method to draw a bar chart for data visualization for example. Values for the chart could be pushed to the SVG using GET. Afterwards we read them with JavaScript.

SVG vs. Canvas

Why not use Canvas you might object. You're right. Canvas plus JavaScript allows you to draw shapes and animate them - all without SVG. The problem is that Canvas works pixel-, not vector-based. As soon as the visitors zooms his browser window, the whole thing starts looking 8bit. That's the reason even Google's charts API relies on SVG, not Canvas.

Embedding SVG in HTML

To make sure, your JavaScript inside the SVG does get executed, integrate the SVG into your HTML via Embed or Iframe. If you go for the Img element, you'll see the SVG, but without any animations as the JavaScript will not run. Alternatively you could embed the SVG as pure sourcecode variant, pasting it completely (but without Doctype) into your HTML.

You see. SVG plus JavaScript rocks and has the potential to render Flash redundant. Remember, it needs no plugin and functions on any mobile device.

(dpe)