IE not maintaining aspect ratio when using max-width with svg image

Question

I'm using an svg image and setting max-width property, but IE just uses the original height and doesn't try to maintain aspect ratio, even when setting height: auto explicitly. fiddle here

HTML

<img src="http://dauntless.herokuapp.com/assets/images/who-we-are-nav-f35af64a3b.svg">

CSS

img {
  max-width: 50px;
  height: auto;
}

update1

Actually the problem is particularly present with my svgs, some other svg files are working properly with IE. But I have no idea what could be wrong with them, they're working fine with other browsers.

update2

The answer provided solved my problem but a new problem popped up :(

Now when using max-width the image scales correctly, but when wrapping it in a div that wrapper takes the image's original full height. fiddle

Answer 1

You've explicitly set a width and a height in the opening tag of your SVG. If you remove them, this works in IE (tested in IE11):

img, svg {
  max-width: 50px;
  height: auto;
}

Has height set: <img src="http://dauntless.herokuapp.com/assets/images/who-we-are-nav-f35af64a3b.svg" alt=""> 

Does not have height set: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174 174"><g fill="#715f6a"><path d="M113.72 95.354c-.477.516-1.11.808-1.85.95-.222.047-.443.02-.66.02-.97 0-1.87-.258-2.508-.943-.802.14-1.455.62-1.725 1.62h8.472c-.275-1-.928-1.507-1.73-1.646z"/><path d="M87.28 1.105c-47.535 0-86.07 38.536-86.07 86.072s38.535 86.07 86.07 86.07c47.537 0 86.072-38.534 86.072-86.07 0-47.536-38.535-86.072-86.07-86.072zm9.438 45.412a8.808 8.808 0 0 1 8.81 8.81c0 4.867-3.944 8.813-8.81 8.813-4.867 0-8.81-3.947-8.81-8.813a8.81 8.81 0 0 1 8.81-8.81zm-29.123-.003c4.867 0 8.813 3.944 8.813 8.81a8.814 8.814 0 0 1-8.813 8.813c-4.866 0-8.81-3.947-8.81-8.813a8.81 8.81 0 0 1 8.81-8.81zM106.93 128h-.002a4.65 4.65 0 0 1-4.664-4.65l-.004-6.35h9.33l.003 6.344A4.658 4.658 0 0 1 106.93 128zM124 116H98V97h6.62c.286-2 1.528-3.25 3.142-3.748-1.072-5.357-3.69-13.638-4.392-15.438-.702-1.796-2.014-1.245-1.075.486 1.384 3.3 2.99 8.896 4.145 14.418-1.27.66-2.235 1.282-2.713 3.282h-2.22c-1.594-1-2.883-2.412-3.315-4.428l-1.67-7.89c-2.284 2.4-5.79 3.516-11.45 3.815a3.398 3.398 0 0 1-3.207 2.234 3.29 3.29 0 0 1-.467-.044c-7.228-.988-11.28-2.637-13.735-5.503L66.12 91.38c-.497 2.322-2.125 3.808-4.054 4.575l-.017 27.767a4.665 4.665 0 0 1-4.665 4.665 4.67 4.67 0 0 1-4.665-4.67l.02-29.35c-1.84-1.564-2.972-3.84-2.43-6.38l4.077-18.835c.758-3.543 4.35-5.15 7.4-5.15h.026s1.075-.174 2.004 0c.968.186 1.82.564 1.82.564 2.248 1.09 4.398 3.3 4.664 6.037.033.13.08.237.098.377.627 4.424 1.102 7.207 2.404 8.71 1.004 1.164 2.9 1.99 6.12 2.647a3.408 3.408 0 0 1 2.907-1.644c5.33 0 8.3-.537 9.618-1.74 1.28-1.166 1.874-3.814 2.47-7.995.018-.14.064-.266.096-.4.266-2.736 2.417-4.99 4.664-6.082 0 0 .848-.465 1.82-.65.93-.18 2-.182 2-.182l.027-.003c3.054.09 5.503 1.79 6.263 5.332 0 0 5.35 20.998 5.785 23.227.06.292.062.76.046 1.044 1.633.484 2.894 1.758 3.182 3.758H124V116z"/></g></svg>

Answer 2

The original problem can also be solved without having to regenerate the original SVG.

img {
    max-width: 50px;
    width: 100%; // this seems to solve the problem
    height: auto;
}