Here at Web Directions we have a little confession to make. We love SVG.

But there's just been one tiny problem with SVG to date. Internet Explorer didn't come to the party.

Well, this year with that's changed - Internet Explorer 9 supports SVG - and you can play with it in their preview releases.

Which got us to thinking - how could we help encourage more developers to finally take a look at SVG? So we pitched the idea of a fun SVG competition to the excellent folks at Microsoft in the UK, to see whether they might be interested in providing some cool prizes (no, not copies of office).

And lo and behold they actually agreed - we'll have to do this sort of thing more often!

Read on for what you have to do

All you need to do is build a progress control in SVG. But, feel free to experiment - it doesn't have to be a standard progress bar.

For those looking for a slightly gentler introduction to SVG, ther's also a prize for the best button using SVG.

What your progress control should do is indicate to the user:

  1. when they are waiting in an indeterminate state
  2. how much a process has progressed

If you're building a button, then think about the pressed as well as normal state.

We'd also like to create a showcase of entries, so others can reuse and learn from them. So one of the conditions is that you give others permission to look at and adapt your code, while giving you credit of course, under an MIT license.

Update - the deadline for the competition has been extended to June 18th

So, from now, until June 18 at midnight anyone from anywhere in the world can enter.

What are the criteria?

  1. Your button or progress control has to work acceptably in the latest versions of Opera, Safari, Chrome, Firefox, and Intenet Explorer 9, so it would probably make sense to at least give it a look see in all these browsers.
  2. Your SVG should validate.
  3. The judges will also pay attention to accessibility factors - hint - investigate the ARIA role attribute.
  4. And, they'll take a quick peek under the covers at your code, so the cleaner and more legible that is, the better
  5. They'll also consider how well the control communicates the two states decribed above, how attractive it is, and if it has that x-factor, then all the better.

Above all, the contest is supposed to be fun, and encourage you to "try something new". So have fun!

Who's judging?

We've lined up an all star judging panel for this competition, including

  • The W3C's own "Mr. SVG", Doug Schepers
  • SVG and JavaScript guru Dmitry Baranovskiy, developer of the amazing Raphael library
  • One of the several Marks from Microsoft UK developer relations (seriously, you pretty much have to be called Mark or be willing to change your name to Mark to work in dev relations at Microsoft UK. It's a surprise Marky Mark doesn't work there.)
  • John Allsopp from Web Directions (ok so it's not an all star panel, but 3 out of 4 aint bad).

So what prizes are there?

Want to know what you are playing for?

Lots of great stuff all thanks to Microsoft.

  • Grand Prize is a Sony Vaio Notebook, with a wireless mouse and keyboard, and external monitor, coupled with Microsoft Expression Studio (including a free upgrade to version 4.0)
  • Most creative entry will receive an XBox 360, including some of the latest games, accessories and a year's subscription to XBox Live
  • The most accessible entry will receive an amazing LEGO Mindstorms NXT 2.0
  • We also have copies of Expression Studio, and some great LEGO and Meccano sets to give away as random prizes for entrants.

Enter now

Enter below by midnight Friday June 18.

Register your masterpiece

New to SVG? It's really not hard, and here's some great resources to get you started