Automattic / Automattic/node-canvas

SVG cannot load remote resource URLs (image links, fonts, etc.)

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

Description

## Issue or Feature
- [x] If this is an issue with installation, I have read the [troubleshooting guide](https://github.com/Automattic/node-canvas/issues/1511).

I'm having some issues when rendering an SVG file to PNG:

- The style font doesn't support loading from a CSS font:
```xml

@import url(https://d1wgzwi9vgtgm8.cloudfront.net/88/storage/personalizedDesign/fonts/SVN-Aptima/SVN-Aptima.css)

```

- If I register the font file path, it works: `registerFont()`
- The image link doesn't support loading from a URL:
```xml

```

## Steps to Reproduce

```js
const file = await fs.readFile(join(__dirname, 'input.svg'))
const image = new Image();
image.src = file;


const canvas = createCanvas(7800, 10000);
const ctx = canvas.getContext('2d');

ctx.drawImage(image, 0, 0);

const buffer = canvas.toBuffer('image/png');

fs.writeFileSync('output.png', buffer);
// etc.
```

```xml


















```

## Your Environment
* Version of node-canvas: canvas@2.11.2
* Environment: macOS 14.2.1

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.