SVG с размытыми тенями в мобильном браузере

Question

Я изо всех сил стараюсь заставить работать иконки SVG с падающей тенью на максимально возможном количестве платформ.

Я использую следующий простой CSS для этого:

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

В настольных браузерах, таких как Chrome, Firefox и IE, все работает хорошо. Но в мобильном браузере начинаются проблемы: в Chrome значок становится размытым, а в Firefox тень просто игнорируется. При удалении тени в Chrome значок снова станет четким, поэтому я думаю, что он имеет что-то общее с тенью.

У кого-нибудь была такая же проблема, и, может быть, нашли решение для этого?

Answer 1

Просто нашел ответ за это.
Эта проблема возникает из-за способа создания SVG-фильтров: перед применением фильтра создается растровое изображение соответствующего элемента, которое затем обрабатывается и накладывается сверху. Вы можете найти отличное объяснение здесь.

Чтобы показать четкие изображения SVG на экранах HDPI, вы можете попробовать использовать filterResсобственность на effect, который обеспечивает разрешение в пикселях для вычисленных SVG-эффектов, подробнее об этом здесь.
Используйте это так:

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

Скажи ты добавляешь background-size: contain на ваш css - нарисованный контейнер предположительно будет 14px x 14px, Чтобы визуализировать тень с достаточным разрешением для дисплеев сетчатки (например, фактор 2), вы должны принять здоровое значение 30 за filterRes, Это не идеально, но кажется, что это единственная работающая альтернатива на данный момент. Вид поражений причина использования svg вообще.