Support character reference " in urls e.g. url("#foo")

[rob-myers]

The popular online SVG editor BoxySVG output files like:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <radialGradient gradientUnits="userSpaceOnUse" cx="50" cy="50" r="25" id="gradient-0">
      <stop offset="0" style="stop-color: rgb(84.706% 84.706% 84.706%)"/>
      <stop offset="1" style="stop-color: rgb(48.42% 48.42% 48.42%)"/>
    </radialGradient>
  </defs>
  <rect x="25" y="25" width="50" height="50"
     style="stroke: rgb(0, 0, 0); fill: url(&quot;#gradient-0&quot;);"
   />
</svg>

Please notice the:

fill: url("#gradient-0")

which is apparently valid SVG code although it is not valid CSS code.

Problem:

If we loadImage(svgPath) then drawImage(image) we get a black square i.e no gradient.

Changing url("#gradient-0") to url(#gradient-0), the gradient works as expected.

Request:

Handle this valid syntax in loadImage.

Technically, we can load SVG contents, remove such "character references" then construct a data-url. Preferably this would be handled automatically by @napi-rs/canvas, just like the npm module canvas.

[rob-myers]

There's a workaround if you only want to load an image.

Use canvas (node-canvas) to load the image, draw into canvas, and construct a data-url.
The latter data-url can be loaded into @napi-rs/canvas.

It seems node-canvas loadImage supports far more features.

[Brooooooklyn]

This should be a skia issue, I can't resolve it in my side

[rob-myers]

Ok thanks @Brooooooklyn. Where would I raise an issue?

[Brooooooklyn]

https://skia.googlesource.com/skia