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

Release Preview

This release is in preview. Features described here don't become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can't guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.