SVG with width/height doesn't scale on IE9/10/11

This happens when your image is missing the viewBox attribute on the svg element.

Yours should be set to: 0 0 640 480. The zeros are X and Y offsets and the 640 and 480 correspond to the width and height. It defines a rectangle that represents the boundaries of the image.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640" viewBox="0 0 640 480">

Take the height and width out of the SVG tag line.

IE9, IE10, and IE11 don't properly scale SVG files added with img tags when viewBox, width and height attributes are specified.

The issue can be resolved by removing just the width and height attributes and manipulate them via CSS only.

img[src*=".svg"] {
  width: 100%; 
}

Note: If you are placing the SVG inline in IE11, then the width and height attributes are needed in the SVG tag, along with setting the width of the SVG tag to 100% using CSS, so that it scales correctly.

here is the node script i had to write to fix the same issue (for the folder with a number of SVG's), maybe it will be helpful for someone:

'use strict'

const fs = require('fs')

fs.readdir(`./`, (err, flist) => {
    if (typeof flist != 'undefined') {
        flist.forEach((file, i) => {
            proceed(file)
        })
    }
})

function proceed(file){
    fs.readFile(`./${file}`, 'utf8', (err,svg) => {
        let out = svg.replace('<svg', '<svg viewBox="0 0 640 480" ')
        if (!svg.includes('viewBox')){
            fs.writeFile(file, out, err => {
                if(err) {
                    console.log(err);
                } else {
                    console.log("Saved: " + file);
                }
            }) 
        }
    })
}