Erik Dahlström
View with Opera!

Tricks of javascript, SVG and SMIL

Declarative (SMIL) vs. script-driven animation

Pros Compact Cons Browser support
Easy to understand and author More limited than script
Doesn't require scripting

Let's see a simple example.

Controlling animations with script

Given an animation element 'a':

Note that these methods return a boolean which will be false if the call failed for some reason.

Using script-generated SMIL elements

Here's an example that inserts and makes use of an animate element:

View example

Taking control over the timeline

View example

Faking a smile

By using the FakeSMILe script authors can keep using SMIL in their svg documents, and still have most of it work properly across browsers. However, it has a few drawbacks:

Dynamically inserting FakeSMILe

Dynamically inserting FakeSMILe


By using discard you can throw away parts of your document without using scripting.


View example

Cross-browser mousewheel events

Cross-browser mousewheel events

Document accessing

Elements where contentDocument can be used: animation, foreignObject, iframe, embed, object.

    function changeBannerText() {
      var a1 = document.getElementById("a1");
      var animDoc = a1.contentDocument;


Most of the SVG 1.1 DOM methods are implemented in Opera, Safari and Firefox. Here's a little known helper, the SVGURIReference interface:

a.href.baseVal = "";

instead of the counterpart:

a.setAttributeNS("", "xlink:href", "");

See example

Dragging and dropping

One excellent resource for freely available svg examples is, and I decided to try out the dragging js library for my example. The dragging library generates custom events for dragging, and sets up the appropriate listeners for any element you add drag:enable="true" on. This makes it very easy to use. However, if you need other scripts to also do things with mouseevents the dragging library code may need to be modified.


World map colorizer

It was a call from Karl Dubost that prompted the creation of the colorpicker, so that a world map could be colorized and associated with custom data. Click here to see the first draft.

The map comes from wikimedia commons, and was originally weighed in at around 1.5Mb. Simple processing trimmed the size down to half, with an acceptable loss of precision. The benefit of being able to export the colorized map in a vector format, directly in the browser, without other external dependencies than the few scripts and the map itself was a goal from the start. Since the map is large it's not something you want to pass back and forth to a server. However, the stylesheets can easily be sent to a server and are of course very compact in comparison to the map as a whole.

World map variations and future enhancements

It's possible to create multiple instances of the colorizer, as can be seen here. The addition of a simple messagebox script allows the country name to be shown when hovering a country, which may come in handy. Click here to see this in action.

Other suggestions for future enhancements:

The license is open and allows anyone to continue working on this.