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?

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.

  • Thanks Doug. I ll keep this thread open till the time. Thanks for sharing the information. – VarunC May 9 '16 at 21:35
  • Hi, is there any news on SVG support? Thanks. – Andrew Fawcett May 15 '16 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 '16 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 '16 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 '16 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.

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.