# Embeding raw svg

**URL:** <https://talk.observablehq.com/t/embeding-raw-svg/2572>\
**Category:** Help\
**Created:** [November 21, 2019, 4:32pm UTC](https://talk.observablehq.com/t/embeding-raw-svg/2572 "2019-11-21T16:32:06Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![maliky](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/maliky/32/706_2.png) [@maliky](https://talk.observablehq.com/u/maliky)\
**Post date:** [November 21, 2019, 4:32pm UTC](https://talk.observablehq.com/t/embeding-raw-svg/2572/1 "2019-11-21T16:32:06Z")

</div>

I sorry for the amateurism of this question but how would you go about using the observable runtime to insert a `g` element from a notebook into a `svg` tag existing elsewhere ?

I think this would be the solution to my resizing problem as I would have more control on the `svg viewBox` attribute.

---

<div class="post-metadata">

**Author:** ![maliky](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/maliky/32/706_2.png) [@maliky](https://talk.observablehq.com/u/maliky)\
**Post date:** [November 21, 2019, 8:37pm UTC](https://talk.observablehq.com/t/embeding-raw-svg/2572/2 "2019-11-21T20:37:12Z")

</div>

One would have to implement his own observer is the following way

```auto
...
componentDidMount() {
    // create or use an existing svg node
    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute("width", "100%");
    svg.setAttribute("height", "300");
    svg.setAttribute("id", "svgcontainer");
    svg.setAttribute("ref", this.chart_Ref);
    mountNode.appendChild(svg); // append it somewhere, here to the React Root defined earlier

    runtime.module(define, name => {
	if (name === "g_cell") {
// return a custom observer. This one is just returning the `.node()` of the g_cell variable. g_cell is the name of the cell in the notebook (`define`) that is displaying the raw `g`
            return {
		fulfilled: value => {
		    svg.appendChild(value.node());
		}
            };
	}
    });
}
...

```