Written by Pete Corey on Sep 9, 2014.

You may have noticed, but I’ve been having some issues with the svg logo I’m using for this blog. I’m not specifiying explicit height or width attributes on the svg element, but I am setting a viewBox attribute. This lets me specify the height and/or width of the element through my css. If only the width or height is specified, the other attribute will scale accordingly, preserving the aspect ratio of the svg. After some feedback and testing with browserstack, I found out that this wasn’t behaving as I thought it would on some browsers.

1pxsolidtomato

When the logo is displayed in the navbar, I indirectly set the width to 150px (by setting the wrapping container’s width to 150px). Because the viewBox is set to "0 0 100 25", I would expect the height of the rendered svg to be 38px (0.25 * 150px). This worked as expected in Chrome 37 and Firefox 31 on my windows machine. But strangely, in IE 11 the height of the svg element was set to 150px. Even more strangely, in Chrome 37 and Safari 7 on OSX the height of the svg seemed to be stretching to over 1000px.

The fix was very simple. Setting a max-height of 100% on the svg element will correctly set the height of the svg on all browsers.

svg {
    width: 150px;
    max-height: 100%;
}

Honestly, I’m not entirely sure why this was happening. If I had to guess, I would assume it had something to do with this WebKit bug.