22

I'm trying to animate a circular countdown timer for my lightning component, but it seems I can't use SVG tags (https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_supported_html_tags.htm). Should I abandon SVG all together for all lightning components, or is there some alternative?

19

That is a bug, although there is a simple workaround. In your component markup put the SVG in a DIV, wrapped with a CDATA block:

<div aura:id="svg_content">
<![CDATA[
    <svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <path d="M120,108 C120,114.6 114.6,120 108,120 L12,120 C5.4,120 0,114.6 0,108 L0,12 C0,5.4 5.4,0 12,0 L108,0 C114.6,0 120,5.4 120,12 L120,108 L120,108 Z" id="Shape" fill="#2A739E"/>
            <path d="M77.7383308,20 L61.1640113,20 L44.7300055,63.2000173 L56.0543288,63.2000173 L40,99.623291 L72.7458388,54.5871812 L60.907727,54.5871812 L77.7383308,20 Z" id="Path-1" fill="#FFFFFF"/>
        </g>
    </svg>
]]>
</div>

In the renderer for the component, add the following in afterRender:

({
    afterRender: function(component, helper) {
        var svg = component.find("svg_content");
        var value = svg.getElement().innerText;
        value = value.replace("<![CDATA[", "").replace("]]>", "");
        svg.getElement().innerHTML = value;        
    }
})

I will check for a bug on this and open one if not.

  • 2
    Skip, any update on when SVG support will be fixed for Lightning components? Seems they'll become more and more prevalent with the new lightning experience and icons in winter '16 – James Loghry Sep 1 '15 at 0:38
  • The example above leaves a surrounding <div> across the SVG element, which breaks some styling with the new lightning design system (e.g. elements, text and icons are block aligned). Replacing innerHTML with outerHTML helps with this, but from what I've read is not supported in Firefox. – James Loghry Sep 1 '15 at 15:38
  • If the surrounding div is an issue, once you've recreated the SVG, simply make it a sibling of the div instead of a child, and then remove the div from the DOM – CrazyMerlin Dec 24 '15 at 17:35
  • This is not working for IE, there is no <use> tag showing in generated html in IE11. Can you suggest a fix for that? – VarunC May 4 '17 at 11:39
  • @skip-sauls IE 11 support has now been extended by Salesforce and this issue is still occurring. Can you suggest a way to allow IE display a Custom SVG file (outside SLDS provided SVG icons) in a Lightning Component? – VarunC Jul 27 '17 at 9:11
0

There is specific tag in lightning to show standard icons

<lightning:icon iconName="utility:error" variant="error"/>

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_icon.htm?search_text=SVG

  • The question is about using custom SVG that is not part of those given by SLDS. With <lightning:icon> tag, this is not possible. – Aryansh04 Apr 13 '18 at 3:37
0

it is a bug that has not been solved yet, by salesforce. But they do offer the solution using a component :

https://archive-2_1_4.lightningdesignsystem.com/resources/lightning-svg-icon-component-helper

  • Your link is broken. – Aryansh04 Apr 13 '18 at 3:58

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.