SVG rendering in Microsoft Edge

svg microsoft-edge

13,806

You'll need to use something like svg4everybody to get this to work. Older versions of the script didn't have the right UA string, but the latest version should correctly target Edge now.

Noticed this myself after upgrading to Windows 10 and updating the script fixed it. IE 9-11 worked fine before the update but not Edge as the UA wasn't included in the check. The npm version was also just updated so you can grab it from there as well.

13,806

melvindidit

Interface/Visual Designer, UX engineer, doer of epic shit, loves simple designs and smart interactivity, me and my pixel army at your service.

Updated on June 04, 2022

Comments

melvindidit almost 2 years

I'm using <svg> tags using the <use> node to duplicate images within my html page. But these are not rendering in Microsoft Edge. Is there a workaround? Thanks.
- Ryan Joy almost 9 years
  
  Can you share a code snippet? I've just tried recreating the issue in this JSBin sample, but I'm able to repeat the image elements. jsbin.com/cazasi/edit?html,output
- melvindidit almost 9 years
  
  I use something in the lines of
- melvindidit almost 9 years
  
  I use something in the lines of <svg class="icon"> <use xlink:href="images/svg/svgname.svg#icon-id"></use> </svg> And the svg file has multiple images differentiated by <symbol id="icon-id"> and following is the path. Like <symbol id="icon-id"> <path ...../> </symbol>
KwiZ over 8 years

If I don't get it wrong, svg4everybody uses png images for fallbacks, doesn't it? So I will lost all the svg styling possibilities?
mdmoreau over 8 years

You can use the fallback for < IE9 to use png files you generate yourself I believe. You won't be able to style them, but it would still probably be better than displaying nothing at all.
Keyamoon over 8 years

I would recommend using svgxuse instead of svg4everybody: github.com/Keyamoon/svgxuse