Menu
I've embedded an SVG files data directly into my html. It shows in Chrome and Firefox, but in IE11 it doesn't show at all. The pastebin link to the SVG is http://pastebin.com/eZpLXFfD
I've tried adding a META TAG but to no avail. At first I thought it might be a IE Compatibility view issue, but toggling that feature did not work either.
<meta http-equiv="X-UA-Compatible" content="IE=8">
Any help? What else Information Can I provide to help answer this question
900
SVG does not render in IE11 when used in Lightning components. This is working as designed, and looks to be a limitation of Internet Explorer (IE). More specifically, it is due to using svg.
SVG (Scalable Vector Graphics) is officially supported by all main web browsers, including Internet Explorer. The support spans into a wide variety of image editor software, particularly Inkscape, which uses SVG as its native format (If you want a refresher on SVG, click here).
Replies (1) Those files are okay, they are just opening in the wrong program . . . Internet Explorer in Windows is the default SVG viewer, you just need to change the file associations on svg files . .. Important - Check the box marked 'Always use this app to open svg . . .'
It sounds as though you're not in a modern document mode. Internet Explorer 11 shows the SVG just fine when you're in Standards Mode. Make sure that if you have an x-ua-compatible meta tag, you have it set to Edge, rather than an earlier mode.
<meta http-equiv="X-UA-Compatible" content="IE=edge"> You can determine your document mode by opening up your F12 Developer Tools and checking either the document mode dropdown (seen at top-right, currently "Edge") or the emulation tab:
If you do not have an x-ua-compatible meta tag (or header), be sure to use a doctype that will put the document into Standards mode, such as <!DOCTYPE html>.
74
I was having the same problem with 3 of 4 inline svgs I was using, and they only disappeared (in one case, partially) on IE11.
I had <meta http-equiv="x-ua-compatible" content="ie=edge"> on the page.
In the end, the problem was extra clipping paths on the svg file. I opened the files on Illustrator, removed the clipping path (normally at the bottom of the layers) and now they're all working.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
