Change SVG Viewbox size with CSS

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.)

Solution 1:

You could use a transform:

transform: scale(0.75); // 75% of original size

Solution 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.

Solution 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.

Solution 4:

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"

width="100%" height="100%"

Or with CSS:

width: 100%;
height: 100%;

Solution 5:

Did you try:

preserveAspectRatio='xMinYMin'

Check this example http://jsfiddle.net/hT9Jb/3/

For more details, see mozila documentation about svg