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.

This entry was posted in Technology and tagged , . Bookmark the permalink.

12 Responses to Experiments: SVG Clock

  1. Bud Gibson says:

    I kind of like the clock.

    I’ll also add that I find knowing the time in St Louis to be of much more interest than knowing which brand of gum you’re chewing. As to whether either is really important to me is another question.

  2. Ed Davies says:

    Oops, your link to the simple SVG clock has an extra “at ” at the beginning.

    While I’m being picky, what’s the “location of personal URI” supposed to be? Do URIs have locations?

  3. Shelley says:

    Bud, I like the clock, too.

    Ed, thanks for correction. I think that text may have been from the original template and I just didn’t change it. Or I did, following one of the discussions of, “Can people have a URI” or some such thing.

  4. Charles says:

    I see the clock displaying a time 5 hours behind, which is really odd as you and I are in the same time zone and should have our system clocks set the same. I dunno, my Mac Safari 3/SVG setup is acting kinda flakey.

  5. Shelley says:

    Charles that is odd. That would be the script access of clock time, not SVG.

  6. Bud Gibson says:

    Living one hour ahead of you, the clock is right on safari and firefox. Sounds like Charles might have a system clock issue.

  7. Bud Gibson says:

    BTW, you fixed the comment svg on safari as well as the nav bar dimming. I’m liking the safari experience now. Inline comment editing like firefox is the next frontier.

  8. Charles says:

    Hmm.. My MacOS X 10.4/Safari 3 system shows the time correctly. I can’t identify any system clock problems on my 10.5 system where it displays incorrectly. Oh well.

  9. About Safari being faster: I think you’ll get more comparable performance in FF and Opera if you remove the drop shadow. At least for me Safari (3.0.4 on windows) didn’t display any drop shadow, which would account for quite a bit of the seen CPU usage.

  10. James says:

    The clock shows the right time (5:56) for me, but I think it’s only useful on the same continent, since it doesn’t show AM or PM – it’s only because I know you’re in the US that it’s 5:56am.

  11. I was wondering if in fact an “SVG Acid test” would be useful and that could be a clock. An SVG clock using SVG elements much needed but not very well implemented coul help to fix things.

    So we could ask all browsers implementers to fix their clockwork. I would propose Orange for the clock. ;)

  12. Jamie Pitts says:

    Very nice, and thanks for jolting me from my sleepy ignorance of Safari 3′s SVG support!