svg4everybody for svg support for lightning in IE11

I was having the same problem, I noticed that svg4everybody is erroring out with the js error "object doesn't support this property or method". The error is coming from the following code:

 // get the cached xhr request
 var xhr = requests[url];
 // ensure the xhr request exists
 xhr || (xhr = requests[url] = new XMLHttpRequest(), xhr.open("GET", url), xhr.send(),
 xhr._embeds = []), // add the svg and id as an item to the xhr embeds list

I did a little digging and found that Salesforce imports the Sarissa library, which overrides XMLHttpRequest like so:

Sarissa.originalXMLHttpRequest = window.XMLHttpRequest;
XMLHttpRequest = function () {
    if (!_SARISSA_XMLHTTP_PROGID) {
        _SARISSA_XMLHTTP_PROGID = Sarissa.pickRecentProgID(["Msxml2.XMLHTTP.6.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]);
    }
    return new ActiveXObject(_SARISSA_XMLHTTP_PROGID);
};

So I was able to get everything to work by modifying the svg4everybody code to use Sarissa.originalXMLHttpRequest if it is set:

if(Sarissa.originalXMLHttpRequest){
    var XMLHttpRequest = Sarissa.originalXMLHttpRequest;
}

// get the cached xhr request
var xhr = requests[url];
// ensure the xhr request exists
xhr || (xhr = requests[url] = new XMLHttpRequest(), xhr.open("GET", url), xhr.send(),
xhr._embeds = []), // add the svg and id as an item to the xhr embeds list

Hope this may help someone. This approach fixed the Icons issue in IE11. I updated my svg component based on this link https://www.lightningdesignsystem.com/resources/lightning-svg-icon-component-helper/ Add svg4everybody.min.js from dist folder of this link svg4everybody Include the static resource in script tag of component and In the component afterScriptsLoaded method invoke svg4everybody method.

// add meta-http-equiv to the <head>
$('head').append('<meta http-equiv="x-ua-compatible" content="ie=edge">');
// start the svg4everybody helper
$('body').append('<script>svg4everybody();</script>');

The reason for the above problems have nothing to do with Sarissa or locker. Everyone was simply including the wrong js file in the repo.

LEGACY_SUPPORT is used by grunt in lib/svg4everybody. Should be using dist/svg4everybody. Everything works when you use that.

See https://github.com/jonathantneal/svg4everybody/issues/130

Tags:

Lightning Aura Components

Lightning Design System

Recent Posts