title: how to use svg file for image source in D3
body: <p>here is a question:</p>
  
  <p>I work with D3. Trying to add an image to the node. The render file is svg file:</p>
  
  <pre><code>&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"    "http://www.w3.org/Graphics/SVG/1.2/DTD/svg11.dtd"&gt;
  &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"     version="1.1" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400" enable-    background="new 0 0 400 400" xml:space="preserve"     xmlns:xml="http://www.w3.org/XML/1998/namespace"&gt;
  &lt;path fill="#5DD7FC" d="M0.5,262.094c0,0,52.172,79.049,158.323,77.241c68.433-    2.031,165.549-32.296,191.523-132.123  c0,0,27.893,4.742,47.654-16.939c-26.99,3.727-44.944-    4.743-44.944-4.743s35.346-1.017,43.137-21.908  c-20.89,9.035-46.751,1.355-46.751,1.355S337.245,90.22,262.939"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>so, I am trying to hook it up to the image source using this code (directly for now):</p>
  
  <pre><code>d3GraphWidget._node.append("image")
                  .attr("xlink:href", "http://localhost:13980/Areas/Widgets/Content/graphwidgetrelated/img/twittericon.svg")
                  .attr("x", -8)
                  .attr("y", -8)
                  .attr("width", 16)
                  .attr("height", 16);
  </code></pre>
  
  <p>but I don't see anything rendered, just an 'empty image icon'. When going directly to the link, the browser finds the file no problem. </p>
  
  <p>So, how to use svg file for image source in D3?</p>
  
  <p>thanks for any suggestions,</p>
  
  <p>Alex</p>