SVG is a web standard enabling artists and designers to build beautiful graphics with XML syntax.

Lit can compose SVG with templates creating portable and expressive graphics for the web.

Lit (web components) and SVG are supported by all modern browsers.

Before completing this tutorial, you should be familiar with the following concepts:

• Styling in Lit
• Templating in Lit
• Reactive properties in Lit
• Using SVG elements
• Using custom properties

In this tutorial you will learn how to:

• Render SVGs with Lit
• Create generative graphics with SVG
• Theme SVGs with CSS
• Create the graphic shown in the preview