title: How to draw an inline svg (in DOM) to a canvas?
body: <p>Well, I need some help about convert .svg file/image to .png file/image...</p>
  
  <p>I have a .svg image displayed on my page. It is saved on my server (as a .png file). I need to convert it to a .png file on demand (on click on a button) and save the .png file on the server (I will do this with an .ajax request).</p>
  
  <p>But the problem is the conversion.</p>
  
  <p>I read many things about the html5 Canvas, which can probably help doing what I need to do now, but I can't find any clear solution to my problem, and, tbh, I do not understand everything I found... So I need some clear advices/help about the way I have to do it.</p>
  
  <p>Here is the "html idea" template : </p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;svg id="mySvg" width="300px" height="300px"&gt;
              &lt;!-- my svg data --&gt;
          &lt;/svg&gt;
          &lt;label id="button"&gt;Click to convert&lt;/label&gt;
          &lt;canvas id="myCanvas"&gt;&lt;/canvas&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and some js : </p>
  
  <pre><code>&lt;script&gt;
      $("body").on("click","#button",function(){
          var svgText = $("#myViewer").outerHTML;
          var myCanvas = document.getElementById("canvas");
          var ctxt = myCanvas.getContext("2d");
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Then, I need to draw the svg into the Canvas, get back the base64 data, and save it in a .png file on my server... but... how? I read about so many different solutions that I'm actually... lost... I'm working on a jsfiddle, but I'm actually... nowhere... <a href="http://jsfiddle.net/xfh7nctk/6/" rel="noreferrer">http://jsfiddle.net/xfh7nctk/6/</a> ... Thanks for reading / help</p>