Cross-browser SVG in responsive or fluid layout?

Question

I opted to use the Raphaël javascript library for its extensive browser support, but I'm having trouble getting the SVG to display properly in any browser, except for Chrome and Firefox. I've been scratching my head over this for a while now and would love to hear how I could make SVG work in a responsive layout.

Chrome and Firefox display the SVG exactly as I'd like. It scales uniformly, maintains a correct aspect ratio and its parent's percentage given width.

Internet Explorer maintains a correct aspect ratio, but does not properly scale with its parent.

Safari scales properly with its parent in width, but not in height. The height, in relation to the parent container, is somehow set to a 100%.

Javascript

var menu = Raphael('menu', '100%', '100%');

menu.setViewBox('0', '0', '50', '50', true);

var menu_bg = menu.rect(0,0, 50, 50);
    menu_bg.attr({
        id : 'menu_bg',
        'stroke-width' : '0',
        'fill' : '#000'
    });

CSS

* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    height: 100%;
}
#menu { 
    width: 50%;
    background: #60F;
    padding: 2.5%;
}
#menu svg { 
    display: block;
    width: 100%;
    height: 100%;
    max-height: 100%;
}
#text { 
    width: 50%;
    background: #309;
    padding: 2.5%;
    color: #FFF;
}

HTML

<div id="menu"></div>

<div id="text"> 
Filler text
</div> 

Live example can be viewed at

• http://jsfiddle.net/R8Qv3/

Hersh

Answer 1

You can add these properties to your SVG tag - <svg viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet"> to preserve aspect ratio.

Taken from the article I read that in...

To preserve the aspect ratio of the containing element and ensure that is scales uniformly, we include the viewbox and preserveAspectRatio attributes.

The value of the viewbox attribute is a list of four space- or comma-separated numbers: min-x, min-y, width and height. By defining the width and height of our viewbox, we define the aspect ratio of the SVG image. The values we set for the preserveAspectRatio attribute — 300 × 329 — preserve the aspect ratio defined in viewbox.

From this article.

Assemblage

Thank you for answering, but unfortunately it still doesn't work. :( I had set preserveAspectRatio to that value by using Raphaël's paper.setViewBox and I just tried it by using paper.canvas.setAttribute('preserveAspectRatio', 'xMidYMid meet'); As mentioned earlier, it all works great in Chrome and Firefox, but for some reason Safari expands the container height to a 100% and Internet Explorer (10) doesn't scale correctly in relation to the parent container. – Hersh