I came across the MIX 10k Coding Challenge on the weekend, and on a whim I decided to submit one of my old SVG demos to the contest. The 10k challenge's tagline is "What could you create for the Web if you had only 10 kilobytes of code?". The rules didn't explicitly say I could use pure SVG, they mention SVG/Canvas in the context of HTML5 only, but I thought I'd give it a shot. It's in the spirit of the contest, after all. At the very least it would encourage Microsoft to clarify the rules and at the very best it would be accepted and the rules updated to allow pure SVG applications. Looks like it was my lucky day.
I decided to go with my Solitaire demo because it was the most complete, didn't infringe on any copyrights (looking at you Tetris), and most visually recognizable. It's not the most innovative, but then again the point of this is not necessarily to win any prizes. It's really about increasing awareness.
Unfortunately, the SVG (26kb) and JavaScript (16kb + 21kb) totaled 63kb. I did some cleanup of the SVG, minified the JS and then put the script inline with the SVG and then gzipped it. The result was a .svgz file that was 9kb. Perfect!
I then got an email from a friendly marketing/evangelism person at Microsoft who said that the engineers did not know how to open the svgz file to review the code to ensure it was under 10k. Woops! I explained to her that I thought it would be ok for the SVG to be gzipped, much as PNG/GIF files use compression and sent her the uncompressed SVG file for them to review. After all, SVG is just an image format, right? 😉
Was I following the rules? Did Microsoft give me a fair shake? See for yourself. Who knows, maybe this is the first time a Microsoft admin had to figure out how to serve SVG on a Microsoft web server.
Out of curiosity, I later tried to see how far I was able to get down the Solitaire game: 5811 bytes. Not bad for a complete game that has scalable graphics. I'd be curios to see the equivalent SWF file.
I don't expect you to vote for my entry, but what I do expect you to do is now go out and submit .SVGZ entries to the MIX 10k challenge. That one SVG entry is looking pretty lonely. If I can get Solitaire down to 5811 bytes, surely you can do better?
Thanks a lot to Amy, the evangelist/marketing person who really was quite patient with me.
Thanks for submitting! I’m one of the tech guys helping out with the site and it’s really great to see the variety of entries. It’s been pretty amazing to see what people can cram into 10,240 bytes.
We’ve had Silverlight, HTML 5, and SVG. We’re still hoping to get a few Python or Ruby submissions too.
Hopefully I’ll get to see you at Mix this March.
Great idea and an perfect demonstration of SVG’s power.
I remember seeing your version of Solitaire about a year or two ago which is pretty cool. You could squeeze out maybe a few dozen if not a hundred or two bytes by using HTML entities (I would imagine) though I’m only giving it a very casual glance…
Spades â™ ♠ ♠ ♠
Clubs ♣ ♣ ♣ ♣
Hearts ♥ ♥ ♥ ♥
Diamonds ♦ ♦ ♦ ♦
♢, ♡, ♧, ♤
If they end up rendering I’ll just email you a link to the source.
Microsoft is obviously taking IE9 and it’s future implications very seriously. While I can’t wait for the beta I would hope if they make the decision to delay it a week here or there just to get things in like XHTML or Canvas as examples considering Dean’s claim that the initial preview of IE9 was work done only in a span of three weeks (e.g. IE8 could have had CSS3 selectors with maybe a week’s worth of work?) Still the “leaks” are appreciated.
John, that’s interesting, I’ll have to add your comment to my XHTML Piñata, but for now I just escaped the ampersands.
Anyway, I am using SVG paths to represent the suits, not XHTML (which wouldn’t be a good idea in this case).