'SVG Dynamic resizing

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%

javascripthtmlsvg


Solution 1:[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" />

Solution 2:[2]

I found it easier to remove the width and the height attributes and apply pixel dimensions from a wrapper div, e.g.

<div style="width: 48px; height: 48px;">
  <svg xmlns="..." viewBox="..."></svg>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Morgan Wilde
Solution 2 Radi Totev

Related Questions