Problem loading SVG with image element inside

[linev]

I have SVG which includes image element

This small script should load SVG image and convert into png buffer.

import { writeFileSync } from 'fs';
import { loadImage, createCanvas } from 'canvas';
let img = await loadImage('test1.svg');
const canvas = createCanvas(img.width, img.height, 'png');
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
let buf = canvas.toBuffer('image/png');
writeFileSync('test1.png', buf);
console.log(`Writing image ${img.width} x ${img.height} png file ${buf.byteLength}`);

But on png one do not see image - at the same time text is there

Is it known problem?

Your Environment

• Version of node-canvas: 2.11.2
• Environment: node v20.2.0 on Linux 64bit

[jordan-gillard]

There's a couple of things that could be the problem.

1) Check that the path to the test1.svg file is correct. Is this script in the root directory? Along with test1.svg? i.e. if the script is in src/script.js, and test1.svg is located at src/test1.svg, then try updating loadImage to loadImage('src/test1.svg') and running the script from the src/ directory. 2) Maybe it has something to do with how the browser handles svgs vs node-canvas. That could explain if you're able to load the image in one place but not another. You could try embedding test1.svg as a data URI, though this sounds kinda ugly.

[zbjornson]

This is probably a known issue: #1607. @linev could read through that issue and close this if it's a duplicate, please?

[linev]

@zbjornson

1607 Looks like related issue, but I do not have any errors like GdkPixbuf - may be on Linux they handled differently,

original issue found on Mac. And proposed solution in #1607 with newline wrapping does not help.