В настоящее время я использую встроенную систему SVG с определениями в верхней части документа, а затем показываю значки так:
<svg>
<use href="#icon" filter="url(#myFilter)"></use>
</svg>
Однако, чтобы разрешить использование фильтров (таких как тени) в Internet Explorer 10-11, я в настоящее время применяю встроенный filter="url(....)" к элементу <use> - и пока он работает как шарм.
Однако я не совсем уверен, является ли это допустимым методом?
Видимо, применение встроенного filter="url(...)" к элементу <svg> с использованием этого метода не не применяет фильтр правильно в IE10-11.
Код, который не работает в IE10 +
<svg filter="url(#myFilter)">
<use href="#icon"></use>
</svg>