Gradient rendering quality issue

[batya239]

Hi, Jannis! we have issues while rendering gradient images using jsvg: the gradient looks stepped. We compared rendering of the same image with JCEF (which is literally Chrome) and it looks better there. Original ticket https://youtrack.jetbrains.com/issue/IJPL-148957.

example image attached:

<svg width="640" height="500" viewBox="0 0 640 500" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#clip0_1_12395)">
        <rect width="640" height="500" fill="#2B2D30" />
        <g clip-path="url(#clip1_1_12395)">
            <g opacity="0.4" filter="url(#filter0_f_1_12395)">
                <ellipse cx="87" cy="24" rx="300" ry="375" transform="rotate(-90 87 24)"
                    fill="url(#paint0_radial_1_12395)" />
            </g>
            <g opacity="0.5" filter="url(#filter1_f_1_12395)">
                <ellipse cx="338" cy="53" rx="250" ry="450" transform="rotate(-90 338 53)"
                    fill="url(#paint1_radial_1_12395)" />
            </g>
            <g opacity="0.4" filter="url(#filter2_f_1_12395)">
                <ellipse cx="645" cy="310" rx="275" ry="300" transform="rotate(-90 645 310)"
                    fill="url(#paint2_radial_1_12395)" />
            </g>
        </g>
    </g>
    <defs>
        <filter id="filter0_f_1_12395" x="-388" y="-376" width="950" height="800"
            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix" />
            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
            <feGaussianBlur stdDeviation="50" result="effect1_foregroundBlur_1_12395" />
        </filter>
        <filter id="filter1_f_1_12395" x="-212" y="-297" width="1100" height="700"
            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix" />
            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
            <feGaussianBlur stdDeviation="50" result="effect1_foregroundBlur_1_12395" />
        </filter>
        <filter id="filter2_f_1_12395" x="245" y="-65" width="800" height="750"
            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix" />
            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
            <feGaussianBlur stdDeviation="50" result="effect1_foregroundBlur_1_12395" />
        </filter>
        <radialGradient id="paint0_radial_1_12395" cx="0" cy="0" r="1"
            gradientUnits="userSpaceOnUse"
            gradientTransform="translate(87 24) rotate(-178.698) scale(300.077 375.027)">
            <stop stop-color="#FD630D" />
            <stop offset="1" stop-color="#27282E" stop-opacity="0" />
        </radialGradient>
        <radialGradient id="paint1_radial_1_12395" cx="0" cy="0" r="1"
            gradientUnits="userSpaceOnUse"
            gradientTransform="translate(433.912 8.95753) rotate(-159.766) scale(317.424 291.85)">
            <stop stop-color="#FE2875" />
            <stop offset="1" stop-color="#27282E" stop-opacity="0" />
        </radialGradient>
        <radialGradient id="paint2_radial_1_12395" cx="0" cy="0" r="1"
            gradientUnits="userSpaceOnUse"
            gradientTransform="translate(667.449 419.787) rotate(-77.6982) scale(329.262 235.542)">
            <stop stop-color="#0068FD" />
            <stop offset="1" stop-color="#27282E" stop-opacity="0" />
        </radialGradient>
        <clipPath id="clip0_1_12395">
            <rect width="640" height="500" fill="white" />
        </clipPath>
        <clipPath id="clip1_1_12395">
            <rect width="1065.08" height="1168.26" fill="white" transform="translate(-410 -102)" />
        </clipPath>
    </defs>
</svg>

[weisJ]

Could you please provide the svg source for the image? Also did you test this with the newest version of the library? The version IntelliJ uses is quite a bit behind latest.

[stanio]

Could you please provide the svg source for the image

As far as I see the attached image is a SVG source (vs. a rendered bitmap), and I can also see Fx rendering it with visible steps vs. Edge rendering it (more) smoothly, for comparison:

Firefox	MS-Edge

[weisJ]

Ah I hadn't noticed that it is actually an SVG. I suppose this might be related due to bit-depth limitations during interpolation. Awt (and probably FX aswell) do their interpolation with 32bit colors (8-bit color channels).