SVG with drop-shadow blurry on mobile browser

Question

i am struggling to make work SVG icons with drop-shadow on as much as possible platforms.

I am using following simple CSS for that:

.test{
  width: 14px;
  height: 14px;
  background-image: url("../images/test.svg");
  background-repeat: no-repeat;
  opacity: 0.8;
  -webkit-filter: drop-shadow(1px 1px 0px #E0E0E0);
}

On Desktop browsers like Chrome, Firefox & IE its working good. But on mobile Browser the problems begin: In Chrome the icon gets blurry & in Firefox the drop-shadow is just ignored. When removing the drop-shadow, the icon will be clear again in Chrome, so i think it has something in common with the drop-shadow.

Anyone had the same problem and found maybe a solution for this?

Please file a bug at http://crbug.com including a testcase and more details on which versions it affects. — Erik Dahlström, Aug 18 '14 at 09:34
I just stumbled across the same problem, nobody else seems to be aware of it, though... — Moritz Friedrich, Feb 09 '15 at 21:56
Yes I'm surprised the lack of info about this bug, especially as it was flagged years ago..!? — 00-BBB, Feb 04 '20 at 10:42

score 6 · Answer 1 · answered Feb 09 '15 at 22:21

Just found the answer for it.
This problem occurs due to the way SVG filters are generated: Before a filter is applied, a bitmap image of the respective element is created which is then manipulated and layered on top. You can find a great explanation here.

To show svg images sharp on HDPI screens, you can try using the filterRes-property on the effect, which provides a pixel resolution for calculated svg effects, more on that here.
Use it like so:

<filter id="dropshadow" height="170%" filterRes="200">
  <feGaussianBlur in="SourceAlpha" stdDeviation="20"/>
  <feOffset dx="0" dy="2" result="offsetblur"/>
  <feMerge> 
    <feMergeNode/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
<path id="icon" fill="#fff" style="filter:url(#dropshadow)" d="..."></path>
</svg>

Say you add background-size: contain to your css - the drawn container will presumably be 14px x 14px. To render the shadow with sufficient resolution for retina displays (eg. factor 2), you should take a healthy value of 30 for filterRes. This is not ideal, but it seems like it is the only working alternative at the moment. Kind of defeats the reason for using svg at all.

This has no effect for me, safari 12.1.1. filterRes is deprecated now https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/filterRes — 00-BBB, Feb 04 '20 at 10:41

SVG with drop-shadow blurry on mobile browser

1 Answers1

Linked