Change SVG Viewbox size with CSS - css

Question

The Question:
Is there a way to change the size of the SVG viewbox with CSS, but preserve the aspect ratio? OR is there another way to preserve the aspect ratio of the SVG without a view box.
The Problem:
I want to responsively adjust the size of the SVG, but keep the aspect ratio. The width of the viewbox adjusts with the page, but the height doesn't adjust with the width. The problem with that is that the height of the container div is dependent on the height of the viewbox. So the container div may be really tall even if there's nothing showing in the bottom half of the viewbox.
Fiddle:
http://jsfiddle.net/hT9Jb/1/
<style>
div{
width: 100%;
height: 500px;
background-color: #00ffff;
}
svg{
width: 50%;
background-color: #ffff00;
}
</style>
<div>
<svg version="1.1" id="Layer_1" x="0px" y="0px" width="250px" height="400px" viewBox="0 0 250 400" enable-background="new 0 0 250 400" aspect-ratio="XminYmin">
<rect x="0" y="0" fill="#FF0000" width="250" height="400"/>
</svg>
</div>
(Object SVGs and img SVGs wont work for my purposes. It has to be inline. The solution doesn't have to be CSS...javascript is definitely an acceptable solution.)

Answer 1

You could use a transform:
transform: scale(0.75); // 75% of original size

Answer 2

I haven't yet found a way to change the viewBox property with CSS. However this Javascript solution works well:
var mySVG = document.getElementById('svg');
mySVG.setAttribute("viewBox", "0 0 100 100");
Also remove any references to width and height from the SVG and set them in CSS. Even though your working with an SVG, it's inline so cascading rules apply.

Answer 3

In order to have a flexible SVG, that allows you to change its width and height, you need to remove completely the width and height and work with viewbox instead.
And, contrary to what sansSpoon said, you do not need javascript to do this.
In your css, refer to your svg and define its max-width and max-height, for example:
.my_svg_element {
max-width: 250px;
max-height: 400px;
}
After that, your SVG will be elastic and, at the same time, will respect the max width and height you have defined before.

Answer 4

Did you try:
preserveAspectRatio='xMinYMin'
Check this example http://jsfiddle.net/hT9Jb/3/
For more details, see mozila documentation about svg

Answer 5

The width and height values specified in your SVG are the cause of your problem.
The solution is to fix your SVG file. Change:
width="250px" height="400px"
to
width="100%" height="100%"
Or with CSS:
width: 100%;
height: 100%;

Answer 6

What helped me was setting height and width on an img tag:
<img src="./logo.svg" height="150px" width="150px"/>

Answer 7

To build on the answer on #Paulo Coghi which is the best answer for me (and who saved me after a few hours of failing tests and useless googling:
Just tranform your svg from:
<svg version="1.1" id="Layer_1" x="0px" y="0px" width="250px" height="400px" viewBox="0 0 250 400" enable-background="new 0 0 250 400" aspect-ratio="XminYmin">
<rect x="0" y="0" fill="#FF0000" width="250" height="400"/>
</svg>
into:
<svg version="1.1" id="Layer_1" viewBox="0 0 250 400" >
<rect x="0" y="0" fill="#FF0000" width="250" height="400"/>
// and/or whatever you want
</svg>
then you can use in your CSS:
svg {
max-width: 100%;
max-height: 100%;
// or any other units or measurements you want
}

Answer 8

svg{
width: 50%;
background-color: #000;
}
<svg version="1.1" id="Layer_1" x="0px" y="0px" width="250px" height="400px" viewBox="0 0 250 400" enable-background="new 0 0 250 400" aspect-ratio="XminYmin" preserveAspectRatio="none">
<rect x="0" y="0" fill="#FF0000" width="250" height="400"/>
</svg>
Just use this and see if it works(worked for me).
<svg .... .... ... preserveAspectRatio="none">
This should work.

Answer 9

I found a simple javascript solution:
function setSvgSize(){
var width = document.getElementById('svg-container').offsetWidth;
var x = parseInt( $('#svg').attr('width') );
var y = parseInt( $('#svg').attr('height') );
var height = (width / x) * y;
$('#svg-container').css('height',height);
}