[SalesForce] Unable to use SVG in Lightning Components with LockerService activated

I've activated LockerService in my pre-release org, and I'm running into a problem with svg.

As currently svg isn't supported by Lightning, I'm using the custom svg component as described in the SLDS Trailhead module. Then I try to add my component to the Home page through App Builder, I got the following error:

Unfortunately, there was a problem. Please try again. If the problem
continues, get in touch with your administrator with the error ID
shown here and any other related details. Something has gone wrong.
rerender threw an error in 'markup://aura:expression' [TypeError:
document.createElementNS is not a function. (In
'document.createElementNS("http://www.w3.org/2000/svg", "svg")',
'document.createElementNS' is undefined)] Failing descriptor:
{markup://aura:expression}. Please try again.

Problem is coming from this line in the svg component renderer:

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

I guess it's because with LockerService, we only have access to a virtual DOM, so document doesn't have a createElementNS method anymore.

Even worse: if I create a Component without svg, add it to the Home Page through App Builder and then update the Component to add a svg tag, this make the whole Salesforce app crash. Home Page is blank (which is somehow ok as a component is KO, even though I guess it should be rendered without the one crashing), but also I can't navigate without having errors and unsuccessful pages load.

So how can I use svg (and thus use Salesforce Lightning Design System) with LockerService activated ?

Here is a simple component with this problem:

<aura:component implements="flexipage:availableForAllPageTypes">
    <ltng:require styles="/resource/slds102/assets/styles/salesforce-lightning-design-system.css"/>
    <div class="slds">
        <c:svg class="slds-button__icon slds-button__icon- -large" xlinkHref="/resource/slds102/assets/icons/action-sprite/svg/symbols.svg#close" />
    </div>
</aura:component>

Thanks for the help.

Best Answer

SVG support along with document.createElementNS() is coming very soon - already in a scheduled patch branch. I'll double check on the release date but I believe it deploys tommorow night. We've filled in many other gaps in the secure virtual DOM API with more on the way in following patches. Please pardon our dust as we get this dialed in over the next few weeks and definitely keep letting us know when you hit missing methods/properties.

Related Topic