6

I'm trying to use a custom SVG icon in a Lightning Component (not part of SLDS pre defined icons). I've put the SVG icon in following manner:

MyTestApp.cmp

<aura:component >
    <div aura:id="svg_content">
    <![CDATA[
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" style="position:absolute">
            <symbol id="pause" viewBox="0 0 10240 10240">
                <path d="M6400 1280l1280 0c353,0 640,288 640,640l0 6400c0,352 -288,640 -640,640l-1280 0c-352,0 -640,-288 -640,-640l0 -6400c0,-353 287,-640 640,-640z"/>
                <path d="M2560 1280l1280 0c353,0 640,288 640,640l0 6400c0,352 -288,640 -640,640l-1280 0c-352,0 -640,-287 -640,-640l0 -6400c0,-353 287,-640 640,-640z"/>
            </symbol>
        </svg>
    ]]>
    </div>
</aura:component>

MyTestAppRenderer.js

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

This does not work now if LockerService is enabled. I'm always getting svgDiv.innerText as undefined.

How can I use custom SVG icons in Lightning now, is there any other way I could use them without using renderer.js way?

Improve this question

2 Answers 2

Reset to default
6

SVG support is coming in the Summer'16 .5 patch scheduled to deploy 1 week from Tuesday. We've been working to verify that libraries like HightCharts, LeafletJS, D3 and other work nicely when running inside a locker.

Improve this answer
5
  • Thanks Doug. I ll keep this thread open till the time. Thanks for sharing the information.
    – VarunC
    May 9, 2016 at 21:35
  • Hi, is there any news on SVG support? Thanks.
    – Andrew Fawcett
    May 15, 2016 at 1:48
  • @Doug Chasman Any updates on the SVG support for ltng components? Even after Summer '16 was deployed, I still can't use the generic svg tag, without having to use my own custom component.
    – James Loghry
    Jun 20, 2016 at 0:43
  • That sounds like a different, long standing, and unrelated to LS issue - the innerHTML and innerText read and write support was added to Locker Service many weeks ago. Do you mean the ability to use all of the SVG elements in your component's markup (e.g. <g> etc) without CDATA sections etc?
    – Doug Chasman
    Jun 20, 2016 at 10:24
  • I still can't seem to access innerText or innerHTML with CDATA sections following the example above. innerText just returns an empty string.
    – kev_panda
    Aug 29, 2016 at 20:32
3

The issues with the example above are not SVG related - they are because SecureElement.innerText is currently write only for security reasons (the default DOM Element.innerText is a data scraping security vulnerability).

Node.innerText is also a non standard property and is surrounded by controversy:

https://developer.mozilla.org/en-US/docs/Web/API/Node/innerText

http://perfectionkills.com/the-poor-misunderstood-innerText

http://quirksmode.org/dom/html/

http://caniuse.com/#feat=innertext

We recently completed work to add SecureElement.innerHTML read support and will be taking a similar approach to provide innerText and textContent read functionality. This will be released in an upcoming patch to Summer'16.

Improve this answer

You must log in to answer this question.

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