title: Image inside SVG appears outside, why?
body: <p>I'm trying to build an SVG manually with data of a submitted form.</p>
  
  <p>Now I want to add an image to the SVG like this:</p>
  
  <pre><code>&lt;image x='" + parseFloat(element.left) + "' y='" + parseFloat(element.top) + "' width='" + parseInt(element.width) + "' height='" + parseInt(element.height) + "' xlink:href='" + element.data + "' /&gt;
  </code></pre>
  
  <p>If I parse my complete SVG code now it yields this:</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="160" height="90"&gt;
    &lt;rect width="160" height="90" style="fill:rgb(255, 255, 255);stroke:rgb(0,0,0);stroke-width:0"&gt;&lt;/rect&gt;
    &lt;img x="64" y="29" width="32" height="32" xlink:href="http://allette-bunt-tattoo.de/wp-content/themes/Allettebunt/images/twitter-icon.png"&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Which looks correct for me (except the image tag, converted from <code>&lt;image&gt;</code> to <code>&lt;img&gt;</code>)...</p>
  
  <p>Now the strange thing is the output to the browser/DOM:</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="160" height="90"&gt;
    &lt;rect width="160" height="90" style="fill:rgb(255, 255, 255);stroke:rgb(0,0,0);stroke-width:0"&gt;&lt;/rect&gt;
  &lt;/svg&gt;
  &lt;img x="64" y="29" width="32" height="32" xlink:href="http://allette-bunt-tattoo.de/wp-content/themes/Allettebunt/images/twitter-icon.png"&gt;
  </code></pre>
  
  <p>The SVG is rendered correctly but the image is shown beside the SVG.</p>
  
  <p>I searched for a couple "SVG add image" tutorials and all of them seem like doing it the same way I do and it works for them. What's wrong in my case?</p>
  
  <p><strong>//EDIT</strong>
  I build the SVG like this:</p>
  
  <pre><code>  var svg = $("&lt;svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='" + parseInt(stampy.editor.width) + "' height='" + parseInt(stampy.editor.height) + "'&gt;&lt;/svg&gt;");
  
    svg.append("&lt;rect width='" + parseInt(stampy.editor.width) + "' height='" + parseInt(stampy.editor.height) + "' style='fill:" + stampy.editor.background + ";stroke:rgb(0,0,0);stroke-width:" + (parseInt(stampy.editor.border) * 2) + "' /&gt;");
  
    svg.append("&lt;image x='" + parseFloat(element.left) + "' y='" + parseFloat(element.top) + "' width='" + parseInt(element.width) + "' height='" + parseInt(element.height) + "' xlink:href='" + element.data + "' /&gt;");
  
    svg = $('&lt;div&gt;').append(svg.clone()).html();
    //alert(svg);
    $(this).html(svg);
  </code></pre>