lovell / lovell/sharp

Resizing SVG with drop-shadow filter and <= 0.31 scale factor removes path

Open
#4,396 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

blocked-upstream-dependency bug
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 6.11 Alpine Linux
CPU: (20) x64 12th Gen Intel(R) Core(TM) i9-12900HK
Memory: 25.97 GB / 62.47 GB
Container: Yes
Shell: Unknown - /bin/sh
Binaries:
Node: 23.11.0 - /usr/local/bin/node
npm: 10.9.2 - /usr/local/bin/npm
npmPackages:
sharp: ^0.34.1 => 0.34.1
```

### 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).

- [ ] Using `rotate()` or `keepExif()` does not fix this problem.

### What are the steps to reproduce?

Given the following svg file

```

```

When resizing the SVG image under a certain size, the output is empty,
Resizing to 320x160 works

![Image](https://github.com/user-attachments/assets/3d27b060-1e36-4336-840e-f602db9c951d)

but it fails for 310x155

![Image](https://github.com/user-attachments/assets/8e54a551-6f5a-427e-9d29-0bf0d9972975)

```
sharp.cache(false)

sharp('./input.svg')
.resize(320, 160)
.png()
.toFile('./320x160.png');

sharp('./input.svg')
.resize(310, 155)
.png()
.toFile('./310x155.png');

```

### What is the expected behaviour?

When calling `.resize(310, 155)` the image generated should not be blank.

Side note: when the image does not have the filter `drop-shadow(1px 2px 2px rgb(0 0 0 / 0.4)`, it does not have the same issue.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the supplied input.svg and the two sharp resize calls for 320x160 and 310x155, then reproduce the blank output with the drop-shadow filter enabled. Compare the result with the same SVG without that filter. Done means resizing to 310x155 produces a non-blank image while preserving the expected path.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nodejs
Domain
computer-graphics
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.