SVG – scalable vector graphics – is an XML-based standard for storing images based on lines, curves and shapes (as opposed to photo-type pictures, which are arrays of pixels).
It’s been around for some time – I think I first experimented with it in around 1999 – but there were a very limited number of programs able to create or view SVG files. That’s changing, however, and SVG is gaining ground for a variety of reasons:
- An SVG file can include Javascript, which can modify the graphical components to create an animation
- It turns out to be quite a good format for delivery some types of graphics to devices like mobile phones
- Firefox supports it – which means that a very large number of people are now able to see SVG images without installing any extra software
Martin sent me a link to this simple but very pleasing SVG animation by Tavmjong Bah, which you should be able to see if you’re using Firefox or similar browsers.
It assumes you’re on a large display, though, and if not, you might like this version, which I simply scaled down using the free Inkscape application. Note that the animation still runs, that it shows your timezone, and that if you were to scale it back up you’d get the full quality of the original.
RSS feed
An SVG animation can also be done without JavaScript, declaratively with SMIL
JavaScript can also do interactivity, allowing for webapplications and games.
Opera currently is the leading browser for SVG support
If the viewBox is set right, it should show at the right size on any screen
Yes, the irony that I was having to resize something labelled ‘Scalable’ hadn’t escaped me!
This particular file has lots of explicit coordinates and translations in it and no viewBox; I could probably add one by hand but my SVG is a bit rusty, so I just let Inkscape do the hard work 🙂
Cool clock. I wonder how the first two wheels on the right are connected, though.
Our fellow CodingMonkey map did a version of our logo with some animation using SVG here:
http://www.codingmonkeys.de/map/log/articles/2005/11/18/lt-canvas-gt-support
Funnily enough, speed of machines has increased so its quite epileptic now 😉
Erm – sorry. this was using the canvas element. But matter of factly Canvas is supported in Firefox and Safari.