SVG rendered differently between [email protected] and [email protected]

[trungdq88]

Hi, thank you for building sharp. I want to report a possible bug:

SVG source:

<svg xmlns="http://www.w3.org/2000/svg" id="svg" width="512" height="512" viewport="0 0 512 512" version="1.1">
  <circle r="378" cx="256" cy="256" fill="transparent" stroke-dashoffset="0" stroke="#cccccc" stroke-width="300px"/>
  <circle r="378" cx="256" cy="256" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0" stroke="#4f80ee" stroke-width="300px" style="stroke-dasharray: 2375; stroke-dashoffset: 1306.25; transform: rotate(-90deg);
    transform-origin: center;"/>
</svg>

[email protected] output (reproducible source code):

[email protected] output (reproducible source code):

Output by web browser preview:

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.

If you cannot confirm both of these, please open an installation issue instead.

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.

If you cannot confirm this, please upgrade to the latest version and try again before opening an issue.

If you are using another package which depends on a version of sharp that is not the latest, please open an issue against that package instead.

What is the output of running npx envinfo --binaries --system --npmPackages=sharp --npmGlobalPackages=sharp?

  System:
    OS: macOS 12.3
    CPU: (10) arm64 Apple M1 Max
    Memory: 58.94 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v16.14.0/bin/yarn
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
  npmPackages:
    sharp: ^0.30.4 => 0.30.4

What are the steps to reproduce?

See the source code:

• https://github.com/trungdq88/sharp-issue-29
• https://github.com/trungdq88/sharp-issue-30

What is the expected behaviour?

Should render the same like the one shown in the browser

Please provide a minimal, standalone code sample, without other dependencies, that demonstrates this problem

const sharp = require('sharp');

sharp(
  Buffer.from(`
<svg xmlns="http://www.w3.org/2000/svg" id="svg" width="512" height="512" viewport="0 0 512 512" version="1.1">
  <circle r="378" cx="256" cy="256" fill="transparent" stroke-dashoffset="0" stroke="#cccccc" stroke-width="300px"/>
  <circle r="378" cx="256" cy="256" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0" stroke="#4f80ee" stroke-width="300px" style="stroke-dasharray: 2375; stroke-dashoffset: 1306.25; transform: rotate(-90deg);
    transform-origin: center;"/>
</svg>
`)
)
  .png()
  .toFile('output.png');

Please provide sample image(s) that help explain this problem

[email protected] output (reproducible source code):

[email protected] output (reproducible source code):

[lovell]

This can be reproduced at the command line using the latest v2.54.1 of rsvg-convert.

docker run -it --rm -v "$PWD:/opt/tmp" alpine:edge /bin/sh -c "apk add librsvg && cd /opt/tmp && rsvg-convert input.svg >output.png"

Please can you report this upstream at https://gitlab.gnome.org/GNOME/librsvg/-/issues

[lovell]

This is due to the lack of transform-origin: center support. We can continue to track this at the existing #2884