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?

Swore

Answer 1

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

Ramirez

Yes, I saw that in another question with a similar problem, you suggested a value of 400. I just tried that, and I also tried much higher values, but it didn't change anything, I'm afraid. Also, the whole graphic gets pixelated, not only the shadow. – Swore

The "400" answer was a hack to reduce banding artifacts in firefox for windows - it was producing pixelation on purpose. You should be trying 1136 x 640 to see results on iPhone 5. That said - I've heard anecdotally that the SVG support in mobile safari hasn't been fully updated for retina, so the pixelation is a true bug, not just a mistake. – Ramirez

I have the same problem. Using filterRes basically makes the SVG resolution/size-dependent again, which eliminates the whole point of using SVG. There's an orphaned WebKit bug report: bugs.webkit.org/show_bug.cgi?id=119300 – Eames

filterRes has been deprecated by browsers and is in the process of being phased out, so you can't rely on it anymore. Also scale transforms that the browser decides to do on the GPU are usually bitmap based and will pixelate at high scales - even if you start with a vector graphic. – Ramirez

Answer 2

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.

Mazarin

This didn't quite work for me, it still appeared blurry as the soft edges from the shadowed element behind still bled outside the crisp front element – Funke

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!

Funke

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);
}

Enterotomy

It's a hack, but that's what you've got to do sometimes when a browser bug hasn't been fixed for years. This is the simplest work around yet, and I thank you! – Uribe