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" />

Thanks for the help.

1 Answer 1


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.

  • 1
    Thanks for the answer ! And no problem, I guess it's what pre-release are for :) Apr 26, 2016 at 0:00
  • 1
    I just verified that this is in the .2 patch of Summer'16 scheduled to deploy starting 4/26 mid afternoon pacific standard time (safe harbor and all that of course!). We have even more queued up for .3 (support for the full set of Global Event Handlers developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers, fix for removeEventListener(), support for meta tags, head/body access, etc). Apr 26, 2016 at 0:30
  • 1
    That's great news ! Thanks for taking time to answer and get these details. Apr 26, 2016 at 8:46
  • Doug, you mentioned support for meta tags in your comment, but I could not find any related information in the summer 16 release notes. As I have this problem salesforce.stackexchange.com/questions/116274/… the ability to add own meta tags would be perfect. Do you have any further information about? Jun 7, 2016 at 10:53
  • document.createElement("meta") is fully supported under LS along with filtered access (your code can only see/manipulate the children of these shared nodes that it creates) to head and body including head/body.appendChild(). Jun 8, 2016 at 14:43

You must log in to answer this question.

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