Render SVG String to DOM

by yeuem1vannam

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 width="615" height="270"><defs id="SvgjsDefs1766"></defs><g id="SvgjsG1767" featurekey="root" fill="#ffffff" transform="matrix(1,0,0,1,0,0)"></g><g id="SvgjsG1768" featurekey="text1" fill="#1a9988" transform="matrix(16.556528889707067,0,0,16.556528889707067,5.0000039473840925,-127.45223111765654)"><path d="M0 8 l8 0 l0 2.68 l-5.32 0 l0 13.32 l-2.68 0 l0 -13.32 l0 -2.68 z    M23.256 12.66 c0 1.3 -0.46 2.42 -1.4 3.34 c0.94 0.9 1.4 2.02 1.4 3.34 c0 0.64 -0.12 1.24 -0.36 1.8 c-0.24 0.58 -0.58 1.06 -1 1.48 c-0.42 0.44 -0.92 0.76 -1.5 1.02 c-0.56 0.24 -1.16 0.36 -1.8 0.36 l-6 0 l0 -2.68 l6 0 c0.26 0 0.52 -0.04 0.76 -0.14 c0.26 -0.1 0.48 -0.24 0.66 -0.44 c0.18 -0.18 0.32 -0.4 0.42 -0.64 s0.16 -0.5 0.16 -0.76 s-0.06 -0.52 -0.16 -0.76 s-0.24 -0.46 -0.42 -0.64 s-0.38 -0.34 -0.62 -0.44 c-0.26 -0.1 -0.52 -0.16 -0.8 -0.16 l-6 0 l0 0 l-2.66 0 l0 -2.66 l1.6 0 l1.06 0 l0 0 l6 0 c0.26 0 0.52 -0.04 0.76 -0.16 c0.26 -0.1 0.48 -0.24 0.66 -0.44 c0.18 -0.18 0.32 -0.4 0.42 -0.64 s0.16 -0.5 0.16 -0.78 c0 -0.26 -0.06 -0.52 -0.16 -0.76 s-0.24 -0.46 -0.42 -0.64 c-0.18 -0.2 -0.4 -0.34 -0.66 -0.44 c-0.24 -0.1 -0.5 -0.14 -0.76 -0.14 l-6 0 l-2.66 -2.68 l8.66 0 c0.62 0 1.22 0.12 1.8 0.36 c0.58 0.26 1.08 0.58 1.5 1.02 c0.42 0.42 0.76 0.9 1 1.48 c0.24 0.56 0.36 1.16 0.36 1.8 z    M25.852 15.98 l2.66 0 l8 0 l0 2.7 l-8 0 l0 5.32 l-2.66 0 l0 -8.02 z M25.852 8 l10.66 0 l0 2.68 l-8 0 z      "></path></g></svg>'

render_xml('foo', x)