Including SVG in a Lightning Component

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?

Answer

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.

Attribution
Source : Link , Question Author : Jeff , Answer Author : metadaddy

Leave a Comment