Webkit has problems rendering SVGs with the correct dimensions. More info: http://stackoverflow.com/questions/7570917/svg-height-incorrectly-calculated-in-webkit-browsers https://bugs.webkit.org/show_bug.cgi?id=82489 http://www.brichards.co.uk/blog/webkit-svg-height-bug-workaround

webkitSvgFix.js

// jQuery fix for Webkit SVG height bug.
// Documented here: https://bugs.webkit.org/show_bug.cgi?id=82489 & http://www.brichards.co.uk/blog/webkit-svg-height-bug-workaround
// Found via: http://stackoverflow.com/questions/7570917/svg-height-incorrectly-calculated-in-webkit-browsers
// Original Gist: https://gist.github.com/pfulton/4259378 
// Call the fix function on resize and/or ready

svgElements = $('svg')
function fixWebkitHeightBug(){
    svgElements.each(function() {
        $(this).parent().height(this.prop('viewBox').baseVal / this.prop('viewBox').baseVal * $(this).parent().width() )
    })
};