SVG Dynamic resizing

Question

Does anyone know I can dynamically resize an svg image so it fits within a container?? I find that the images I have overflows. What I want is a way to resize it so it doesn't overflow. Any response is appreciated. I have also tried setting the width and the height to 100%

Answer 1

Okay, so the easiest way of doing dynamic widths is just to provide a percentage value for width or/and height. You can find my example in a fiddle here http://jsfiddle.net/VDKwy/

So the key part is either leaving out the width and height properties of off the svg element, or

<svg width="100%" height="100%"></svg>

And then using percentage value for inner elements like so:

<rect x="10%" y="10%" width="80%" height="80%" style="fill:blue;stroke-width:5; stroke:black" />