7

I have a visualization library written in javascript that uses <svg /> elements to create a visual representation of some data. As with any vanilla javascript library there is a lot of code in there that is dedicated to actually manipulating the DOM. Aura (Lightning Components) seems like a great fit for this because I could simply use their rendering via <aura:iteration>, etc. to create my markup. However, I need to use the <svg /> tag. This is not for icons with <use /> but instead for a container with other graphical elements such as <mask />, <line />, <rect />, etc. I know that <svg /> has not been supported from day 1, but it has been years now and support is still not there. Originally the messaging was that this was a bug and would be fixed, but I have not heard any updates. Is this actually on the roadmap or is true <svg /> support something we are unlikely to ever see in the framework (maybe there is some security issue I am not aware of?).

Note: I understand that there are workarounds to get the tag to work, but I am hoping to move to Lightning Components to make maintenance easier. Implementing and maintaining a custom renderer would likely be more overhead than just using the vanilla javascript library I have today.

2

Here is how you can display SVGs, it's not ideal because the source is hard-coded but this technique should get you started.

Add this in your markup:

<aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
<aura:unescapedHtml aura:id="mySvg"/>

Then, add the following JS in your controller:

onInit : function(component, event, helper) {
    const svgSource = '<svg width="100" height="100">'
        +'<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="#4CAF50"/>'
        +'<text fill="#ffffff" font-size="12" font-family="Verdana" x="25" y="50">It works!</text>'
        +'</svg>';
    component.find('mySvg').set('v.value', svgSource);
}

Another way of achieving this is to write a custom renderer for your component. this way you can work with the DOM but it's far more trickier.

| improve this answer | |
0

You can use slds svg ( or get inspiration from it ) so can be used after having being built "manually"

https://www.lightningdesignsystem.com/resources/lightning-svg-icon-component-helper/

| improve this answer | |
  • 1
    They have stated at the top of that documentation that the approach is deprecated. Also, this involves creating a custom component for every html element involved in svg creation since they all throw errors in lightning right now. – dsharrison Apr 17 '17 at 22:29

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.