I have lately been interested in vector graphics in general and SVG in particular. My hope is that it would potentially allow us to do web design in a far saner way than using about 6 images for each box that requires rounded corners and some gradients. The result would also be nicely scalable to different resolutions and probably take far less bandwidth to serve since the aforementioned box would probably just be represented by a couple of hundred bytes of XML in the SVG file and this can be packed to take even less space. As an added bonus you can also get reasonable diffs from the revision control for your SVGs.

Anyway here’s a simple SVG analog clock widget, a kind of Hello world if you will.
The idea was to write a clock widget that can be easily redesigned by non-programmers with a WYSIWYG SVG editor like Inkscape.

Here are a couple of examples that should be visible in all the reasonable browsers (ie. not IE) that have been released since 2002 or so:

Basically you can take either of these files and clock.js from the same directory and edit the SVG file in Inkscape and it should still work.
There are couple of things you have to keep in mind while editing though:

• There should be clock hands with the ID’s second_hand,minute_hand and hour_hand
• There should be a circle with the ID clockface which is used to determine the center of rotation.
• The IDs of objects can be changed from the Object properties dialog
• You should probably use the align tool to place the clock hands vertically to the center of the clockface element, otherwise the clock will act funny
• The clockface doesn’t have to be visible, the code only needs it to know the center of rotation. So you can make it invisible if you want to create non-circular clockfaces

This kind of simple things can actually be done without any ECMAScript whatsoever using only SVG SMIL animation. I haven’t really investigated SMIL yet though.