6

I am facing issue with loading icons in IE11 for Lightning application i have. I went through trailhead and found svg4everybody.js which helps to support svg rendering in IE11.

can anyone please, help!!!

I am getting an error saying LEGACY_SUPPORT is undefined for js file svg4everybody.

I included it in static resources and calling it afterScriptsLoaded

afterScriptsLoad: function(component, event, helper) {
        svg4everybody();
}

slds lightning svg support IE

svg4everybody

Improve this question

4 Answers 4

Reset to default
7

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
Improve this answer
5
  • This fix worked for me. What I've seen is that this library is introduced with the use of standard components like apex:commandButton.
    – pfernandez
    Commented Mar 12, 2017 at 22:27
  • This fixed the error in Classic, but in Lightning still getting the same error ("Object doesn't support this action") on the same line of the svg4everybody resource. @sv-alex Have you found a culprit other than Sarissa in a Lightning (LEX) environment?
    – Brent Bowers
    Commented Aug 15, 2017 at 17:48
  • I am using svg4everybody script in visualforce page. I was having the same issue and your answer solved it for me as well. However, on some pages it throws error that "Sarissa is undefined. " I am calling the svg4everybody() in $function(). I also tried calling it after onload event however, it did not help. Can you please tell why that would be ? @sv-alex
    – A. Shah
    Commented Dec 16, 2017 at 22:41
  • Well maybe Sarissa isn't being used on every page? I would try changing the if statement from my code above to be if(typeof Sarissa !== 'undefined' && Sarissa.orignalXMLHttpRequest)
    – sv-alex
    Commented Dec 18, 2017 at 13:27
  • thank you @sv-alex for prompt reply. Now it's giving me error - "Object doesn't support this action" at this line. xhr = requests[url] = new XMLHttpRequest()
    – A. Shah
    Commented Dec 18, 2017 at 19:18
2

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>');
Improve this answer
2
  • This won't work soon with Locker Service being implemented due to the XSS violation.
    – Clint
    Commented Sep 23, 2016 at 13:40
  • This does not answer the original question. The original question references a file that is meant to be used a grunt build dependency. See my answer below for clarification.
    – Matthew McKinley
    Commented Mar 17, 2017 at 4:25
2

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

Improve this answer
1
  • I believe my answer is the actual answer to the original question about LEGACY_SUPPORT not being defined. Please mark it as such if you agree.
    – Matthew McKinley
    Commented Mar 13, 2017 at 19:19
0

For anybody who stumbles across this while searching for IE/SVG solutions, in Winter '17 with Locker Service turned on, I didn't have to do any of the funky stuff mentioned above.

In my scenario, I'm loading a lightning component in a VF page to start transitioning some VF code into Lightning code. I pulled svg4everybody from github (v2.1.3), zipped it up and uploaded as a static resource. Included into the bottom of my host VF page (the VF page that is hosting my main Lightning component), ran the method, and icons started working in IE11. No futzing with the source, just plug and play.

Note: if you're doing something similar, the lightning:icon component is probably suitable for most needs and will render in IE11, but in my case I needed to apply some CSS directly on the <svg> element (see the Lightning Design Systems collapsible section pattern), which lighthing:icon doesn't allow you to do.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .