SVG shadows and masks are aliasing

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.

1 Like

Here is the same with Affinity

another example:

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”?

1 Like

Here is the code of the svg

1 Like


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


and this is same hexagon, but no masking


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

I’m seeing the same issue on my end

1 Like

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??


Diamond gradient in Figma


Diamond gradient in produced SVG