Use SVG Resources

You can add an SVG resource to your component in two ways. Add it directly to your component’s HTML template. Upload the SVG resource as a static resource and import it in your component’s JavaScript file.

SVG (Scalable Vector Graphics) is an XML-based image format that lets you define lines, curves, shapes, and text. Here’s an example of a file that contains a red rectangle, green circle, and white text that says “SVG”.

1<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
2    <rect width="100%" height="100%" fill="red"></rect>
3    <circle cx="150" cy="100" r="80" fill="green"></circle>
4    <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
5</svg>

As you can see, each shape has a tag that describes what it is (for example, rect is a rectangle), its dimensions, and color.

Add an SVG Resource Directly to an HTML Template

To include an SVG resource in your HTML template, enclose it in <template> tags like any other element.

1<template>
2    <svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
3        <rect width="100%" height="100%" fill="red"></rect>
4        <circle cx="150" cy="100" r="80" fill="green"></circle>
5        <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
6    </svg>
7</template>

Import an SVG Resource as a Static Resource

In the SVG file, add an id attribute to the <svg> tag.

1<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg" id="logo">
2    <rect width="100%" height="100%" fill="red"></rect>
3    <circle cx="150" cy="100" r="80" fill="green"></circle>
4    <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
5</svg>

Upload the SVG resource to your org as a static resource.

In your component’s JavaScript file, import the static resource. Define a field that concatenates the reference to the static resource with its id.

1// myComponent.js
2import { LightningElement } from "lwc";
3import SVG_LOGO from "@salesforce/resourceUrl/logo";
4
5export default class myComponent extends LightningElement {
6  svgURL = `${SVG_LOGO}#logo`;
7}

Reference the field in your HTML template with the SVG <use> element.

1<!-- myComponent.html -->
2<template>
3  <svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
4    ;
5    <use href={svgURL}></use>
6  </svg>
7</template>

Supported SVG Tags

Lightning web components support a restricted list of SVG tags.

<svg>
<a>
<altglyph>
<altglyphdef>
<altglyphitem>
<animatecolor>
<animatemotion>
<animatetransform>
<audio>
<canvas>
<circle>
<defs>
<desc>
<ellipse>
<filter>
<font>
<g>
<glyph>
<glyphref>
<hkern>
<image>
<line>
<lineargradient>
<marker>
<mask>
<mpath>
<path>
<pattern>
<polygon>
<polyline>
<radialgradient>
<rect>
<stop>
<switch>
<symbol>
<text>
<title>
<tref>
<tspan>
<video>
<view>
<vkern>
<use>

See Also