Support image in svg

[ducan-ne]

With this given svg file that contains a <image> element, @napi-rs/canvas currently render blank but it should be the image instead, not sure it's a bug or not yet implemented though

<svg width="800" height="400" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg"><mask id="satori_om-id"><rect x="0" y="0" width="800" height="400" fill="#fff"></rect></mask><rect x="0" y="0" width="800" height="400" fill="#fff"></rect><clipPath id="satori_cp-id-0"><rect x="363" y="-252" width="75" height="65"></rect></clipPath><mask id="satori_om-id-0"><rect x="363" y="-252" width="75" height="65" fill="#fff"></rect></mask><image x="363" y="-252" width="75" height="65" href="data:image/svg+xml;utf8,%3Csvg  fill=%22%23000%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%22NaN%22 height=%22null%22 viewBox=%220 0 75 65%22%3E%3Cpath d=%22M37.59.25l36.95 64H.64l36.95-64z%22%3E%3C/path%3E%3C/svg%3E" preserveAspectRatio="none" clip-path="url(#satori_cp-id-0)" mask="url(#satori_om-id-0)"></image><mask id="satori_om-id-0-0"><rect x="363" y="-252" width="0" height="65" fill="#fff"></rect></mask><clipPath id="satori_cp-id-1"><rect x="0" y="-187" width="800" height="800"></rect></clipPath><mask id="satori_om-id-1"><rect x="0" y="-187" width="800" height="800" fill="#fff"></rect></mask><image x="0" y="-187" width="800" height="800" href="https://wsrv.nl/?url=https://gist.github.com/ducan-ne/7e67570e5e1961411cae7215e006b381/raw/6cd65bc303b345fa0032c543e359c5cdf7e6150e/a.svg" preserveAspectRatio="none" clip-path="url(#satori_cp-id-1)" mask="url(#satori_om-id-1)"></image><mask id="satori_om-id-2"><rect x="304" y="653" width="193" height="0" fill="#fff"></rect></mask><path fill="black" d="M310.9 684L306.0 684L306.0 660.7L310.9 660.7L310.9 670.3L320.9 670.3L320.9 660.7L325.8 660.7L325.8 684L320.9 684L320.9 674.4L310.9 674.4L310.9 684ZM337.8 684.3L337.8 684.3Q335.1 684.3 333.1 683.2Q331.2 682.1 330.1 680.1Q329.1 678.1 329.1 675.4L329.1 675.4Q329.1 672.7 330.1 670.6Q331.2 668.6 333.1 667.5Q335 666.3 337.6 666.3L337.6 666.3Q339.3 666.3 340.8 666.9Q342.3 667.4 343.4 668.5Q344.5 669.6 345.1 671.3Q345.8 673.0 345.8 675.2L345.8 675.2L345.8 676.5L331.0 676.5L331.0 673.5L341.2 673.5Q341.2 672.5 340.8 671.7Q340.3 670.9 339.5 670.4Q338.7 669.9 337.6 669.9L337.6 669.9Q336.5 669.9 335.7 670.4Q334.9 670.9 334.4 671.8Q333.9 672.6 333.9 673.7L333.9 673.7L333.9 676.5Q333.9 677.8 334.4 678.8Q334.9 679.7 335.7 680.2Q336.6 680.7 337.8 680.7L337.8 680.7Q338.6 680.7 339.3 680.5Q340.0 680.3 340.5 679.8Q340.9 679.4 341.2 678.7L341.2 678.7L345.7 679Q345.3 680.6 344.3 681.8Q343.2 683.0 341.6 683.7Q339.9 684.3 337.8 684.3ZM348.9 660.7L353.8 660.7L353.8 684L348.9 684L348.9 660.7ZM357.6 660.7L362.5 660.7L362.5 684L357.6 684L357.6 660.7ZM374.2 684.3L374.2 684.3Q371.6 684.3 369.7 683.2Q367.7 682.1 366.7 680.1Q365.6 678.0 365.6 675.3L365.6 675.3Q365.6 672.6 366.7 670.6Q367.7 668.6 369.7 667.4Q371.6 666.3 374.2 666.3L374.2 666.3Q376.9 666.3 378.8 667.4Q380.7 668.6 381.8 670.6Q382.8 672.6 382.8 675.3L382.8 675.3Q382.8 678.0 381.8 680.1Q380.7 682.1 378.8 683.2Q376.9 684.3 374.2 684.3ZM374.2 680.6L374.2 680.6Q375.5 680.6 376.3 679.9Q377.1 679.2 377.5 678.0Q377.9 676.8 377.9 675.3L377.9 675.3Q377.9 673.8 377.5 672.6Q377.1 671.4 376.3 670.7Q375.5 670.0 374.2 670.0L374.2 670.0Q373.0 670.0 372.2 670.7Q371.4 671.4 371.0 672.6Q370.6 673.8 370.6 675.3L370.6 675.3Q370.6 676.8 371.0 678.0Q371.4 679.2 372.2 679.9Q373.0 680.6 374.2 680.6ZM387.2 680.8L391.2 680.8L391.1 682.1Q391.0 683.6 390.6 685.1Q390.1 686.6 389.7 687.8Q389.2 689.0 389.0 689.7L389.0 689.7L385.8 689.7Q386.0 689.0 386.3 687.8Q386.6 686.6 386.9 685.1Q387.1 683.6 387.2 682.1L387.2 682.1L387.2 680.8Z M413.2 684L408.4 684L401.8 660.7L407.1 660.7L411.0 676.9L411.2 676.9L415.4 660.7L420.0 660.7L424.3 676.9L424.5 676.9L428.3 660.7L433.7 660.7L427.0 684L422.3 684L417.8 668.8L417.6 668.8L413.2 684ZM442.2 684.3L442.2 684.3Q439.6 684.3 437.7 683.2Q435.7 682.1 434.7 680.1Q433.6 678.0 433.6 675.3L433.6 675.3Q433.6 672.6 434.7 670.6Q435.7 668.6 437.7 667.4Q439.6 666.3 442.2 666.3L442.2 666.3Q444.9 666.3 446.8 667.4Q448.7 668.6 449.8 670.6Q450.8 672.6 450.8 675.3L450.8 675.3Q450.8 678.0 449.8 680.1Q448.7 682.1 446.8 683.2Q444.9 684.3 442.2 684.3ZM442.3 680.6L442.3 680.6Q443.5 680.6 444.3 679.9Q445.1 679.2 445.5 678.0Q445.9 676.8 445.9 675.3L445.9 675.3Q445.9 673.8 445.5 672.6Q445.1 671.4 444.3 670.7Q443.5 670.0 442.3 670.0L442.3 670.0Q441.0 670.0 440.2 670.7Q439.4 671.4 439.0 672.6Q438.6 673.8 438.6 675.3L438.6 675.3Q438.6 676.8 439.0 678.0Q439.4 679.2 440.2 679.9Q441.0 680.6 442.3 680.6ZM458.8 684L454.0 684L454.0 666.5L458.7 666.5L458.7 669.6L458.9 669.6Q459.3 668.0 460.5 667.1Q461.6 666.3 463.1 666.3L463.1 666.3Q463.4 666.3 463.8 666.3Q464.3 666.4 464.6 666.5L464.6 666.5L464.6 670.8Q464.2 670.7 463.6 670.6Q463.0 670.5 462.5 670.5L462.5 670.5Q461.5 670.5 460.6 671.0Q459.8 671.4 459.3 672.2Q458.8 673.1 458.8 674.1L458.8 674.1L458.8 684ZM467.1 660.7L471.9 660.7L471.9 684L467.1 684L467.1 660.7ZM482.2 684.3L482.2 684.3Q480.2 684.3 478.6 683.3Q477 682.2 476.1 680.2Q475.1 678.2 475.1 675.3L475.1 675.3Q475.1 672.3 476.1 670.3Q477.1 668.3 478.7 667.3Q480.3 666.3 482.2 666.3L482.2 666.3Q483.7 666.3 484.6 666.8Q485.6 667.3 486.2 668.0Q486.8 668.8 487.2 669.5L487.2 669.5L487.3 669.5L487.3 660.7L492.1 660.7L492.1 684L487.4 684L487.4 681.2L487.2 681.2Q486.8 681.9 486.2 682.6Q485.6 683.4 484.6 683.8Q483.6 684.3 482.2 684.3ZM483.7 680.4L483.7 680.4Q484.9 680.4 485.7 679.8Q486.5 679.1 487.0 678.0Q487.4 676.8 487.4 675.3L487.4 675.3Q487.4 673.7 487.0 672.6Q486.5 671.4 485.7 670.8Q484.9 670.2 483.7 670.2L483.7 670.2Q482.5 670.2 481.7 670.8Q480.9 671.5 480.5 672.6Q480.1 673.8 480.1 675.3L480.1 675.3Q480.1 676.8 480.5 678.0Q480.9 679.1 481.7 679.8Q482.5 680.4 483.7 680.4Z "></path></svg>

Actual (browser render)

As is:

[ducan-ne]

npm:canvas seems like already supported this

import fs from 'node:fs'
import { createCanvas, loadImage } from 'canvas'

const canvas = createCanvas(1080, 1080)
const ctx = canvas.getContext('2d')

// Draw cat with lime helmet
loadImage('scripts/test-svg.svg').then((image) => {
  ctx.drawImage(image, 0, 0)

  fs.writeFileSync('scripts/test-svg.png', canvas.toBuffer('image/png'))
})

[nrkn]

Same here. I also get this in the console:

cannot append child nodes to this element.
can't render image: load image failed