SVG scaling in Internet Explorer

Question

I've tried the solutions in the following questions but none of them seem to work:

• Scaling/Resizing SVG in an HTML
• How to scale SVG properly and responsively in HTML5?
• Best practice for using SVGs, regarding height and width?

In the last question, the height and width are both specified in the CSS, however I only want to specify one of the dimensions. For instance, currently I have a max-height in my CSS that controls the height of the image.

Here is the code I have:

HTML

<a href='#schedule'>
    <img src='images/calendar.svg' alt='' role='presentation' class='nav-item-icon'>
    <span class='nav-item-text'>Schedule</span>
</a>

CSS

.navigation-main a {
    padding: 0.5rem 0;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}
.nav-item-icon {
    max-height: 1.5em;
    vertical-align: middle;
}
.nav-item-text {
    display: inline-block;
    vertical-align: middle;
    padding-left: 0.5em;
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
    width="82.7272727273px" height="100px" viewBox="0 0 91.59 110.063"
    enable-background="new 0 0 91.59 110.063" xml:space="preserve">
    <!-- codes -->
</svg>

Results

Internet Explorer 11

Firefox and Chrome

I have tried removing the height and width attributes of the SVG but this makes the SVG 100% width of the parent element in all browsers unless I specify a width in CSS. Inlining the SVG does not make a difference.

There's probably a way to do this in JavaScript by getting the computed height and setting the width manually but I would prefer not to resort to such hacks. Is there a way to get the image to scale properly in Internet Explorer?

Answer 1

In Internet-Explorer, you need to define viewBox so it scales well.
You have defined a viewBox, with a different width and height than your width and height attributes.
Is this correct ? My guess is not.

Then you have also defined pixels with a comma value.
This is nonsense.
A pixel is a discrete unit.
There is no half-pixel or quarter-pixel.
IE probably doesn't properly sanitize or interprete those values.

You should probably try:

width="82px" height="100px" viewBox="0 0 82 100"

Also get rid of xml:space="preserve".
IE doesn't support it.