Svg elements borders disappear when zooming in IE11

Question

I use svg icons that look fine on different browsers, but on IE11 some of the borders of the svg elements, like rect or line, are not visible on certain zoom levels. For example, at 23px width, everything is visible, but on 24px some borders disappear.

This is a normal image:

This is zoomed in a bit:

Another zoom level:

Answer 1

To get more consistent scaling across browsers always ensure you specify a viewBox but leave off the width and height attributes on your svg element.

source: SVG in img element proportions not respected in ie9

A shell command that will remove width & height attributes from all SVG files in the current directory:

find ./ -name '*.svg' -print0 | xargs -0 sed -i "" -e 's/width="[0-9]*\\.*\\[0-9]*" //' -e 's/height="[0-9]*\\.*\\[0-9]*" //'

source: https://gist.github.com/larrybotha/7881691