Tuesday, April 29, 2008

SVG Resurgent

I've been very pleased to see increasingly high-quality Scalable Vector Graphics (SVG) support built into browsers like Safari and Firefox in the last year or so. (And the recent Acid 3 browser test seems to have been coincident with a significant further quality increase.) I did some work with SVG when version 1.0 of the specification debuted in 2001, and found it useful and full of promise, so I was subsequently very disappointed to watch it become almost completely unsupported. My gratitude to the folks who've worked to incorporate it directly into Safari and Firefox (and any other browsers). SVG looks like it has a future again.

In accordance with that view, I've been working with SVG again lately; pounding the rust off of some of my old SVG-related code, and indulging my interest in clocks. The item below is this evening's experiment in using Javascript with SVG, something that I hadn't tried before. Current versions of Safari and Firefox handle the combination beautifully. What's more, both Safari 3.1.1 and Firefox 2.0.0.12 even handle it as an embedded, in-line object in HTML, as this post demonstrates. It may be old news to you, gentle reader, but it was a surprise to me.

Ideally, you'll see an active analog clock here, rendered using SVG, and animated using Javascript. It works in Safari and Firefox, anyway.

Anyone wondering about the significance of the terms "scalable" and "vector" in SVG's name need only open the clock in a separate browser window, and play with resizing that window. Resolution independence is a wonderful thing.

2 comments:

  1. Anonymous7:08 AM CDT

    I'm not that much of a computer literate chap, but I find it amazing that running IE there is no indication of the clock, not even broken letters or the famous "X', yet when running Firefox, there it is!!
    Maybe I need to make FF my default browser. Thanks for the article.

    ReplyDelete
  2. That clock is really great stuff. Everyone that is doing serious graphics ( I don't mean paintings or photos) should look into SVG. With the help of batik and fop it is so easy to convert it onto virtually every other format (ok, only a handful of them), so that even for print the hight quality remains.

    ReplyDelete