Support for SVG as data URL missing

[FransBosuil]

I'm using the library dom-to-image (in node.js) to convert some DIV content to an image. The library adds the DIV to an SVG foreign object, converts the SVG to a data URL and updates the src property of a canvas image. So far so good. However, the last step fails with the message Error: error while reading from input stream.

From other issues, I found that the log message is thrown in Image.cc and that it comes from the variable CAIRO_STATUS_READ_ERROR. Looking at the behaviour of Image.cc, it looks like the above functionality is not supported. In the load methods (load/loadFromBuffer), there is only support for PNG, GIF and JPEG.

I understood that there was already support for SVG. Does this include the above functionality?

• If so, would it be possible to indicate how I can resolve the above issue?
• If not, is there another way to convert an SVG data URL to a PNG image?

Test code

var svgString = `
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400" height="400" viewBox="0 0 100 100">
    <rect x="0" y="0" width="100" height="100" fill="green"></rect>
    <rect x="0" y="0" width="50" height="50" fill="blue"></rect>
  </svg>
`.trim();

var svgData = 'data:image/svg+xml;charset=utf-8,' + svgString;

var svg = new Canvas.Image;
svg.onload = function() {
    console.log("TODO create png from svg image");
}
svg.onerror = function(error) {
    console.log("ERROR: " + error);
};
svg.src = svgData;

[foysavas]

@FransBosuil please try out PR #811

[ankurp]

@foysavas That PR did not work

[foysavas]

@ankurp Ah, you're using a data url as the Image#src, which I don't think is yet supported. Try setting src to the svgString directly or to an SVG file buffer. Tell me if the PR works then.

[klaudia9]

Any plans to support this?

[petahz]

Works by converting to a file buffer.

[devtim123]

Does this works with [email protected]? And how to convert the SVG-Data to file-buffer?

[cpapidas]

Hello, can anyone give an example of how to make the following code work:

var svgString = `
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400" height="400" viewBox="0 0 100 100">
    <rect x="0" y="0" width="100" height="100" fill="green"></rect>
    <rect x="0" y="0" width="50" height="50" fill="blue"></rect>
  </svg>
`.trim();

var svgData = 'data:image/svg+xml;charset=utf-8,' + svgString;

var svg = new Canvas.Image;
svg.onload = function() {
    console.log("TODO create png from svg image");
}
svg.onerror = function(error) {
    console.log("ERROR: " + error);
};
svg.src = svgData;

[zbjornson]

@cpapidas I think that is correct, but you need the 2.x branch for it to work. Version 1.x has a bug where it assumes the data: URL is always base64.

[Hamms]

@zbjornson the code example above doesn't work for me with node-canvas=2.0.0-alpha.13 and node v8.10.0; I get ERROR: Error: error while reading from input stream.

Is this still an outstanding issue?

[zbjornson]

@Hamms you need at least 2.0.0-alpha.18 so that #1267 is included (but please use the stable releases now: 2.0.1).

[Hamms]

@zbjornson with node-canvas=2.0.1, I now get ERROR: Error: node-canvas was built without SVG support

This is on linux, with librsvg2-dev installed. Is there anything else I need to do to enable SVG support?

[zbjornson]

@Hamms sorry, forgot that prebuilds don't have SVG Support yet (node-gfx/node-canvas-prebuilt#59). Can you try npm install canvas --build-from-source? (Last I tried, yarn doesn't let you pass that flag, https://stackoverflow.com/questions/45758461.)