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 graphic gets really pixelated and loses all it's sharpness. When the filter is not applied, the SVG renders fine. Is there any way to fix that besides to pass on the filter?

Answer 1

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

Answer 2

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!

Answer 3

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 4

It's 2021 and it's still relevant. I found a workaround that worked for me: You can enlarge the svg and then use a css-transform to scale it back:

.section_logo img {
    height: 500%;
    transform-origin: top left;
    transform: scale(0.2);
}