Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Failed to output png from svg with mask #4251

Open
4 tasks done
piusyikyu opened this issue Nov 1, 2024 · 2 comments
Open
4 tasks done

Failed to output png from svg with mask #4251

piusyikyu opened this issue Nov 1, 2024 · 2 comments

Comments

@piusyikyu
Copy link

piusyikyu commented Nov 1, 2024

Possible bug

Is this a possible bug in a feature of sharp, unrelated to installation?

  • Running npm install sharp completes without error.
  • [x ] Running node -e "require('sharp')" completes without error.

Are you using the latest version of sharp?

  • 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) to switch this feature off.

  • 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() operation.

  • To retain EXIF Orientation use keepExif().

  • 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:

expected

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

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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1015 1015" width="1015" height="1015" style="width: 100%; height: 100%; transform: translate3d(0,0,0); content-visibility: visible;" preserveAspectRatio="xMidYMid meet">
  <defs>

    <radialGradient id="1" spreadMethod="pad" gradientUnits="userSpaceOnUse" cx="-1" cy="-0.5" r="1" fx="-1" fy="-0.5">
      <stop offset="0%" stop-color="rgb(255,0,0)" stop-opacity="1"/>
      <stop offset="100%" stop-color="rgb(255,0,0)" stop-opacity="0"/>
    </radialGradient>

    <mask id="2" mask-type="alpha">
      <g style="display: block;" transform="matrix(1,0,0,1,1,1)" opacity="1">
        <g opacity="1" transform="matrix(1,0,0,1,507.5,507.5)">
          <path fill="rgb(0,0,0)" fill-opacity="1" d=" M507.5,-507.5 C507.5,-507.5 507.5,507.5 507.5,507.5 C507.5,507.5 -507.5,507.5 -507.5,507.5 C-507.5,507.5 -507.5,-507.5 -507.5,-507.5 C-507.5,-507.5 507.5,-507.5 507.5,-507.5z"/>
        </g>
      </g>
    </mask>

  </defs>

  <rect width="1015" height="1015" fill="#ffffff"/>

  <g mask="url(#2)">
      <!-- You can use solid fill if you want to -->
      <path fill="url(#1)" fill-opacity="1" transform="matrix(508,507,-507,508,256,762)" d=" M3589,-3590 C3589,-3590 3589,3589 3589,3589 C3589,3589 -3591,3589 -3591,3589 C-3591,3589 -3591,-3590 -3591,-3590 C-3591,-3590 3589,-3590 3589,-3590"/> 
  </g>

</svg>

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

Current output from code above

test-out

@lovell
Copy link
Owner

lovell commented Nov 1, 2024

This can be reproduced using the latest version 2.59.2 of the rsvg-convert command line tool:

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

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

@piusyikyu
Copy link
Author

https://gitlab.gnome.org/GNOME/librsvg/-/issues/1139

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants