CODEWITHSUNDEEP
svginternet-explorer-11
user13090462
user13090462

Reputation: 3

SVG getting distorted in IE

I am trying to embed an svg into a web page. It works fine in Chrome and Firefox but gets completely distorted in IE. Please use the below svg block of code as reference:

<svg width="33" height="33" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path d="M21 17.625h-3.375c-.619 0-1.125.506-1.125 1.125v3.375c0 .619.506 1.125 1.125 1.125H21c.619 0 1.125-.506 1.125-1.125V18.75c0-.619-.506-1.125-1.125-1.125zm0-11.25V7.5h-9V6.375c0-.619-.506-1.125-1.125-1.125S9.75 5.756 9.75 6.375V7.5H8.625a2.24 2.24 0 00-2.239 2.25L6.375 25.5a2.25 2.25 0 002.25 2.25h15.75a2.257 2.257 0 002.25-2.25V9.75a2.257 2.257 0 00-2.25-2.25H23.25V6.375c0-.619-.506-1.125-1.125-1.125S21 5.756 21 6.375zM23.25 25.5H9.75a1.128 1.128 0 01-1.125-1.125v-11.25h15.75v11.25c0 .619-.506 1.125-1.125 1.125z" id="a"/>
  </defs>
  <g fill="none" fill-rule="evenodd">
    <path fill="#FFF" d="M-134-821h1400V297H-134z"/>
    <path fill="#FFF" d="M-134-821h1400V204H-134z"/>
    <path fill="#FFF" d="M-134-821h1400V204H-134z"/>
    <circle fill="#269F96" cx="16.5" cy="16.5" r="16.5"/>
    <use fill="#FFF" fill-rule="nonzero" xlink:href="#a"/>
  </g>
</svg>

Upvotes: 0

Views: 83

Answers (1)

user13085511
user13085511

Reputation: 26

So some browsers have a hard time with the <use>, <mask> and <def> tags. To fix this you can sometimes "flatten" your image in the graphics editor. Remove any folders containing layers, etc etc.

You can also fix this manually. It is not hard and doing it once helps you learn SVG syntax:

  1. Start by looking at the id referenced in the href attribute <use ... xlink:href="#a">. As you can see it is a
  2. Now we look for the tag with id="a" In this case it is the path inside the <def> tag. This is kind of expected as the def means "define for later use".
  3. Remove the <def> tags but keep that <path id="a" ...> and all its guts.
  4. Move the all the attributes (except the xlink:href="#a") in the <use> tag (fill and fill-rule ) to the path#id="a" element.
  5. Remove the <use> tag.
  6. place all <path> tags inside the one <g> tag
  7. In this case the other fill tags are pointless (artifacts maybe from the editor). They are just white squares so you can ditch those.
  8. I put the circle first since this renders in order top renders on bottom. So visually the bottom layer should be a circle top layer is some drawing in white.

End result should be something like this:

  • No def or use tags.
  • All shapes inside a root g tag
  • Removed pointless shapes.

.

<svg width="33" height="33" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#269F96" cx="16.5" cy="16.5" r="16.5"/>
    <path fill="#FFF" fill-rule="nonzero" d="M21 17.625h-3.375c-.619 0-1.125.506-1.125 1.125v3.375c0 .619.506 1.125 1.125 1.125H21c.619 0 1.125-.506 1.125-1.125V18.75c0-.619-.506-1.125-1.125-1.125zm0-11.25V7.5h-9V6.375c0-.619-.506-1.125-1.125-1.125S9.75 5.756 9.75 6.375V7.5H8.625a2.24 2.24 0 00-2.239 2.25L6.375 25.5a2.25 2.25 0 002.25 2.25h15.75a2.257 2.257 0 002.25-2.25V9.75a2.257 2.257 0 00-2.25-2.25H23.25V6.375c0-.619-.506-1.125-1.125-1.125S21 5.756 21 6.375zM23.25 25.5H9.75a1.128 1.128 0 01-1.125-1.125v-11.25h15.75v11.25c0 .619-.506 1.125-1.125 1.125z"/>
  </g>
</svg>

I don't have enough reputation points to answer @cloned question in the comments. One annoying thing I have found out about IE11 is that not all versions of IE11 will break the same. The versions among Win7, Win8, Win8.1, and Win10 actually intemperate code differently.

Upvotes: 1

Related Questions