Scaling Inline SVG in HMTL5 document as the page scales

HTML & CSS
1

Hello,
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

2

max-width:100% makes it scale when it runs out of space. However, if you’re trying to make it size with the layout, you may need to use some media queries.

3

The container has max-width: 106px; which prevents any growth.

4

Ah, okay. Thank you @ralph_m!