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

PNG output rendering issue #760

Open
aquaductape opened this issue May 12, 2024 · 2 comments
Open

PNG output rendering issue #760

aquaductape opened this issue May 12, 2024 · 2 comments
Labels

Comments

@aquaductape
Copy link

The input svg file is a circle with gradients. The issue is that on the output png file, on the very right of the circle the gradient is cut off showing a sharp line.

Input svg file.
Screenshot 2024-05-01 at 3 12 20 PM
Output png file.
Screenshot 2024-05-01 at 3 13 08 PM

Input svg code.

<svg
  data-hk="undefinedNaN-0"
  viewBox="0 0 80 80"
  fill="none"
  role="img"
  xmlns="http://www.w3.org/2000/svg"
  width="80"
  height="80"
>
  <!--$--><!--/-->
  <defs>
    <filter
      id="filter_0"
      filterUnits="userSpaceOnUse"
      color-interpolation-filters="sRGB"
    >
      <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
      <feBlend
        in="SourceGraphic"
        in2="BackgroundImageFix"
        result="shape"
      ></feBlend>
      <feGaussianBlur
        stdDeviation="7"
        result="effect1_foregroundBlur"
      ></feGaussianBlur>
    </filter>
  </defs>
  <mask id="0" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80">
    <rect width="80" height="80" rx="160" fill="#FFFFFF"></rect>
  </mask>
  <g mask="url(#0)">
    <rect width="80" height="80" fill="#49007E"></rect>
    <path
      filter="url(#filter_0)"
      d="M32.414 59.35L50.376 70.5H72.5v-71H33.728L26.5 13.381l19.057 27.08L32.414 59.35z"
      fill="#FF005B"
      transform="translate(-2 2) rotate(-282 40 40) scale(1.5)"
    ></path>
    <path
      filter="url(#filter_0)"
      style="mix-blend-mode: overlay"
      d="M22.216 24L0 46.75l14.108 38.129L78 86l-3.081-59.276-22.378 4.005 12.972 20.186-23.35 27.395L22.215 24z"
      fill="#FF7D10"
      transform="translate(-3 -3) rotate(-243 40 40) scale(1.5)"
    ></path>
  </g>
</svg>
@LaurenzV
Copy link
Contributor

Seems to be some weird interaction between filter and mask. A bit more of a reduced example:

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="filter_0" filterUnits="userSpaceOnUse">
            <feGaussianBlur stdDeviation="7" />
        </filter>
    </defs>
    <mask id="0" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80">
        <rect width="80" height="80" rx="160" fill="#FFFFFF"></rect>
    </mask>
    <g mask="url(#0)">
        <path
                filter="url(#filter_0)"
                d="M32.414 59.35L50.376 70.5H72.5v-71H33.728L26.5 13.381l19.057 27.08L32.414 59.35z"
                fill="#FF005B"
                transform="translate(-2 2) rotate(-282 40 40) scale(1.5)" />
        <path
                filter="url(#filter_0)"
                d="M22.216 24L0 46.75l14.108 38.129L78 86l-3.081-59.276-22.378 4.005 12.972 20.186-23.35 27.395L22.215 24z"
                fill="#FF7D10"
                transform="translate(-3 -3) rotate(-243 40 40) scale(1.5)" />
    </g>
</svg>

Chrome:
image

resvg:
test

@RazrFalcon
Copy link
Collaborator

I guess some transform got ignored. Will take a look.

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

No branches or pull requests

3 participants