Scaling Inline SVG in HMTL5 document as the page scales
I am trying to add inline SVG to an HTML5 document for the first time and I am having some problems scale as the viewport scales.
Since the rest of this site will be responsive, I want the SVG to behave likewise so that it fits in the layout.
I added a parent div and gave it styles of a width and height of 100% and max-width and max-height to keep it from becoming outrageously big. I also added many attributes to the SVG element including baseProfile, height, width, preserveAspectRatio, and viewBox all that my research said would help, but so far the SVG is not scaling.
I would greatly appreciate all and any help in achieving this.
Thanks in Advance.
Here is a live example of the HTML document with the inline SVG: https://dl.dropbox.com/u/270523/inlineSVG.html