RazrFalcon / resvg

An SVG rendering library.
Mozilla Public License 2.0
2.61k stars 215 forks source link

PNG output rendering issue #760

Open aquaductape opened 1 month ago

aquaductape commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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