2

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

TylerH
  • 20,799
  • 66
  • 75
  • 101
ebsk
  • 85
  • 2
  • 8
  • Assume that probably the best way to not have such issues in IE would be to not use svgs.. – ebsk Oct 16 '17 at 08:14

1 Answers1

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

Raphael Rafatpanah
  • 19,082
  • 25
  • 92
  • 158
  • It doesn't seem to be an issue as the svg I use doesn't have the width and height, but have a viewBox it's generated by Illustrator. A simplified version is: Untitled-2 – ebsk Oct 13 '17 at 14:05
  • Even if I put this simple svg which result should be a 1px line IE once show once hide the line when zooming. The problem is of course not with zooming but with scaling the svg itself on page as on some display it will look allright in IE but on the other it won't have some lines invisible. – ebsk Oct 13 '17 at 14:07
  • Try removing the `width` and `height` on the `rect`. – Raphael Rafatpanah Oct 13 '17 at 15:01
  • Thanks for suggestion, but after removing width and height on rect it's not visible as it doesn't have any dimensions. – ebsk Oct 16 '17 at 08:13
  • @ebsk Try manually setting the width and height in the `style` attribute of the SVG element to see if that resolves the distortion. Make sure you are using the height and width from the SVG's `viewBox`. IE doesn't have a way to figure out the height of an SVG based on it's width. – Raphael Rafatpanah Oct 16 '17 at 12:15