1

I am getting below error while trying to render custom SVG in LWC

[Failed to execute 'setAttributeNS' on 'Element': 'http://www.w3.org/1999/xlink' is an invalid namespace for attributes.]

2
  • 4
    Can you edit your question with SSCCE as how are you trying to render the SVG? This will let anyone to be able to help you.
    – Jayant Das
    Jan 22, 2019 at 14:31
  • Please describe what you are trying so that we may know what might be going wrong. Jan 25, 2019 at 10:37

3 Answers 3

4

Here is the link from lwc documentation on how to do it.

// myComponent.js
import { LightningElement } from 'lwc';
import SVG_URL from '@salesforce/resourceUrl/svg_url';

export default class myComponent extends LightningElement {
    get svgURL {
        return SVG_URL;
    }
}
<!-- myComponent.html -->
<template>
    <svg xmlns="http://www.w3.org/2000/svg">
        <use xlink:href={svgURL}></use>
    </svg>
</template>
4
  • Unfortunately doesn't work in IE :( Any recommendations how to do it in IE?
    – jm.
    Mar 27, 2020 at 11:56
  • use img tag <img src = {src}></img>
    – ytiq
    Mar 28, 2020 at 15:11
  • 2
    Hey, that link to the documentation is old. The current page is this one - developer.salesforce.com/docs/component-library/documentation/… (the previous one had an error). Can you update it? Thanks
    – Alba Rivas
    Apr 8, 2020 at 7:45
  • thanks, updated the link
    – ytiq
    Apr 9, 2020 at 7:01
0

None of the answers here really provide a complete solution to the issue most people likely have when they searched this.

If you are trying to use a custom SVG within Lightning Web Components, not as the icon for the Component itself in the builder, this answer is for you.

In order to use svg in the <use> tag of the svg as you see in all the examples, you must first make sure your svg file has a <g> tag wrapped around all of the content you wish to use and that tag needs an id.

Rather than just returning the url returned by importing the resource, append the id to the end like so

get svgURL() {
    return SVG_URL + '#layer1';
}

You can then reference this getter method in one of these two ways:

<!-- Option 1 -->
<lightning-icon src={svgURL}></lightning-icon>

<!-- Option 2 -->
<svg xmlns="http://www.w3.org/2000/svg">
    <use xlink:href={svgURL}></use>
</svg>

This is from the documentation for <lightning-icon>

Chances are the aspect ratio/viewbox of your svg image won't match what <lightning-icon> uses, and if that's the case use Option two and specify the same viewbox as the custom svg file on the new svg tag.

For more information on viewbox and svg scaling, (here)[https://stackoverflow.com/a/19485375/9565551] is a lovely answer about it.

3
  • Hi @stackasaur, Option 1 is very cool, but it is not possible to change the color of the icon, right? Classes with fill don't work in LWC for inner components, so I was using Option 2 to display custom SVGs, but it turned out that they are not rendered in IE11. I load icons from static resources. Do you know any workaround for this?
    – jm.
    Mar 27, 2020 at 11:54
  • @Jm, the issue with IE is that it doesn't support external url references in SVG use tags. I suppose static resources are considered external even though they'd be from the same domain. What you can try is editing your SVG file in a text editor and copy and paste the whole <g> you are referencing. Give it a different id and change the color here. Then you can use your JS code to switch between which reference is being used. Make sense?
    – stackasaur
    Mar 30, 2020 at 17:55
  • Yeah, I know this solution, but I want my code to be fully dynamic, so it doesn't make sense to copy-paste from static resource in this case. For now I used <img> tag to display icon in the IE. It works but I didn't find any solution to change the color. Anyway, it is enough for now. Thanks for your answer, it is cool if you don't have to support IE ;)
    – jm.
    Apr 1, 2020 at 9:44
-1

I am using icon-name to render custom svg, and it works fine:

<template>
    <lightning-card title="Account Dashboard" icon-name="custom:custom19">
        <div class="slds-m-around_medium">
            <svg class="d3" width={svgWidth} height={svgHeight} lwc:dom="manual"></svg>
        </div>
    </lightning-card>
</template>
1

You must log in to answer this question.

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