Printing only SVG in Web Page

 About a year ago I needed to print  the visible/dynamic svg in my web page. It was a hack. but it worked. However, because of HTML5 and canvas with jQuery is it is now sweet...So I would like to share.(IE/Chrome/FF)
 

 1.) Firstly you can place the jQuery api in your html head.:
      <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 

 2.) Then make sure your svg  to be printed is contained in a div:
 <div id=svgDiv>
 <svg... </svg>
 </div>
 

 3). Place an empty canvas element in your html page:.
 <canvas id=printCanvas></canvas>
 

 4) place a print button where desired: 
 <button onclick=printSVG()>print</button>
 

 5) Then call the following:
 

 var printSVG = function() {
  var popUpAndPrint = function()
  {
   dataUrl = [];
     $('#printCanvas').filter(function() {
      dataUrl.push(this.toDataURL("image/png"));
    })
     var container = $('svgDiv');
     var width = 1200
    var height = 600
     $(container).find('canvas').each(function(i, item) {
      $(item).replaceWith(
        $('<img>')
          .attr('src', dataUrl[i]))
          .css('position', 'absolute')
          .css('left', '0')
          .css('top', '0')
          .css('width', width + 'px')
          .css('height', height + 'px');
    });
    var printWindow = window.open('', 'PrintMap',
      'width=' + width + ',height=' + height);
    printWindow.document.writeln($(container).html());
    printWindow.document.close();
    printWindow.focus();
  };
   setTimeout(popUpAndPrint, 500);
};
 

 That;s it. I also use it to print the visible map created via Google World Map v3 api.