MIX 10k Code Challenge += SVG

Jeff — Thu, 14 Jan 2010 15:56:59 +0000

[clipart]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.

My First SVG Game

Jeff — Wed, 15 Jun 2005 15:22:42 +0000

So I finally crystallized all my new hard-won JavaScript, DOM and SVG knowledge into a simple proof-of-concept game. Any guesses on what game I implemented for my first go? One hint: It has to do with falling blocks…

Anyway, you will need a browser that supports viewing and scripting of SVG (either download the Adobe SVG Viewer plug-in or Mozilla Deer Park). If you run the game in Mozilla, I definitely recommend to turn off some of the effects as Mozilla’s SVG implementation is slow compared to Adobe’s.

I may do some minor enhancements (a star field effect, persistent high scores stored on the server) but I consider the game largely complete and polished. Let me know if you find any bugs or you have any suggestions. Try it here: http://www.codedread.com/yastframe.php. You can compare it to the original SVG Tetris, created by Alex Fritze which served as a source of some inspiration.

CodeDread Blog » Games

MIX 10k Code Challenge += SVG

My First SVG Game