🏠 back to Observable

literal tags: svg VS html

What is the difference between:

html`<svg><circle /></svg>` 

and

svg`<svg><circle /></svg>`

They seem to render exact same thing.
How do the usage differ?

Thanks.

Hi it seems like just a shortcut

Look at this

They’re equivalent if you’re generating an SVG (SVG) element. They’re not equivalent if you’re generating another type of SVG element, such as a G element or a path element.

This generates an HTMLUnknownElement:

html`<g></g>`

Whereas this generates an SVGGElement:

svg`<g></g>`

So, if you’re using embedded expressions within an SVG element, you’ll want to use svg instead of html. See for example:

3 Likes

does that mean is this redundant?

svg`<svg><circle /></svg>`

it could also be ?

svg`<circle />`
1 Like

No, because the first one returns an SVG element that contains a circle element, while the second one just returns a circle element. The svg template literal doesn’t wrap the markup in an SVG element, it just interprets the markup contextually as if it had been inside an SVG element.

3 Likes

That makes sense. For a brief moment I thought it would work.