loadImage with SVG data URL not working

[aarondoet]

Issue

I am drawing multiple images, where some are stored as data URL and some are stored as SVG code. While developing I was mainly using the browser and not the server, I only tested that later and noticed, that some images don't draw. The issue is: whereas the data:image/png;base64,... URLs are working, my SVGs are not drawn.

I have tested, when loading the SVG from a file it does work, but using a data URL does not. Using a Buffer does work, but it does require me to differentiate between rendering on the server and on the client, data URLs do work on the client only and Buffers work on the server only.

Steps to Reproduce

var Canvas = require('canvas');
var canvas = Canvas.createCanvas(200, 200);
var ctx = canvas.getContext('2d');
var svgCode = `<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" viewBox="0 0 24 24"><path d="M11.906 1.994a8.002 8.002 0 0 1 8.09 8.421 7.996 7.996 0 0 1-1.297 3.957.996.996 0 0 1-.133.204l-.108.129c-.178.243-.37.477-.573.699l-5.112 6.224a1 1 0 0 1-1.545 0L5.982 15.26l-.002-.002a18.146 18.146 0 0 1-.309-.38l-.133-.163a.999.999 0 0 1-.13-.202 7.995 7.995 0 0 1 6.498-12.518ZM15 9.997a3 3 0 1 1-5.999 0 3 3 0 0 1 5.999 0Z" clip-rule="evenodd" fill-rule="evenodd"></path></svg>`;
var img = await loadImage(`data:image/svg+xml,${encodeURIComponent(svgCode)}`);
ctx.drawImage(img, 0, 0);

Error: Unsupported image type
    at setSource (.../node_modules/canvas/lib/image.js:94:13)
    at Image.set (.../node_modules/canvas/lib/image.js:40:9)
    at .../node_modules/canvas/index.js:34:15

Your Environment

• canvas@2.11.2
• node 22.8.0
• Ubuntu 20.04.6 LTS

[SKYE6IX]

Were you able to solved this issue ?

[ldeluigi]

I have the same issue. With canvas 2.x this problem doesn't arise, and additionally you could even pass a svg url to loadImage and it still worked

[ldeluigi]

This issue is making my node server crash on both linux (Docker) and Windows (host)

[chearon]

var img = await loadImage(`data:image/svg+xml,${encodeURIComponent(svgCode)}`);

The mime type you're using is data:image/svg+xml, so why did you URI-encode it? The correct way is either:

var img = await loadImage(`data:image/svg+xml,${svgCode}`);

Or:

var img = loadImage(`data:image/xml;base64,${btoa(svgCode)}`);

node-canvas also doesn't support SVGs without [width] and [height], so you need to add that. Altogether:

var Canvas = require('canvas');
var canvas = Canvas.createCanvas(200, 200);
var ctx = canvas.getContext('2d');
var svgCode = `<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" viewBox="0 0 24 24" width="24" height="24"><path d="M11.906 1.994a8.002 8.002 0 0 1 8.09 8.421 7.996 7.996 0 0 1-1.297 3.957.996.996 0 0 1-.133.204l-.108.129c-.178.243-.37.477-.573.699l-5.112 6.224a1 1 0 0 1-1.545 0L5.982 15.26l-.002-.002a18.146 18.146 0 0 1-.309-.38l-.133-.163a.999.999 0 0 1-.13-.202 7.995 7.995 0 0 1 6.498-12.518ZM15 9.997a3 3 0 1 1-5.999 0 3 3 0 0 1 5.999 0Z" clip-rule="evenodd" fill-rule="evenodd"></path></svg>`;
var img = await loadImage(`data:image/svg+xml,${svgCode}`);
ctx.drawImage(img, 0, 0);

[chearon]

I was wrong, there is a problem. Of course it should be URI-encoded, it's in a URI 🤦‍♂️. Fixing that is going to have to wait until 4.0 since it might break people's code, though.