Resolution for SVG rendering issue on visualforce page

Issue: Using tag to get SLDS Icons in vf. Initially on page load all works fine but when I try to re-render any that have icons inside it, on complete of rerendering it vanish my all icons.

Resolution: 

I was able to overcome the problem of SVG images disappearing using following steps-

-Add docType=”html-5.0″ attribute to the tag;
-Put the xmlns=”…” and xmlns:xlink=”…” attributes directly on the tag, together with xlink:href=”…” value for the SVG icon.

for eg.

<use xmlns="http://www.w3.org/2000/svg&quot; xmlns:xlink="http://www.w3.org/1999/xlink&quot;

  xlink:href=”{!URLFOR($Asset.SLDS, ‘assets/icons/doctype-sprite/svg/symbols.svg#attachment’)}”>

Published by Sandeep Kumar

He is a Salesforce Certified Application Architect having 11+ years of experience in Salesforce.

Leave a Reply