# Simple SVG DOM manipulation

**URL:** <https://talk.observablehq.com/t/simple-svg-dom-manipulation/1838>\
**Category:** Help\
**Created:** [March 31, 2019, 11:08pm UTC](https://talk.observablehq.com/t/simple-svg-dom-manipulation/1838 "2019-03-31T23:08:58Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![emery](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/emery/32/1613_2.png) [@emery](https://talk.observablehq.com/u/emery)\
**Post date:** [March 31, 2019, 11:08pm UTC](https://talk.observablehq.com/t/simple-svg-dom-manipulation/1838/1 "2019-03-31T23:08:58Z")

</div>

Can anyone explain whether the following code (as the sole content in a cell) _should_ work, and if so, why it doesn’t?

```
{
  const svg = DOM.svg(128, 128);
  const circle = DOM.element("circle", { r: 120 });
  svg.appendChild(circle);
  console.log(svg);
  return svg;
}

```

I’m assuming that I’m just missing something very simple here. If I put the svg from the console log into a cell (with an html context) it displays correctly as one quadrant of a black circle, i.e.

> html`<svg viewBox="0,0,128,128" width="128" height="128"><circle r="120"></circle></svg>`

Does the code I posted not return a DOM element? The svg element itself does seem to appear as the content of the cell, but it just displays a white rectangle (i.e. no black circle). The bounding box, however, is highlighted in Chrome when I mouse over the svg tag in the console log.

Thanks,  
Emery

---

<div class="post-metadata">

**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\
**Post date:** [March 31, 2019, 11:21pm UTC](https://talk.observablehq.com/t/simple-svg-dom-manipulation/1838/2 "2019-03-31T23:21:26Z")

</div>

You need to use `svg:circle` so that `DOM.element` will use `createElementNS` with the appropriate namespace. See [https://github.com/observablehq/stdlib/blob/master/README.md#DOM\_element](https://github.com/observablehq/stdlib/blob/master/README.md#DOM_element)

```auto
{
  const pic = DOM.svg(128, 128);
  const circle = DOM.element("svg:circle", { r: 120 });
  pic.appendChild(circle);
  return pic;
}

```

This is also equivalent to:

```auto
{
  const pic = DOM.svg(128, 128);
  const circle = svg`<circle r=120>`;
  pic.appendChild(circle);
  return pic;
}

```

Or using a tagged template literal for the whole thing:

```auto
svg`<svg width=128 height=128 viewBox="0,0,128,128"><circle r=120>`

```

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [March 31, 2019, 11:26pm UTC](https://talk.observablehq.com/t/simple-svg-dom-manipulation/1838/3 "2019-03-31T23:26:18Z")

</div>

For more info about namespaces you can [see this rather thorough MDN page](https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course).

---

<div class="post-metadata">

**Author:** ![emery](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/emery/32/1613_2.png) [@emery](https://talk.observablehq.com/u/emery)\
**Post date:** [March 31, 2019, 11:35pm UTC](https://talk.observablehq.com/t/simple-svg-dom-manipulation/1838/4 "2019-03-31T23:35:38Z")

</div>

Perfect. That was it. Thanks!