Render SVG String to DOM

by ramnathv

HTML

<div id="foo"></div>

CSS

#foo{
  width: 100px;
  height: 100px;
  margin-top: 100px;
}

JavaScript

function render_xml(id, xml_string){
  var doc = new DOMParser().parseFromString(xml_string, 'application/xml');
  var el = document.getElementById(id)
  el.appendChild(
    el.ownerDocument.importNode(doc.documentElement, true)
  )
}


x = '<svg height="210" width="400" xmlns="http://www.w3.org/2000/svg"><path d="M150 0 L75 200 L225 200 Z" fill="steelblue"/></svg>'

render_xml('foo', x)