SVG: Drop-Shadow filter pixelates SVG on mobile Safari

Question

I am using a drop shadow filter inside an SVG file that is embedded using an img tag. On my MacBook, it looks fine in Safari. However, in mobile Safari, the gra

Answer 1

This problem is still relevant in 2018, and I've found a solution. You can duplicate the element you give the filter to, place it below the actual element, and keep filter only on it, without any filter on the element. This way, Safari and other browsers will only rasterise the element with the shadow when resizing, however it will be hidden by the sharp-looking vector element. You can see examples and read more here.

Answer 2

You should try explicitly setting the "filterRes" attribute of the filter to a value that matches retina displays.

Answer 3

Unfortunately I tried all the suggested workarounds for this, none of them worked, the only thing that worked for me was putting the svg inline, not as an img tag.

Surprised this issue appears to have been around for so long!