Variable svgConst

Interprets a template literal as an SVG fragment that can efficiently render to and update a container.

const rect = svg`<rect width="10" height="10"></rect>`;

const myImage = html`
  <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
    ${rect}
  </svg>`;
Copy

The svg tag function should only be used for SVG fragments, or elements that would be contained inside an <svg> HTML element. A common error is placing an <svg> element in a template tagged with the svg tag function. The <svg> element is an HTML element and should be used within a template tagged with the html tag function.

In LitElement usage, it's invalid to return an SVG fragment from the render() method, as the SVG fragment will be contained within the element's shadow root and thus not be properly contained within an <svg> HTML element.