title: How do I dynamically insert an SVG image into HTML?
body: <p>I have some code that retrieves a scripted svg image from a server via Ajax. I can get the image text back into the browser, but I can't find a way to insert it into the DOM that will actually display it. Can anyone help with this?
  The svg looks likes this:</p>
  
  <pre><code>&lt;svg id="chart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)"&gt;
  &lt;script type="application/ecmascript"&gt;
  &lt;![CDATA[
  ...lots of code, changes on each Ajax request
  //]]&gt;
  &lt;/script&gt;
  &lt;script type="application/ecmascript" xlink:href="js-on-server-1.js"/&gt;
  &lt;script type="application/ecmascript" xlink:href="js-on-server-2.js"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I've tried various things. If I do this:</p>
  
  <pre><code>// xmlhttp.onreadystatechange:
  addImage(xmlhttp.responseXML, "somewhere");
  ...
  function addImage(txt, dst_id) {
     var scr = document.createElement("div");
  
     if("textContent" in scr)
        scr.textContent = txt;  // everybody else
     else
        scr.text = txt;         // IE
  
     document.getElementById(dst_id).appendChild(scr);
  }
  </code></pre>
  
  <p>Then Opera and Chrome do nothing, and F/F complains "[object XMLDocument]". If I change 'responseXML' to 'responseText', then Opera/Chrome correctly display the entire svg text (not image) in the right place, and F/F still gives the same warning.
  I've also tried assigning the response to an innerHTML, but that does nothing.
  Any ideas? Thanks.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>In response to Phrogz'z answer below - I've added two simple svg files. The first is a 'standard' simple svg, displaying a circle. The second is a scripted svg, displaying a rectangle. You should be able to view both directly in any browser, except IE8-.
  If I edit Phrogz'z code to use the circle file (replace 'stirling4.svg' with the name of this file), then it works, but if I want the scripted rectangle instead, it doesn't. Tested on F/F, Opera, Chromium, but doesn't work anyway on (my) Chromium.</p>
  
  <p>File 1, circle:</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
    &lt;circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>File 2, rectangle:</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)"&gt;
  &lt;script type="application/ecmascript"&gt;
  &lt;![CDATA[
  var svgDocument;
  var svgns = "http://www.w3.org/2000/svg";
  function init(evt) {
    if(window.svgDocument == null)
      svgDocument = evt.target.ownerDocument;
     var lbox = svgDocument.createElementNS(svgns, "rect");
     lbox.setAttributeNS(null, "x",                10);
     lbox.setAttributeNS(null, "y",                10);
     lbox.setAttributeNS(null, "width",            30);
     lbox.setAttributeNS(null, "height",           30);
     lbox.setAttributeNS(null, "stroke",           "#8080ff");
     lbox.setAttributeNS(null, "stroke-width",     2);
     lbox.setAttributeNS(null, "fill-opacity",     0);
     lbox.setAttributeNS(null, "stroke-opacity",   1);
     lbox.setAttributeNS(null, "stroke-dasharray", 0);
     svgDocument.documentElement.appendChild(lbox);
  }
  //]]&gt;
  &lt;/script&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Presumably the answer is to get the script into the header??</p>