[SalesForce] SVG Icon not displaying in IE11

SVG icon is not displaying in IE 11 but working in other browsers.

I tried to set absolute path for svg but still not working.

Updated with below code but still not working.

<apex:includeScript value="{!URLFOR($Resource.svg4everybody, '/dist/svg4everybody.legac‌y.js')}"/

<apex:page sidebar="false" showHeader="false" docType="html-5.0" applyHtmlTag="false">
  <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <head>
            <meta charset="UTF-8"/>
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />

           <apex:stylesheet value="/resource/SLDS213/assets/styles/salesforce-lightning-design-system-vf.min.css"/> 

             <apex:includeScript value="{!URLFOR($Resource.svg4everybody,'/dist/svg4everybody.legac‌y.js')}"/>

        </head>
        <body style="padding: 0;">
            <div class="slds">
                <span class="slds-icon_container slds-icon_container--circle slds-icon-action-description" title="description of icon when needed">
                  <svg aria-hidden="true" class="slds-icon slds-icon--small">
                    <use xlink:href="{!URLFOR($Resource.SLDS213,
      'assets/icons/standard-sprite/svg/symbols.svg#account')}"></use>
                  </svg>
                  <span class="slds-assistive-text">Description of icon</span>
                </span>
            </div>
            <script>
                svg4everybody();
            </script>   
        </body>
  </html>       
</apex:page>

Best Answer

The script that should be included is the svg4everybody.legacy.js one.

Mine was like so :

<apex:includeScript value="{!URLFOR($Resource.svg4everybody, 'svg4everybody.legacy.js')}"/>

You should check in which folder the svg4everybody.legacy.js file is in your static resource. I think it's in dist only.

Try this if svg4everybody.legacy.js file in dist folder :

<apex:includeScript value="{!URLFOR($Resource.svg4everybody, '/dist/svg4everybody.legac‌y.js')}"/>

Related Solutions

[SalesForce] Lightning SVG Icon Component Helper – SVG class not being set

This is a bug in the helper code -- I submitted a pull request with a fix for this several weeks ago, and it's been approved but hasn't been merged yet.

It changes the renderIcon code to:

({
  renderIcon: function(component) {
    var prefix = "slds-";
    var svgns = "http://www.w3.org/2000/svg";
    var xlinkns = "http://www.w3.org/1999/xlink";
    var size = component.get("v.size");
    var name = component.get("v.name");
    var classname = component.get("v.class");
    var containerclass = component.get("v.containerClass");
    var category = component.get("v.category");

    var containerClassName = [
      prefix+"icon__container",
      prefix+"icon-"+category+"-"+name,
      containerclass
    ].join(' ');
    component.set("v.containerClass", containerClassName);

    var svgroot = document.createElementNS(svgns, "svg");
    var iconClassName = prefix+"icon "+prefix+"icon--" + size+" "+classname;
    svgroot.setAttribute("aria-hidden", "true");
    svgroot.setAttribute("class", iconClassName);
    svgroot.setAttribute("name", name);

    // Add an "href" attribute (using the "xlink" namespace)
    var shape = document.createElementNS(svgns, "use");
    shape.setAttributeNS(xlinkns, "href", component.get("v.svgPath"));
    svgroot.appendChild(shape);

    var container = component.find("container").getElement();
    container.insertBefore(svgroot, container.firstChild);
  }
})

Here's the pull request -- hopefully they'll get around to merging it soon.

UPDATE: the helper code on the SLDS site is now showing the corrected code.

[SalesForce] Simple SVG icon not displaying in IE11

This is not a Lightning issue, but a browser compatibility issue. IE 9-11 does not support external resources for svgs (e.g. the use tag with an xlink:href), so writing this inline is the best option. There are some really nasty hacks available online, such as https://github.com/jonathantneal/svg4everybody, but I would not recommend use of this library. If you do use it, please refactor it to address the XSS issues below, be sure to hook it into a renderer, and you'll have to find some creative solution on your to this running outside the framework's lifecycle. E.g. the framework is going to think that your image is fully rendered as soon as you make the callout, when it won't actually be on the page yet. Also, I don't know if this approach is guaranteed to work in future versions of Lightning because of how it uses xhrs, and really putting the SVG data inline yourself is going to be much easier and faster that initiating an async xhr call to pull the data from static resources and then re-writing the document to put the data in-line in an unsafe way.
For other browsers, please try to avoid the use of innerHTML with string attributes as they become an XSS sink. You don't need innerHTML here, you can build up the element with DOM accessors, such as createElement(), setAttribute(), and appendChild(). That avoids possible ambiguities in html parsing of strings, particularly as you don't have any native JS and html encoding libraries available to you in Lightning.
href is an XSS sink because of javascript pseudo-schemes (xlink:href="javascript:payload" will cause the payload to execute), so please verify that what goes into href starts with 'https://' if it is an absolute URL or "/" if it is a relative URL. This is true for a href as well as other attributes such as frame src="". For a more complete list of unsafe attributes (there are many), look here: https://html5sec.org/

Best Answer

Related Solutions

[SalesForce] Lightning SVG Icon Component Helper – SVG class not being set

[SalesForce] Simple SVG icon not displaying in IE11

Related Topic