How to make a

Question

The goal is to have the <svg> element expand to the size of its parent container, in this case a <div>, no matter how big or small that container may be.

The code:

<style>
    svg, #container{
        height: 100%;
        width: 100%;
    }
</style>

<div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
         <rect x="0" y="0" width="100" height="100" />
    </svg>
</div>

The most common solution to this problem seems to be setting the viewBox attribute on the <svg> element.

viewBox="0 0 widthOfContainer heightOfContainer"

However, this does not seem to work in cases where elements within the <svg> element have predefined widths and/or heights. For example, the <rect> element, in the above code, has its width and height explicitly set.

So the obvious solution is to use % widths and % heights on those elements as well. But does this even have to be done? Especially, since <img src=test.svg > works fine and expands/contracts without any problems with explicitly set <rect> heights and widths.

If elements like <rect>, and other elements like it, have to have their widths and heights defined in percentages, is there a way in Inkscape to set it so that all elements with the <svg> document use percentage widths, heights, etc.. instead of fixed dimensions?

Save the svg as a file, than reference it as an image, like and that way you can use width:100% or height:100% — Rosmarine Popcorn, Feb 11 '15 at 02:16
Possible duplicate of [How can I make an svg scale with its parent container?](http://stackoverflow.com/questions/19484707/how-can-i-make-an-svg-scale-with-its-parent-container) — Charles, Mar 24 '16 at 19:49

score 56 · Answer 1 · answered Jan 18 '12 at 23:41

56

The viewBox isn't the height of the container, it's the size of your drawing. Define your viewBox to be 100 units in width, then define your rect to be 10 units. After that, however large you scale the SVG, the rect will be 10% the width of the image.

answered Jan 18 '12 at 23:41

robertc

74,533
18
193
177

54

But the question is: How to scale the SVG? – Adrian Heine Jan 21 '12 at 11:09
6

@AdrianLang The scaling happens automatically when you set a size on the SVG object, as is already done in the code in the question. [Here's a fixed version of the example](http://jsfiddle.net/robertc/8KVtU/). – robertc Jan 21 '12 at 13:55
You’re right, great, that actually works for me. I guess my problem was the height and width properties in my svg root element. – Adrian Heine Jan 21 '12 at 19:16
2

[I made some minor tweaks](http://jsfiddle.net/Thyti/8KVtU/452/) to that fiddle to make that resizing be forced horizontally and vertically without preserving the aspect ratio, and made it work in IE, while the fiddle @robertc submitted wasn't. Hope it'll help someone down the road! – Mister Crimson Dec 09 '13 at 11:59
3

By default your svg will scale as large as possible so that it's completely visible but preserves it's aspect ratio (so a square viewBox won't completely fill a rectangular parent). If you really want to force it to completely cover the parent container, add [preserveAspectRatio="none"](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) to the SVG element. – patricksurry Apr 23 '15 at 14:29
This is useful information. The viewbox unit is a relative unit. In my case I had a square viewbox of `0 0 6.82666 6.82666` so i set the width and height attribute to 6.82666, then 100% on the ` – Rolf Nov 02 '17 at 13:01

Reza Baradaran Gazorisangi · Answer 2 · 2015-02-11T02:04:34.143

Suppose I have an SVG which looks like this:

And I want to put it in a div and make it fill the div responsively. My way of doing it is as follows:

First I open the SVG file in an application like inkscape. In File->Document Properties I set the width of the document to 800px and and the height to 600px (you can choose other sizes). Then I fit the SVG into this document.

Then I save this file as a new SVG file and get the path data from this file. Now in HTML the code that does the magic is as follows:

<div id="containerId">    
    <svg
    id="svgId" 
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    x="0"
    y="0"
    width="100%"
    height="100%"
    viewBox="0 0 800 600"
    preserveAspectRatio="none">
       <path d="m0 0v600h800v-600h-75.07031l-431 597.9707-292.445315-223.99609 269.548825-373.97461h-271.0332z" fill="#f00"/>
    </svg>
</div>

Note that width and height of SVG are both set to 100%, since we want it to fill the container vertically and horizontally ,but width and height of the viewBox are the same as the width and height of the document in inkscape which is 800px X 600px. The next thing you need to do is set the preserveAspectRatio to "none". If you need to have more information on this attribute here's a good link. And that's all there is to it.

One more thing is that this code works on almost all the major browsers even the old ones but on some versions of android and ios you need to use some javascrip/jQuery code to keep it consistent. I use the following in document ready and resize functions:

$('#svgId').css({
    'width': $('#containerId').width() + 'px',
    'height': $('#containerId').height() + 'px'
});

Hope it helps!

@Gazoris, Thanks for this wonderful answer. have question on the same. What if my svg is nested. for e.g., i want to display svg 1 and 2 conditionally and it should take width and height of container.
can you please help me out on this. — Prasad Parab, May 05 '16 at 11:44

score 9 · Answer 3 · edited Jan 28 '21 at 18:29

9

What's worked for me recently is to remove all height="" and width="" attributes from the <svg> tag and all child tags. Then you can use scaling using a percentage of the parent container's height or width.

Before:

<svg width="3212" height="3212" viewBox="0 0 3212 3212" fill="none" xmlns="http://www.w3.org/2000/svg">
   circle cx="1606" cy="1606" r="1387" stroke="black" stroke-width="438"/>
</svg>

After:

<svg viewBox="0 0 3212 3212" fill="none" xmlns="http://www.w3.org/2000/svg">
   circle cx="1606" cy="1606" r="1387" stroke="black" stroke-width="438"/>
</svg>

edited Jan 28 '21 at 18:29

mikemaccana

110,530
99
389
494

answered Dec 18 '14 at 22:00

Geoff Colbath

129
1
3

5

Can you give a working example? I can't get this to do anything. – Michael Jun 24 '17 at 01:17

score 3 · Answer 4 · answered Feb 06 '13 at 00:27

3

@robertc has it right, but you also need to notice that svg, #container causes the svg to be scaled exponentially for anything but 100% (once for #container and once for svg).

In other words, if I applied 50% h/w to both elements, it's actually 50% of 50%, or .5 * .5, which equals .25, or 25% scale.

One selector works fine when used as @robertc suggests.

svg {
  width:50%;
  height:50%;
}

answered Feb 06 '13 at 00:27

Justin Putney

752
1
5
16

That's because your selector `svg, #container` matches _both_ the `svg` dom element *and* the `#container` dom element. I believe you were instead looking for `svg #container`, but the specification of a parent isn't necessary if you're using an ID anyway. – Etheryte Jan 23 '14 at 04:54
Isn't that exactly what I said, "once for #container and once for svg"? – Justin Putney Jan 23 '14 at 22:52
1

Oh pardon, you're right, but your answer is a bit oddly worded leading to the misunderstanding. It sounds as if you're talking about a potential gotcha at first. – Etheryte Jan 24 '14 at 02:30

score 2 · Answer 5 · edited Apr 29 '14 at 17:02

2

For your iphone You could use in your head balise :

"width=device-width"

edited Apr 29 '14 at 17:02

Ashkan Mobayen Khiabani

33,575
33
102
171

answered Apr 29 '14 at 16:42

vincent

37
1

How to make a

5 Answers5

Linked

Related

How to make a element expand or contract to its parent container?

5 Answers5

Linked

Related

How to make a