title: Insert local SVG image using D3.js
body: <p>I can easily insert an SVG image using D3.js using an URL, like this:</p>
  
  <pre><code>var img = g.append("svg:image")
      .attr("xlink:href", "http://www.clker.com/cliparts/1/4/5/a/1331068897296558865Sitting%20Racoon.svg")
      .attr("width", 200)
      .attr("height", 200)
      .attr("x", 228)
      .attr("y",53);
  </code></pre>
  
  <p>However, I have looked everywhere online and tried everything I could think of, I have not been able to <strong>do the same using a local image reference</strong> (absolute or relative path) and it's driving me crazy.</p>