CODEWITHSUNDEEP
htmlcsssvginternet-explorer-11
ebsk
ebsk

Reputation: 85

Svg elements borders disappear when zooming in IE11

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:

enter image description here

This is zoomed in a bit:

enter image description here

Another zoom level:

enter image description here

Upvotes: 2

Views: 1245

Answers (1)

Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19967

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

Upvotes: 1

Related Questions