Responsive INLINE SVG – content of svg must fill parent width

The first problem is that you are setting your .svg-wrap div to 100% height. 100% of what? In this case, that div’s parent element is the body element. When you’ve got block-level content that’s 100% of the body’s height, and other in-flow elements, you’re always going to have a vertical scrollbar. because you will always have contents of 100% + your .stuff elements. Just as a general tip, constant overflow like this should be the tipoff that something is wonky in your css.

Continuing further into the DOM, the 100% height declaration on your svg element is forcing the svg to expand to the overly tall wrapper. And that’s another part of the culprit.

The solution I use involves intrinsic ratios. CSS like this:

.svg-wrap {
    background-color:red;
    height:0;
    padding-top:63.63%; /* 350px/550px */
    position: relative;
}

svg {
    background-color: cyan;
    height: 100%;
    display:block;
    width: 100%;
    position: absolute;
    top:0;
    left:0;
}

http://jsfiddle.net/pcEjd/

Tested in latest, FF, Chrome, Safari, (though not IE).

The downsides of this approach are that:

a) you have to precalculate ratios for all your boxes, or write a script that does so. Not too bad.

b) you can’t use border-box globally with the star selector, or if you do you need to override box-sizing back to content-box for your svg containers. Do-able.

As a side note, this obviously isn’t how things are supposed to work. Browsers should be smart enough to look at the SVG viewBox attribute to get the proportions, calculate the computedwidth (after any maxWidth limits) and then compute the height.

But it doesn’t currently work that way. There’s another weird bug in Chrome where adding max-width:100% to the svg creates a situation where the svg always sizes to the smallest rendered size. Try loading this fiddle in Chrome:

http://jsfiddle.net/ynmey/1/

An you’ll see no SVG at all! Weird. Even weirder, toggle off the max-width declaration in Dev Tools, and then start playing with the width of the “result” viewport in jsfiddle. Take it slightly narrower, then wider, then narrower, then wider. Notice that once the svg gets nudged smaller, it doesn’t resize back up again when the viewport gets bigger!

This is important to note because:

 * {max-width:100%}

is a common (and totally legit) responsive design approach, and it currently wreaks havoc with SVG in Blink. So stick to intrinsic ratios for now.