23

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?

Improve this question

3 Answers 3

Reset to default
21

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.

Improve this answer
7
  • 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, 2015 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, 2015 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
    – Paul Allsopp
    Dec 24, 2015 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, 2017 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, 2017 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

Improve this answer
1
  • 1
    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, 2018 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

Improve this answer
1
  • 1
    Your link is broken.
    – Aryansh04
    Apr 13, 2018 at 3:58

You must log in to answer this question.

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