node package manager


A port of canvg & jscanvas, which pareses svg input and outputs js code to reproduce on a canvas.


canvgc is a nodejs tool for compiling SVG to html5 CanvasRenderingContext2D commands.


npm install canvgc
<svg xmlns="" version="1.1" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
  "w": 100, 
  "h": 100,
  "d": [
    function ($, p) {
      $.strokeStyle = "rgba(0,0,0,0)";
      $.miterLimit = 4;
      $.font = "   10px sans-serif";
      $.fillStyle = "red";
      $.strokeStyle = "black";
  "i": {}
canvgc file.svg file.js # basic conversion
canvgc file.svg file.js --prepend 'window.canvgc={"file":' --append '};' # assign to some variable
canvgc file.svg file.js --prepend 'callback(' --append ');' # call a function with result
canvgc file.svg file.js --chunk 500 # break in to blocks of code (prevent event loop starvation when rendering large files)
  // basic render at original width & height, without transforms 
  function render(canvas, plan){
    var painter = new Painter(plan,function(cb){window.setTimeout(cb,0);}); // can use setImmediate poly-fill 
    canvas.width = plan.w;
    canvas.height = plan.h;
    // need to wait on load images - even for dataURL images. 
      // renders the whole file (even if chunked) in one go 
      // if large file & is chunked 
      //painter.renderDeferred(canvas.getContext('2d'), function(){ console.log('done');}) 
  render(document.getElementById('canvas'), window.canvgc.file);

Gabe Lerner ( -

Michael Thomas -

To the authors of all of the projects on which this depends & is built upon.