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”.

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

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

In the SVG file, add an id attribute to the <svg> tag.
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.
Reference the field in your HTML template with the SVG <use> element.

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