title: how to show and save image as jpg or png from svg using html2canvas?
body: <p>i'm using html2canvas js lib for convert webpage into jpg/png. when i'm used simple div or table in my target id and clicked on button to save webpage as an image. it worked. but whenever i'm use svg in my target id then it not work. it gives blank image in output. </p>
  
  <p><strong>code is :</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/html2canvas.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery.plugin.html2canvas.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
   function capture() {
    $('#target').html2canvas({
     onrendered: function (canvas) {
                  //Set hidden field's value to image data (base-64 string)
      $('#img_val').val(canvas.toDataURL("image/png"));
                  //Submit the form manually
      document.getElementById("myForm").submit();
     }
    });
   }
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
   #target {
    border: 1px solid #CCC;
    padding: 5px;
    margin: 5px;
   }
   h2, h3 {
    color: #003d5d;
   }
   p {
    color:#AA00BB;
   }
   #more {
    font-family: Verdana;
    color: purple;
    background-color: #d8da3d;
   }
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;Simple Implementation of html2canvas With JavaScript and PHP&lt;/h2&gt;
  
  &lt;form method="POST" enctype="multipart/form-data" action="save.php" id="myForm"&gt;
   &lt;input type="hidden" name="img_val" id="img_val" value="" /&gt;
  &lt;/form&gt;
  &lt;table&gt;
   &lt;tr&gt;
    &lt;td colspan="2"&gt;
     &lt;table width="100%"&gt;
      &lt;tr&gt;
       &lt;td&gt;
        &lt;input type="submit" value="Take Screenshot Of Div Below" onclick="capture();" /&gt;
       &lt;/td&gt;
       &lt;td align="right"&gt;
        &lt;a href="http://www.kubilayerdogan.net?p=304" style="font-family: Tahoma; font-size: 10pt; font-weight: bold;"&gt;
                              Documentation (Back to Site)&lt;/a&gt;
       &lt;/td&gt;
      &lt;/tr&gt;
     &lt;/table&gt;
    &lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td valign="top" style="padding: 10px;"&gt;
              &lt;b&gt;Div:&lt;/b&gt;
    &lt;/td&gt;
    &lt;td&gt;
     &lt;div id="target"&gt;
      &lt;div class="slides2" id="widget"&gt;
          &lt;img class="" src="//cdn.shopify.com/s/files/1/0797/1743/products/HK-CK_28785899-10b3-4f49-88be-975a69089e52_1024x1024.JPG?v=1464803870" style="width: 38%;"&gt;
         &lt;div class="custom" style="position: relative; top: -282px; left: 100px;"&gt;
                  &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="410" height="70" viewBox="0 0 2326 460" id="svg"&gt; 
                    &lt;defs&gt;  
                      &lt;clipPath id="my-path"&gt;
                         &lt;text id="texty" style="font-weight:bold;" x="60" y="300" font-size="350"&gt;sdasa&lt;/text&gt;
                      &lt;/clipPath&gt;
                    &lt;/defs&gt;
                    &lt;image xlink:href="Mother of Pearl.JPG" clip-path="url(#my-path)" width="100%" height="100%" id="filler" preserveAspectRatio="none"&gt;&lt;/image&gt;
                &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
    &lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
    </p>
  
  <p>and i want output like as below image .. please help me to sort out of this problem.. thankyou in advance 
  <a href="http://i.stack.imgur.com/ZFfS1.png" rel="nofollow">image</a></p>