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.

Enjoyed this post? Why not sign up to receive Status-Q in your inbox?

1 Comment

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:
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.

Got Something To Say:

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax


© Copyright Quentin Stafford-Fraser