Question: i want to put an svg inside the `.container` div created with [the following](http://jsfiddle.net/NKRPe/50/) code so that it fits exactly to the dimensions of the `.container` div but still scales with the size of the page as it is resized:

```
<html>
    <body>
    <style type='text/css'>
.container
{
    position:relative;
    width:50%;/*half the width of the whole page*/
    margin:auto;/*center the whole thing*/
}
.set_height
{
    padding-bottom:50%;/*2:1 aspect ratio*/
    position:relative;
    float:left;
    width:100%;
    height:100%;
}
    </style>
        <div class='container'>
            <div class='set_height' style='background-color:blue;'>
            </div>
        </div>
    </body>
</html>

```

a rectangular svg with an aspect ratio of 2:1 will do for the purposes of this question:

```
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="100" height="50" stroke="black" fill="red" stroke-width="5"/>
</svg>

```

however when i do this, it messes up the aspect ratio of the `.container` div. using chrome the `.container` div height expands out to 100%, which is obviously not what i want :P

thanks in advance!

Answer: 
I think I got it. I just put an absolute div within the `.container` div:

```
.on_top
{
    position:absolute;
    top:0;left:0;bottom:0;right:0;/*expand this div to the size of its parent*/
}
    <div class='set_width'>
        <div class='on_top'>
            <svg viewBox="0 0 100 50" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <rect x="0" y="0" width="100" height="50" stroke="black" fill="red" stroke-width="5"/>
            </svg>
        </div>
        <div class='set_height'></div>
    </div>

```

and I used viewbox on the svg as [ali gajani](https://stackoverflow.com/users/1239189/ali-gajani) [suggested](https://stackoverflow.com/a/18253586/339874)
I think you need to use the viewbox attribute: <http://www.w3.org/TR/SVG/coords.html#ExampleViewBox>

Check this, it scales now: <http://jsfiddle.net/NKRPe/60/>

```
 <svg viewBox="0 0 1500 1000" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="100" height="50" stroke="black" fill="red" stroke-width="5"/>
</svg>

```