team1504 — 2013-02-15T13:31:33-05:00 — #1
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
ron_roe — 2013-02-16T16:35:24-05:00 — #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.
ralphm — 2013-02-16T23:20:54-05:00 — #3
The container has max-width: 106px; which prevents any growth.
team1504 — 2013-02-19T22:19:05-05:00 — #4
Ah, okay. Thank you @ralph_m!