SVG Backgrounds

My forays into the world of HTML5 have me fooling around with SVGs (Scalable Vector Graphics). It seems you can place a vector image in a web page background and get it to scale with the view port. I actually spent way too much time getting the image prepped. I couldn't figure out why the example I downloaded would scale, but the SVGs I created failed. Apparently Scalable Vector Graphics don't scale by default. The answer was in the SVG itself, and after comparing a few versions in Notepad I found the changes I needed to make. First, I took out the height and width attributes, then added the following:

viewBox="0 0 744 476"
(744 and 476 refers to the width and height of the image I'm using).

After all that I still had some problems:

1. I have trouble thinking of an actual application where I would want to use this technique
2. Myweb host is having some sort of problem with .svg files (probably the same problem they had with .docx and the other "new" Office file extensions).
3. Unsurprisingly, SVG backgrounds are not supported in IE8 on Win 7.

OK, I got the problem sorted out with my host (MIME type stuff) and have put up two links:

First, the Tanzanian flag with variable aspect ratio
Second, the Monte Carlo GP Circuit with aspect ratio locked
preserveAspectRatio="none"

So... here's a video of Chrome displaying the Tanzanian background, just in case you're running a browser that's not ready for this high tech stuff:



post script: This is the first time I ever uploaded a video to YouTube!