+ Start a Discussion
Jim FieldJim 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?
AnudeepAnudeep (Salesforce Developers) 
Hi Jim, 

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
Jim FieldJim Field
We have pasted the svg data into the html file directly, and now the data is showing up in the html, but you cannot see the lines and shapes in the web component. If you hover over an area of the web component that has a link in it, the cursor does change to a hand, and it is clickable, but you cannot see anything. From the developer console in Chrome: [cid:image003.jpg@01D5FC6F.F79A1F60] On the page itself: [cid:image004.jpg@01D5FC6F.F79A1F60] Jim Field Manager Strategy, Technology and Transformation CohnReznick Advisory Tel: 857-264-3923 Fax: 617-330-9102 Jim.Field@CohnReznick.com CohnReznick LLP The information contained herein (or in any attachment) is not intended to be used by any taxpayer for the purpose of avoiding any penalties that a taxing authority might impose on the taxpayer or for the promoting, marketing or recommending to another party any tax related matters. The information in this transmission is privileged and confidential and intended only for the recipient listed above. If you are not the intended recipient, please advise the sender immediately by reply e-mail and delete this message and any attachments without retaining a copy. If you are not the intended recipient, you are hereby notified that any disclosure, copying or distribution of this message, or the taking of any action based upon it, is strictly prohibited.