Example here [https://beta.observablehq.com/d/97c7a125f9159357](https://beta.observablehq.com/d/97c7a125f9159357)
I would expect the following to display a red circle but it does not. When I inspect the cell output in the element inspector, it shows the correct SVG.
```
{
const svg = d3.select(DOM.svg(100, 100))
const svgNode = svg.node()
svgNode.append(html``)
return svgNode
}
```
---
The problem is that the [`html` tagged template literal](https://github.com/observablehq/notebook-stdlib/blob/master/README.md#html) doesn’t know you are trying to create an svg:circle, and so creates an xhtml:circle element (an [HTMLUnknownElement](https://developer.mozilla.org/docs/Web/API/HTMLUnknownElement)), the same way it would if you tried to create a circle element outside of an SVG in literal HTML:
```auto
```
You want the equivalent of this:
```auto
```
So, use the [`svg` tagged template literal](https://github.com/observablehq/notebook-stdlib/blob/master/README.md#svg) instead:
```auto
{
const svgSelection = d3.select(DOM.svg(100, 100))
const svgNode = svgSelection.node()
svgNode.append(svg``)
return svgNode
}
```
---
Ahh! Thank you Mike, that worked, I was unaware of the difference, I see that now it creates an `SVGCircleElement` instead of a `HTMLUnknownElement`, thank you for rapid help!