Automattic / Automattic/node-canvas

Problem loading SVG with image element inside

Open
#2,254 3 comments 2 reactions 0 assignees View on GitHub
SVG
Dominant language
JavaScript
Stars
10.7k
Forks
1.2k
Avg merge
4d 8h
Merged PRs (30d)
1

Description

I have SVG which includes `image` element

![test1](https://github.com/Automattic/node-canvas/assets/4936580/117d3eec-a342-43e6-b21c-4c1c76558cbb)

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

![test1](https://github.com/Automattic/node-canvas/assets/4936580/0f313a85-392d-4c0c-85d0-196f14b697c1)

Is it known problem?

## Your Environment
* Version of node-canvas: 2.11.2
* Environment: node v20.2.0 on Linux 64bit

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.