title: D3 append (insert) existing SVG string (or element) to a DIV
body: <p>I've searched all over the place for an answer to this question and found some resources that I thought may be useful, but ultimately did not lead me to an answer. Here are a few...</p>
  <ul>
  <li><a href="http://bl.ocks.org/mbostock/1014829" rel="nofollow noreferrer">External SVG</a></li>
  <li><a href="https://stackoverflow.com/questions/21209549/embed-and-refer-to-an-external-svg-via-d3-and-or-javascript">Embed SVG</a></li>
  </ul>
  <h2>The issue</h2>
  <p>What I am trying to do it append an existing SVG element or string to a DIV on the page and then be able to apply various D3.js properties and attributes on it, so I can later manipulate and work with it (such as apply zooming abilities, etc.).</p>
  <p>I was previously using <a href="http://keith-wood.name/svg.html" rel="nofollow noreferrer">jQuery SVG</a> in which I did this:</p>
  <pre><code>var shapesRequest= '&quot;&lt;svg id=&quot;shapes&quot; width=&quot;640&quot; height=&quot;480&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; xmlns:svg=&quot;http://www.w3.org/2000/svg&quot;&gt;' +
         '&lt;polygon id=&quot;svgSection_Floor&quot; points=&quot;222.61,199.75,222.61,295.19,380.62,295.19,380.62,199.75,222.61,199.75,368.46,283.92,233.54,283.92,233.54,209.12,368.46,209.12,368.46,283.92&quot; title=&quot;Floor&quot; link=&quot;Primary&quot; /&gt;' +
         '&lt;text x=&quot;302.61&quot; y=&quot;289.4705&quot;&gt;Floor&lt;/text&gt;...and a lot more of the same...&lt;/svg&gt;';
  $('#svgtmp').append(shapesRequest);
  $('#svgtmp #shapes text').attr('fill', 'white').attr('font-size', '9').attr('font-weight', 'bold');
  $('#pnlShapes').width(640).height(480).svg().svg('get').add($('#svgtmp #shapes'));
  </code></pre>
  <p>So essentially what jQuery SVG and my code is doing is appending the SVG string to a temporary DIV, manipulating some properties within the SVG, then adding that SVG to its permanent location on the page.</p>
  <p>This is exactly what I am trying to do with D3. Although I am not sure if I need to append to a temporary DIV first, as I have access to the SVG string and could just append/attach that to a DOM element with D3.</p>
  <h2>What I've tried...</h2>
  <pre><code>var mapSvg = d3.select(&quot;#pnlShapes&quot;).append(&quot;svg&quot;).attr(&quot;width&quot;, svgWidth).attr(&quot;height&quot;, svgHeight);
  d3.xml(shapesRequest, function (xmlData) {
      var svgNode = xmlData.getElementsByTagName(&quot;svg&quot;)[0];
      mapSvg.node().appendChild(svgNode);
  });
  </code></pre>
  <p>But this isn't the correct approach, as I am not hitting an external API endpoint to retrieve the SVG - I already have it stored as a string.</p>
  <p>I was also looking at doing something like this</p>
  <pre><code>d3.select(&quot;#pnlShapes&quot;).append('svg').append(shapesRequest).attr(&quot;width&quot;, svgWidth).attr(&quot;height&quot;, svgHeight);
  </code></pre>
  <p>but <code>.append()</code> when using D3 isn't used for this kind of appending.</p>
  <hr/>
  <h2>Question</h2>
  <p>What is the proper way to append an existing SVG string to the DOM using D3 (also I'm using jQuery if that helps)?
  My ultimate goal is to append this SVG and then allow it to be zoomable using <a href="http://bl.ocks.org/mbostock/3680999" rel="nofollow noreferrer">this tutorial</a> as my base.</p>