title: Convert SVG to image in PNG
body: <p>i am converting angular nvd3 chart to svg using html2canvas and canvg plugings but when i convert pie chart to png then i looks same as chart but when i convert line chart or area chart then its background goes to black and some circle drown on image.
  My code is</p>
  
  <pre><code>var svgElements = $("#container").find('svg');
  
              //replace all svgs with a temp canvas
              svgElements.each(function () {
                  var canvas, xml;
  
                  // canvg doesn't cope very well with em font sizes so find the calculated size in pixels and replace it in the element.
                  $.each($(this).find('[style*=em]'), function (index, el) {
                      $(this).css('font-size', getStyle(el, 'font-size'));
                  });
  
                  canvas = document.createElement("canvas");
                  canvas.className = "screenShotTempCanvas";
                  //convert SVG into a XML string
                  xml = (new XMLSerializer()).serializeToString(this);
  
                  // Removing the name space as IE throws an error
                  xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');
  
                  //draw the SVG onto a canvas
                  canvg(canvas, xml);
                  $(canvas).insertAfter(this);
                  //hide the SVG element
                  ////this.className = "tempHide";
                  $(this).attr('class', 'tempHide');
                  $(this).hide();
              });
  
  
              html2canvas($("#container"), {
                  onrendered: function (canvas) {
                      var a = document.createElement("a");
                      a.download = "Dashboard.png";
                      a.href = canvas.toDataURL("image/png");
                      a.click();
                      var imgData = canvas.toDataURL('image/png');
  
                      var doc = new jsPDF('p', 'mm','a4');
                      var width = doc.internal.pageSize.width;    
                      var height = doc.internal.pageSize.height;
  
                      doc.addImage(imgData, 'PNG',  0, 0, width, height);
                      doc.save('Dashboard.pdf');
                  }
              });
  
              $("#container").find('.screenShotTempCanvas').remove();
              $("#container").find('.tempHide').show().removeClass('tempHide');
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/LoMcG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LoMcG.png" alt="this is area chart image with some unknown circle on chart "></a></p>
  
  <p>Help me guys.
  Thanks In Advance</p>