You need to sign in to do that
Don't have an account?
Jim Field
SVG File Not Displaying in Lightning Web Component
I am new to Saleforce development, and I am trying to embed an svg file in a Lightning Web Component, but I am having trouble. I am following the example in the documentation (https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_svg_in_component).
I have uploaded the svg file as a static resource called TestSVG.
My javascript file is as follows:
import { LightningElement } from 'lwc';
import SVG_URL from '@salesforce/resourceUrl/TestSVG';
export default class myComponent extends LightningElement {
get svgURL () { return SVG_URL; }
}
My html file is as follows:
<template>
<svg xmlns="http://www.w3.org/2000/svg">
<use xlink:href={svgURL}></use>
</svg>
</template>
The web component deploys successfully, but when I load the page the svg area is blank. If I open the svg from the static resource, it shows the floorplan of a building. Does anyone have any ideas why it isn't rendering in the web component?
I have uploaded the svg file as a static resource called TestSVG.
My javascript file is as follows:
import { LightningElement } from 'lwc';
import SVG_URL from '@salesforce/resourceUrl/TestSVG';
export default class myComponent extends LightningElement {
get svgURL () { return SVG_URL; }
}
My html file is as follows:
<template>
<svg xmlns="http://www.w3.org/2000/svg">
<use xlink:href={svgURL}></use>
</svg>
</template>
The web component deploys successfully, but when I load the page the svg area is blank. If I open the svg from the static resource, it shows the floorplan of a building. Does anyone have any ideas why it isn't rendering in the web component?
What happens if you include svg directly in your html file?
<template>
<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red"></rect>
<circle cx="150" cy="100" r="80" fill="green"></circle>
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
</template>
This appears to render correctly on the playground
https://developer.salesforce.com/docs/component-library/tools/playground
To isolate the issue, try including the same SVG inside a lightning component (https://sfdcmonkey.com/2017/03/21/use-svg-salesforce-lightning-component/) to see if it renders correctly
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. Thank you!
Anudeep