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!

Final Project Idea

HTML5 has been popping up all over the place, now that I have my eyes on the lookout. As a Flash designer/instructor I've been particularly intrigued by the brewing battle between HTML5 and Flash. Some very large players are staking alliances, and I think it's important for me to follow this closely. I love new tech, and the idea of picking up an iPad on release day has crossed my mind, but the real killer for me is the lack of Flash support. Steve Jobs and Co are really out to kill this tech. Why? I aim to find out!

In the other camp, Google has suggested Flash will be so integral to their Chromium OS the player will be built right into the system (no plug-ins required).

I'm going to research this and report out.

Stupid HTML 5 Tricks

Well, lookie here! No sooner did I start researching HTML 5 that I got totally distracted and started playing around with tags. Actually, this particular diddy is also a valid HTML 4.01 tag...

I'm using the <bdo dir = "rtl"> tag to achieve this (probably useless) right-to-left text effect.