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:

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.

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

Ah, okay. Thank you @ralph_m!