Graphics/CSS SVG

Experiments: SVG Clock

I thought I would go into some detail on some of the experiments I’ve been trying out on the site, starting with the SVG clock in the sidebar.

A major advantage of SVG is that you can actually see how something is created. Try that with a Flash file.

The SVG clock in the sidebar is an adaption of a very simple SVG clock created by Jason Davis. I modified it by creating specific second tick actions, and then altering the appearance. I also added code so that it would reflect my time, not yours. I figured you had your computer clock and didn’t need me repeating it.

The clock is LGPL so you can copy the SVG file directly into your own space, set the width of the container, and even alter the coloring if you wish. I’m using linear gradients to create a clock highlight, interior shadow, and silvery frame. I also added a Gaussian blur as shadow, but this only shows up in Firefox 3, Opera, and Safari.

The function to change to your time zone is:

setInterval("setClock(calcTime(-6))", 1000);

The value to change is “-6”, which states that my timezone is currently 6 hours behind GMT.

It’s just a frill, true, but after seeing some of the crap I’ve seen in sidebars, you could do worse. It takes up less CPU than most animated ads, and requires no external load times. From a browser performance perspective, Safari requires less CPU to run the clock than Firefox or Opera. If you load the clock directly, it will be quite large, but will also eat up considerable CPU. Leave it up for a while and I guarantee your computer’s fan will come on.

Is the clock worth the extra burden on the client’s machine? Yes, and no. As a demonstration of what you can do with SVG and simple animation, I think it’s a valuable tool. There is a Catch 22 about SVG: we don’t use SVG because browser support is incomplete or inefficient; effort to better incorporate SVG is of secondary importance because SVG is little used. The only way to break this cycle is to actually start using the specification, and pushing a bit at the edges while we go about it.

As for the contents of the clock, how much do your web page readers really care about what time is it where you’re at? I would have thought probably not a whole lot, but I find that I’m not particularly good at understanding what particular bits of minutia interest people. I’m told people want to know you bought chewing gum–the brand, the flavor, the date and time when purchased. What time it is where you live must seem monstrously important in comparison.

Print Friendly, PDF & Email