svg distorting when using .img-responsive in IE 10

[wroughtec]

I have a svg logo that with .image-responsive class that looks fine in chrome, firefox etc ie it fills the width area and keeps its proportions however in IE 10 it becomes elongated ie the width is correct but is trying to stay the same height as the origional source.

I fixed by adding height:100% \9; to the class so it is ignored by firefox and chrome (as height 100% displays weird in Chrome)

Not sure if the is a problem for all image types in IE10 or just svg just thought I would add this quick fix here encase anyone else has the same issue.

[zlatanvasovic]

.image-responsive isn't a Bootstrap class. .img-responsive is. Also, it's just for <img>, not for <svg> or <canvas>.

[wroughtec]

Yep corrected the class typo whoops
An svg can be in a img tag
img src="someimage.svg" class="img-responsive"

[mdo]

Can you put together a jsbin or jsfiddle demonstrating this?

[mdo]

I see no issues with http://jsbin.com/ezEYuvU/1/. Aspect ratio looks good in IE10. Could be you have fixed dimensions elsewhere? Can't be sure without more info though, but until then, closing out since I didn't see any problems.

[wroughtec]

Hi Sorry for not getting back sooner I have managed to replicate:

http://jsbin.com/IKOfOsi/1/

Seems to happen when it is put into a col-* as was fine when not. Could not reproduce with the google logo one you used however that had a an svg.png extension so something else may be occuring there. Hope this helps

Have included a few examples

[wroughtec]

Sorry does also appear to happen without a col-* image the first svg i tried was less than 300px.

Also appears to be an issue on Safari on the Mac (is fine on Windows)

[bjarneheden]

I´m also having the same issue as above with distorted svg images on IE11.
wroughtec already has a code example (above).

Not sure how to work around this when you load the svg dynamically. (for our own images we could probably add preserveAspectRatio attribute to the svg itself. But that does not help when loading svgs not created manually etc.

[cvrebert]

Updated the JS Bin to use BootstrapCDN: http://jsbin.com/IKOfOsi/6/

[cvrebert]

Confirmed.

[cvrebert]

Possibly relevant: http://stackoverflow.com/questions/9777143/svg-in-img-element-proportions-not-respected-in-ie9