title: Problem saving as png a SVG generated by Raphael JS in a canvas
body: <p>I'm trying to convert a SVG generated by <a href="http://raphaeljs.com/" rel="nofollow noreferrer">Raphael JS</a> (and the user, since you can drag and rotate the images).
  I followed this <a href="https://stackoverflow.com/questions/3975499/conversion-of-svg-to-jpeg/3976034#3976034">Convert SVG to image (JPEG, PNG, etc.) in the browser</a> but still can't get it.</p>
  
  <p>It must be easy but I can't put my finger on what I get wrong.</p>
  
  <p>I got my svg in a div with <code>#ec</code> as <code>id</code> and the canvas's one is <code>#canvas</code>.</p>
  
  <pre><code>function saveDaPicture(){
      var img = document.getElementById('canvas').toDataURL("image/png");
      $('body').append('&lt;img src="'+img+'"/&gt;');
  }
  $('#save').click(function(){
      var svg = $('#ec').html();
      alert(svg);
      canvg('canvas', svg, {renderCallback: saveDaPicture(), ignoreMouse: true, ignoreAnimation: true});
  });
  </code></pre>
  
  <p>The alert gives me : </p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="512"&gt;
  &lt;desc&gt;Created with Raphael&lt;/desc&gt;
  &lt;defs&gt;&lt;/defs&gt;
  &lt;image x="0" y="0" width="300" height="512" preserveAspectRatio="none" href="imageurl.jpg"&gt;&lt;/image&gt;
  &lt;rect x="168" y="275" width="52" height="70" r="0" rx="0" ry="0" fill="none" stroke="#000" stroke-dasharray="8,3" transform="rotate(21.91207728 194 310)" style="opacity: 1; display: none; " opacity="1"&gt;&lt;/rect&gt;
  &lt;circle cx="50" cy="50" r="50" fill="none" stroke="#000"&gt;&lt;/circle&gt;
  &lt;image x="358" y="10" width="39" height="138" preserveAspectRatio="none" href="imageurl2.png" style="cursor: move; "&gt;&lt;/image&gt;
  &lt;image x="397" y="10" width="99" height="153" preserveAspectRatio="none" href="imageurl3.png" style="cursor: move; "&gt;&lt;/image&gt;
  &lt;image x="184" y="286" width="10" height="10" preserveAspectRatio="none" href="imageurl4.png" style="cursor: pointer; opacity: 1; display: none; " opacity="1"&gt;&lt;/image&gt;
  &lt;image x="204" y="286" width="10" height="10" preserveAspectRatio="none" href="imageurl5.png" style="cursor: pointer; opacity: 1; display: none; " opacity="1"&gt;&lt;/image&gt;
  &lt;image x="170" y="277" width="48" height="66" preserveAspectRatio="none" href="imageurl6.png" style="cursor: move; opacity: 1; " r="50" opacity="1" transform="rotate(21.91207728 194 310)"&gt;&lt;/image&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>which is the xml of the svg and if I believe <a href="http://code.google.com/p/canvg/" rel="nofollow noreferrer">canvg documentation</a>, it's good.</p>
  
  <p>Anyway, with this code, the variable <code>img</code>, which should have the converted image data, got the data of an empty png with the dimensions of the svg.</p>
  
  <p>The only thing I guess is that the svg generated by Raphael JS is not well formated for canvg (like, <code>href</code> of <code>image</code> should be <code>xlink:href</code> if I follow <a href="http://www.w3.org/TR/SVG/struct.html#ImageElement" rel="nofollow noreferrer">the W3C recommandations</a> )</p>
  
  <p>Anyone got an idea on this problem ? :D</p>