Failed to output png from svg with mask
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 32.7k
- Forks
- 1.4k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 5
Description
## Possible bug
### Is this a possible bug in a feature of sharp, unrelated to installation?
- [x] Running `npm install sharp` completes without error.
- [x ] Running `node -e "require('sharp')"` completes without error.
### Are you using the latest version of sharp?
- [x] I am using the latest version of `sharp` as reported by `npm view sharp dist-tags.latest`.
### What is the output of running `npx envinfo --binaries --system --npmPackages=sharp --npmGlobalPackages=sharp`?
```
System:
OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
CPU: (28) x64 Intel(R) Core(TM) i7-14700KF
Memory: 12.98 GB / 15.48 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 20.12.2 - ~/.asdf/installs/nodejs/20.12.2/bin/node
Yarn: 1.22.22 - ~/.asdf/installs/nodejs/20.12.2/bin/yarn
npm: 10.5.0 - ~/.asdf/plugins/nodejs/shims/npm
```
### Does this problem relate to file caching?
The default behaviour of libvips is to cache input files, which can lead to `EBUSY` or `EPERM` errors on Windows.
Use [`sharp.cache(false)`](https://sharp.pixelplumbing.com/api-utility#cache) to switch this feature off.
- [x] Adding `sharp.cache(false)` does not fix this problem.
### Does this problem relate to images appearing to have been rotated by 90 degrees?
Images that contain EXIF Orientation metadata are not auto-oriented. By default, EXIF metadata is removed.
- To auto-orient pixel values use the parameter-less [`rotate()`](https://sharp.pixelplumbing.com/api-operation#rotate) operation.
- To retain EXIF Orientation use [`keepExif()`](https://sharp.pixelplumbing.com/api-output#keepexif).
- [x] Using `rotate()` or `keepExif()` does not fix this problem.
### What are the steps to reproduce?
Simply load the svg and turn it into png from the code and file below.
Context:
The svg given below is a reduced form of a particular output from my project, so unluckily the usage of the mask here is required.
### What is the expected behaviour?
The expected output should be as following:

### Please provide a minimal, standalone code sample, without other dependencies, that demonstrates this problem
```ts
import * as fs from 'fs';
import { Buffer } from 'buffer';
import sharp from 'sharp';
async function main() {
const data = fs.readFileSync("./test.svg", { encoding: 'utf-8' });
sharp.cache(false)
await sharp(Buffer.from(data)).png().toFile(`./test-out.png`);
}
main();
```
`test.svg`
```svg
```
### Please provide sample image(s) that help explain this problem
Current output from code above

Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Run the provided Node.js sample with the embedded test.svg and compare test-out.png with the expected and current output images. Start by tracing sharp's SVG-to-PNG input path and its handling of the mask, then verify the corrected rendering against this standalone reproduction. Done means the mask renders as shown in the expected output without affecting the documented conversion flow.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, node.js
- Domain
- computer-graphics
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100