Use SVG in LWC (Lightning Web Component)

by

In this post, we will implement the functionality to use and include SVG in LWC (Lightning Web Component).

There are two ways to include SVG in LWC (Lightning Web Component):

  • Using HTML Markup
  • Using Static Resource

Implementation

Use SVG in LWC using HTML Markup

To include SVG in Lighting Web Component using HTML Markup, add the SVG Markup in HTML file of Lightning Web Component.

svgCmp.html

<template>
    <lightning-card title="SVG in Lightning Web Component">
        <div class="slds-p-left_medium">
            <div class="slds-p-left_medium">
                <div>
                    <p class="slds-text-heading_small">Using HTML:</p>
                    <svg version="1.1" baseProfile="full" width="300" height="150" xmlns="http://www.w3.org/2000/svg">
                        <rect width="100%" height="50" fill="orange" />
                        <circle cx="150" cy="75" r="25" stroke="blue" stroke-width="1" fill="white" />
                        <rect width="100%" height="50" y="100" fill="green" />
                    </svg>
                </div>
            </div>
        </div>
    </lightning-card>
</template>

Use SVG using Static Resource

To include SVG in Lightning Web Component using Static Resource:

  • Upload the SVG File in Static Resource. Make sure to add the id attribute to svg tag.
  • Include the Static Resource in Lightning Web Component and append “#id” at the end of Static Resource URL, where id is the id that we added to svg tag in the previous step. Check this post to know How to use Static Resource in Lightning Web Component.
  • Finally, add the use tag inside the svg tag in HTML file and provide the URL generated in the previous step.

svgCmp.html

<template>
    <lightning-card title="SVG in Lightning Web Component">
        <div class="slds-p-left_medium">
            <div class="slds-p-left_medium">
                <div>
                    <p class="slds-text-heading_small">Using HTML:</p>
                    <svg version="1.1" baseProfile="full" width="300" height="150" xmlns="http://www.w3.org/2000/svg">
                        <rect width="100%" height="50" fill="orange" />
                        <circle cx="150" cy="75" r="25" stroke="blue" stroke-width="1" fill="white" />
                        <rect width="100%" height="50" y="100" fill="green" />
                    </svg>
                </div>
                <br/>
                <p class="slds-text-heading_small">Using Static Resource: </p>>
                <svg xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href={sampleSvg}></use>
                </svg>
            </div>
        </div>
    </lightning-card>
</template>

svgCmp.js

import { LightningElement } from 'lwc';
import SAMPLE_SVG from '@salesforce/resourceUrl/star';

export default class SvgCmp extends LightningElement {
    sampleSvg = `${SAMPLE_SVG}#idSvg`;
}

Here, we first included the star Static Resource using @salesforce/resourceUrl module and then assigned it to sampleSvg property. Make sure to append the id of svg tag. This property is used as a URL to xlink:href attribute in the use tag inside the svg tag.

Use SVG in LWC

This is how our implementation looks like:

Use SVG in LWC (Lightning Web Component)
Use SVG in LWC (Lightning Web Component)

This is how we can use and include SVG in Lightning Web Component.

Please Subscribe if you don’t want to miss new implementations.

If you want to know more about this, please check the official Salesforce documentation here.

Thank You!

Leave a Comment