Change SVG Viewbox size with 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.