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

• /

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/R8Qv3/

• javascript
• css
• svg
• raphael
• fluid

1 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 ma-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.