SVG shadows and masks are aliasing

[antsav]

Exporting simple circle with shadow to SVG.
On retina display saw aliasing of edge, that is above the shadow.
Did screenshot, zoomed and clearly aliasing is visible.
It’s even more obvious on mobile devices if SVG is brought into app or web.
Tried doing the same with Affinity and Illustrator > no aliasing.

[antsav]

Here is the same with Affinity

[antsav]

another example:

[Milan_Raring]

I have the same problem. It looks like the inner-shadow and drop-shadow are rendered as “feBlend” in the SVG. This seems to be the cause of the problems. Does anyone have an idea how I can export it without “feBlend”?

[Milan_Raring]

Here is the code of the svg

[antsav]

masked are having same problem.
check orange squares , even rounded corners are not aliasing , but hexagon , while being a mask - aliasing…

[antsav]

and this is same hexagon, but no masking

[antsav]

another example , one shape has shadow, all others don’t

[Fritz_Riha]

I’m seeing the same issue on my end

[antsav]

Another example:

A - how it’s in Figma (paying attention to shadow and gradient on green area)

B - Shadow causing aliasing

C - removed shadow in Figma and applied CSS filter: drop-shadow manually.
C - where is the diamond gradient on the green area??

[antsav]

Diamond gradient in Figma

Diamond gradient in produced SVG

[Drew5]

Same thing for me. So is the only solution to get rid of all masks and add drop-shadows as custom CSS in the code? Seems like so much effort.