Convert SVG code into PNG data URI in node.js

Question

I’d like to convert a simple dynamic svg snippet into a PNG data URI on the server. Something like this:

var svg = '<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>'

console.log('<img src="data:image/png;base64,'+toPng(svg, 100, 100)+'">')

I’ve seen examples using imagemagick and some phantomJS variants, but I’m looking for an on-the-fly dynamic solution in node.js, preferably without I/O.

Answer 1

Here's a way to do it using Fabric.js:

Step 1: Install Cairo and node-canvas:
_{(I'm on Ubuntu 14.04, instructions for other OSes can be found here.)}

sudo apt-get update
sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++
sudo npm install canvas

Step 2: Install Fabric.js:

sudo npm install fabric

Step 3: Run the following JavaScript with node:

var fabric = require('fabric').fabric;
var canvas = new fabric.createCanvasForNode(100, 100);
var svgStr = '<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>';

fabric.loadSVGFromString(svgStr, function(objects, options) {
  var obj = new fabric.PathGroup(objects, options);
  canvas.add(obj);            
  console.log('<img src="' + canvas.toDataURL() + '" />');
});

Result:
_{(Ran on node v0.10.25.)}

<img src="data:image/png;base64,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" />

_{Special thanks to this question for the fabric.loadSVGFromString example.}

Answer 2

Take a look at svg-to-img.

It relies on headless Chrome under the hood to do the conversion.

To use svg-to-img in your project, run:

npm install svg-to-img

Here's how to convert a svg to a base64-encoded png:

const svgToImg = require("svg-to-img");

(async () => {
  const svg = "<svg xmlns='http://www.w3.org/2000/svg'/>";
  const png = await svgToImg.from(svg).toPng({ encoding: "base64" });

  console.log("data:image/png;base64," + png);
})();

Disclaimer: I'm the author of svg-to-img.