CODEWITHSUNDEEP
javascripthtmlsvg
k.ken
k.ken

Reputation: 5413

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%

Upvotes: 14

Views: 41877

Answers (2)

Radi Totev
Radi Totev

Reputation: 99

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>

Upvotes: -1

Morgan Wilde
Morgan Wilde

Reputation: 17295

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" />

Upvotes: 17

Related Questions