Automattic / Automattic/node-canvas

Style tags not respected

Open
#2,249 0 comments 0 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

## 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 trying to convert an svg to jpeg and some of the styles are getting stripped off for some reason. Could this be due to Cairo only supporting svg 1.1? https://cairosvg.org/documentation/

## Steps to Reproduce
Here is the svg that renders correctly in the browser being gray, but after the image conversion it goes back to the default blue styles.
```

```

And here is the essence of my code:
```js
const svgBuffer = svg instanceof Buffer ? svg : Buffer.from(svg);

const canvas = createCanvas(3000, 2000);
const canvasContext = canvas.getContext('2d');
// canvasContext.fillStyle = 'white';
// canvasContext.fillRect(0, 0, canvas.width, canvas.height);

await loadImage(svgBuffer).then((image) => {
canvasContext.drawImage(image, 0, 0);
});

const imageOutput = canvas.toBuffer('image/jpeg');

return imageOutput;
};
```

## Your Environment
* Version of node-canvas (output of `npm list canvas` or `yarn list canvas`): npm canvas@2.11.2
* Environment (e.g. node 4.2.0 on Mac OS X 10.8): node v14.20.0 MacOS 12.6

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the SVG-to-JPEG conversion with the SVG included in the issue and compare it with the browser rendering. Trace how the embedded style tags are handled during conversion; done means the converted JPEG preserves the styles shown in the browser.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, node.js
Domain
computer-graphics
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.