Apex Code Development You need to sign in to do that
Don't have an account?
Sandeep Yadav SVG icons are not displaying IE 11
Hi All,
I have use a SVG icon for a button that is displaying in Chrome and Firefox but not displaying in IE 11.
I use this code as given in SLDS library.
Regards
Sandeep
I have use a SVG icon for a button that is displaying in Chrome and Firefox but not displaying in IE 11.
I use this code as given in SLDS library.
<button class="slds-button slds-button_icon" title="Add New Competition" name="data" type="button" onclick="addCompetitionAF()">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#add')}"></use>
</svg>
<span class="slds-assistive-text">Add New Competition</span>
</button>
Please,suggest any correction what i need to add diffrent script to shown these images as a button in IE11.Regards
Sandeep
I trust you are doing very well.
This is not a Lightning issue, but a browser compatibility issue. IE 9-11 does not support external resources for SVG.
To use SVG image icons with IE 11 you will need to download a script called SVG for Everybody (https://github.com/jonathantneal/svg4everybody). After you download svg4everybody, add the svg4everybody.min.js script as a static resource, include it in your pages, and call it in a tag.
Or you can use svgxuse (https://github.com/Keyamoon/svgxuse)
Download the svgxuse.min.js file
Upload it as a static resource to Salesforce.
Please refer to the above links for more information.
I hope it helps you.
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future.
Thanks and Regards,
Khan Anas
https://stackoverflow.com/questions/27494296/ie11-meta-element-breaks-svg
https://salesforce.stackexchange.com/questions/117265/simple-svg-icon-not-displaying-in-ie11
https://github.com/cytoscape/cytoscape.js/issues/782
https://github.com/facebook/react/issues/7358
https://github.com/jonathantneal/svg4everybody
https://css-tricks.com/svg-fallbacks/
I tried both of way but didnot get any result.