Bad proportions in inline SVG in Internet Explorer and Edge

Question

If you shrink view, IE and Edge badly calculate rect positions and dimensions and it looks like lines disappear...

Is it a bug or can I modify the SVG code somehow?

Full demo: https://codepen.io/illycz/pen/XVoxyx

Sample code:

<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 5060.6 1066.5">
  <rect x="4851.3" y="939.3" class="st107" width="52" height="69.4"/>
</svg>

Thanks

Alexandr_TT · Answer 1 · 2018-01-25T06:47:48.593

1

Is it a bug IE. Look here please - Caniuse

IE9-11 desktop & mobile don't properly scale SVG files. Adding height, width, viewBox, and CSS rules seem to be the best workaround.

Unfortunately, if you add fixed height,width the image will not be adaptive
If you add these values as percentages of IE, the image will be scaled incorrectly

You can try the trick Nicolas Gallagher http://nicolasgallagher.com/canvas-fix-svg-scaling-in-internet-explorer/

and read the post where @Paul LeBeau implemented it in practice

edited Jan 25 '18 at 06:47

answered Jan 25 '18 at 04:11

Alexandr_TT

13,635
3
27
54

@alexandr-t Hm, i'm place it absolutely to the container which has percentage dimensions, so it's almost the same like your mentioned example. – Patrik Illy Jan 26 '18 at 09:52

score 0 · Answer 2 · answered Jan 25 '18 at 02:11

0

<div style="width:80%">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 5060.6 1066.5" style="width:100%;height:100%">
  <rect x="4851.3" y="939.3" class="st107" width="52" height="69.4"/>
</svg>
</div>

answered Jan 25 '18 at 02:11

Rob Parsons

839
6
4

Bad proportions in inline SVG in Internet Explorer and Edge

2 Answers2