svg icons in IE9 do not display correctly - html

Question

Our svg icons included using the img tag are getting incorrectly resized, cut off, or completely hidden when displayed in IE9.
The solution in https://gist.github.com/larrybotha/7881691 (setting the viewBox, removing width and height) does not help and neither does including the images as background.
When included using the tag, the SVGs display properly (but then they do not display in some modern browsers like chrome)
One of the icons we use has the following source:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generated by IcoMoon.io -->
<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 640 640">
<metadata id="metadata167">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<path id="path161" fill="#c6c6c6" d="m227.88,640.44c-19.924,0-38.795-9.298-50.887-25.329l-163.69-216.1c-21.298-28.12-15.756-68.15,12.367-89.45,28.169-21.34,68.155-15.76,89.456,12.37l107.68,142.17,270.79-434.72c18.64-29.909,58.03-39.07,87.98-20.428,29.91,18.596,39.07,58.032,20.39,87.942l-319.85,513.45c-11.13,17.909-30.321,29.131-51.345,30.047-0.96187,0.0458-1.9237,0.0458-2.8856,0.0458z" stroke="#c6c6c6"/>
</svg>
Any idea on what we could do to make SVG render properly in IE9?

Answer 1

I can't be sure that this will answer your question without seeing the specific code you're having problems with, Jakub. But I always include the following attributes in every SVG element, as a minimum. This always gives me a good level of cross-browser consistency, back to IE9:
<svg height="40" version="1.1" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg">
If that doesn't help, could you share your code?

Answer 2

Wrapping the svg into a div and giving that a width seems to work fine for me.
http://codepen.io/anon/pen/qONXzz
.svg-test{
width: 50px;
}

Answer 3

It seems that the only method for embedding and resizing an external xml file that works correctly in all browsers is the one described in http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial
So instead of
<img src="./images/icons/icons-complete.svg" style="width: 11px;height:11px;"/>
you can use
<svg height="11" width="11"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="scale(0.0172)">
<image x="0" y="0" height="640" width="640" xlink:href="/images/icons/icons-complete.svg"/>
</g>
</svg>