canvg playground

by Ivan Vasilyev

HTML

<script src="https://gabelerner.github.io/canvg/rgbcolor.js"></script>
<script src="https://gabelerner.github.io/canvg/StackBlur.js"></script>
<script src="https://gabelerner.github.io/canvg/canvg.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<!-- Source of svg -->
<div id="svg-container">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
    <rect height="100" width="100" style="stroke:#f7f7f7; fill: #74ad24" />
  </svg>
</div>

<div>
  <button id="getPdf">Get PDF</button>
</div>

<!-- For export purpose -->
<canvas id="canvas"></canvas>

CSS

#canvas {
  display: none;
}

JavaScript

//Add event listener
document.getElementById("getPdf").addEventListener("click", getPdf);

function getPdf() {
  //Get svg markup as string
  var svg = document.getElementById('svg-container').innerHTML;

  if (svg)
    svg = svg.replace(/\r?\n|\r/g, '').trim();

  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');


  context.clearRect(0, 0, canvas.width, canvas.height);
  canvg(canvas, svg);


  var imgData = canvas.toDataURL('image/png');

  // Generate PDF
  var doc = new jsPDF('p', 'pt', 'a4');
  doc.addImage(imgData, 'PNG', 40, 40, 75, 75);
  doc.save('test.pdf');

}