SVG scales down to fit small screen height, why? - svg

Question

I have a simple SVG in a web page, and I'd like the SVG to be responsive to width only. The problem is, it scales down also when the screen height is less than the SVG height.
HTML:
<div class="container">
<svg version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin">
<circle stroke="#000" stroke-width="10" fill="transparent" cx="250" cy="250" r="200"/>
</svg>
</div>
CSS:
svg {
max-height: 100%;
}
.container {
width:50%;
border: 1px solid black;
}
Here is the jsfiddle, where you can see the circle radius decreases when the window height is reduced. How can this be avoided ?
Thanks !

Answer 1

Here is what I wanted to achieve, sorry if my question wasn't clear enough:
width of the SVG depending only on the width left available to the container,
(width / height) ratio of the SVG preserved at all time,
container's height depending only on the width of the SVG and its (width / height) ratio.
I got it working this way:
HTML & SVG:
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 500 400" preserveAspectRatio="xMinYMin">
<circle fill="#F7941E" stroke="#231F20" stroke-width="10" cx="250" cy="200" r="150"/>
</svg>
</div>
<hr>
CSS:
.container {
position: relative;
width:50%;
padding-bottom: 40%;
border: 1px solid black;
}
svg {
position: absolute;
top: 0;
left: 0;
max-height: 100%;
}
Fiddle here
The only drawback I see is that the padding-bottom of the container needs to be defined, and to a value matching the w/h ratio of the SVG, which is redundant.

Answer 2

If what you want is for the circle to remain the same size even when the window size changes, then just get rid of the viewBox. Try removing : viewBox="0 0 500 500" preserveAspectRatio="xMinYMin" from the opening svg tag.

Answer 3

The default for height (like width) is 100%. Which means 100% of it's container height.
One solution is to give the container a very large height.
.container {
width:50%;
height: 9999px;
border: 1px solid black;
}
Fiddle here
You don't really say what you want to happen to the lower parts of the circle when the height scales up. If you want it to be hidden off the bottom of the div container, then you could do something like this:
svg {
height: 9999px;
}
.container {
width:50%;
height: 300px;
overflow: hidden;
border: 1px solid black;
}
Fiddle here