1

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>
Improve this question
3
  • What document mode are you running it in?
    – Dan Jones
    Commented Dec 5, 2016 at 17:58
  • @DanJones Document Mode = Edge(Default)
    – sfdc
    Commented Dec 5, 2016 at 18:27
  • The last time I was having issues it was related to the xmlns url. Sorry I don't have anything specific, but it's something to look into.
    – caleb.breckon
    Commented Dec 6, 2016 at 17:35

1 Answer 1

Reset to default
2

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')}"/>
Improve this answer
5
  • I have updated but still not working <apex:includeScript value="{!URLFOR($Resource.svg4everybody,'svg4everybody.legacy.js')}"/>
    – sfdc
    Commented Dec 5, 2016 at 18:20
  • You should check your static resource.
    – S..
    Commented Dec 5, 2016 at 18:24
  • Sorry, commented too fast. My legacy.js file was in the svg4everybody folder . Maybe yours is in the dist folder. Try : <apex:includeScript value="{!URLFOR($Resource.svg4everybody, '/dist/svg4everybody.legac‌​y.js')}"/>
    – S..
    Commented Dec 5, 2016 at 18:27
  • svg4everybody.legac‌​y.js is in dist folder and I have updated <apex:includeScript value="{!URLFOR($Resource.svg4everybody, '/dist/svg4everybody.legac‌​y.js')}"/> but still not working
    – sfdc
    Commented Dec 5, 2016 at 18:40
  • I tried it. You're right. It is not working. I'll update you if I find something.
    – S..
    Commented Dec 5, 2016 at 20:02

You must log in to answer this question.

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