Adam Trickett

Tech Lab

This page is here for me to try out cool stuff like HTML5, CSS3, SVG, Canvas, and Microformats, plus tonnes of other cool technologies before I throw them around the rest of the site. My main emphasis here is to ensure everything here degrades gracefully.

Warning: Stuff here may look broken. Thats because I broke it! In the name of progress!!!

Experiment #1: The SVG Apple Tree

See that tree above? That used to be a 66kb PNG image (well, still is everywhere else in this site). Now I’m playing around with SVG to see I can get the size down. So far I’ve hit 88kb which…wait, thats UP! Hmm…seems like I’ve got more work to do.

Here’s the problem:

Way too many vector points. Cleaning this up will be fun…

Update: down to 51kb, with only a small section done.

Update 2: 12kb svgz oh yeah baby!

Update 3: Now rolled out across the whole site thanks to Modernizr.

Experiment #2: The SVG Sprite

This will be painful. This site currently uses a CSS sprite to build all the little UI elements like icons and buttons. SVG that and play fair! Heres the sprite as a 46kb PNG:

I’ve used SVG for a lot of things on this site because it greatly reduces the amount of data needing to be downloaded (in some cases by over 50%). For the image above, I estimate that while I might be able to squeeze it down to a 20Kb SVG, creating it is going to take quite some time.

The second (and slightly more daunting part) is to modify the CSS to make use of the updated image. Normally everything is taken care of by background-position:x y;. Throw an SVG file into the mix, and solution becomes less clear. Will have to put this on hold for the moment.