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.

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

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

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

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