🏠 back to Observable

literal tags: svg VS html

What is the difference between:

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


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

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


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:


Whereas this generates an SVGGElement:


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


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.


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