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>
  • What document mode are you running it in? – Dan Jones Dec 5 '16 at 17:58
  • @DanJones Document Mode = Edge(Default) – sfdc Dec 5 '16 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 Dec 6 '16 at 17:35
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')}"/>
  • I have updated but still not working <apex:includeScript value="{!URLFOR($Resource.svg4everybody,'svg4everybody.legacy.js')}"/> – sfdc Dec 5 '16 at 18:20
  • You should check your static resource. – N.. Dec 5 '16 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')}"/> – N.. Dec 5 '16 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 Dec 5 '16 at 18:40
  • I tried it. You're right. It is not working. I'll update you if I find something. – N.. Dec 5 '16 at 20:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.