3

I am trying to use the svg4Everybody js file, from trailhead link to github here, but it doesn't seem to be working properly. I am looking at both MS Edge, Chrome, and IE11. The issue is only apparent in IE11. This app was built with lightning components but our users will continue to use Salesforce Classic as they are not fond of change.

I searched for answers elsewhere and found that adding this bit of code to the controller where I'm loading the script worked for others but is not working for me.

({
   loadScripts : function(cmp, evt, hlp) {
    // 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>');
   }
})

With my component looking like this:

<aura:component implements="force:appHostable">
<ltng:require scripts="{!join(',',$Resource.JQuery224,
                                  $Resource.JQueryUI1pt11pt4 + '/jquery-ui-1.11.4/jquery-ui.min.js',
                                  $Resource.svg4Everybody)}"
              styles="{!$Resource.JQueryUIcss}" 
              afterScriptsLoaded="{!c.loadScripts}"/>

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head title="headTitle">

</head>
<body>
<!-- REQUIRED SLDS WRAPPER -->
<div class="slds slds-theme--alert-texture">
    <!-- PRIMARY CONTENT WRAPPER -->
    <c:AthenaBody />
    <!-- / PRIMARY CONTENT WRAPPER -->
</div>
<!-- / REQUIRED SLDS WRAPPER -->
</body>
</html>
</aura:component>

I have confirmed the library is getting loaded. Any help is appreciated!

Improve this question

3 Answers 3

Reset to default
1

Make sure you are using absolute URL references for SVG graphics in your markup. For example, instead of this:

<use xlink:href="/resource/123456789/SLDS/assets/icons/utility-sprite/svg/symbols.svg#setup_assistant_guide"></use>

You need to add the domain prefix like this:

<use xlink:href="https://c.na31.visual.force.com/resource/123456789/SLDS/assets/icons/utility-sprite/svg/symbols.svg#setup_assistant_guide"></use>

If you were like me and using a variable to retrieve the base path for assets...

var sldsBase = "{!URLFOR($Resource.SLDS, '')}";

You can update it to... 

var sldsUrl = "{!SfInstance}{!URLFOR($Resource.SLDS, '')}";

And define SFInstance as follows...

public String getSfInstance() {
  return URL.getSalesforceBaseUrl().toExternalForm();
}
Improve this answer
0

First, IE 11 is not the same as Microsoft Edge. Depending on the age of your org, support for Microsoft IE 11 may have already ended. New orgs created since Summer 16 release do not support IE 11. Existing orgs can turn off support for IE 11. If they don't, it will automatically end on December 16, 2017.

For more details, you'll want to read this KB article titled Retirement of Support for Accessing Lightning Experience and the Salesforce1 Mobile Browser App Using Microsoft Internet Explorer version 11.

That having been said, chances are, your issue is related to other problems related to the LockerService and the JQuery library. Try turning off the Locker Service to see if it resolves your issue.

Improve this answer
6
  • I was under the impression that setting content="ie-edge" would display the content in the highest mode possible. Our org was created around 2010 so I don't think that is the issue. Wouldn't disabling Locker Service just cause problems later when it is automatically implented in orgs in winter '17?
    – ChrisLuman
    Commented Aug 29, 2016 at 13:30
  • You'll find many posts in the forum related to issues users have had surrounding issues the locker service has created for them, causing their components to fail or not work as expected. SF has been updating the service frequently trying to solve issues surrounding it. Try disabling it to see if it resolves your particular issue.
    – crmprogdev
    Commented Aug 29, 2016 at 18:44
  • @crmprogdev: Considering that question mentions that users will continue to use app in Classic, so considering lightning components are embedded in Visualforce (same situation as mine). As I understand, Lightning components for visualforce in classic are supported for IE9+. However, I am also facing the same issue wherein base lightning components are not displaying the icons. Any thoughts?
    – Anshul
    Commented Jul 13, 2017 at 19:43
  • @Anshul It's well known that IE behaves differently than Chrome and often requires different scripts or other markup to get things to load/display properly. SVG Icons should display in IE with the correct markup. I recommend you ask this in the appropriate Forum on StackOverflow for IE browser support. I'll add that svg4everybody.js isn't on the list in Which external JS libs work with Lightning Locker Service?.
    – crmprogdev
    Commented Jul 15, 2017 at 14:49
  • @crmprogdev: Agreed. I believe, I stated my question incorrectly. You mentioned about Lightning experience support EOL for IE. Whereas, in question, the ask is regarding lightning components within Classic (my situation). So, I just wanted to point that, Salesforce KA 000233325 states "There is no impact to Salesforce Classic, as IE11 will remain a supported browser. This includes the use of Lightning components in Visualforce pages running in Salesforce Classic". So, base lightning component icons should render correctly within IE. Am I missing anything here?
    – Anshul
    Commented Jul 16, 2017 at 17:02
0

Try signing up for a prerelease org for Winter 17 and take a look at the release notes here. There are some new lightning components that appear to be working in IE as well as Edge in most cases.

<aura:component>
    <lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/>
</aura:component>
Improve this answer

You must log in to answer this question.

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