Проблемы с отображением SVG-фильтра на экранах с низким разрешением

Question

Использование фильтра feTurbulence на элементе SVG g, представленном здесь

<filter  color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" height="100%" id="noiseMatrix3" width="100%" x="0%" y="0%">
<feTurbulence  baseFrequency="0.2" numOctaves="1" result="f1" seed="2" stitchTiles="noStitch" type="fractalNoise">
    </feTurbulence> 
  <feColorMatrix  in="f1" result="f2" type="matrix" values="-11 0 0 0 6           
                                                            -11 0 0 0 6                
                                                            -11 0 0 0 6                 
                                                             0 0 0 0 1">
  </feColorMatrix>
<feColorMatrix  in="SourceGraphic" result="f4" type="saturate" values="1.6"></feColorMatrix>
<feComposite  in="f2" in2="f4" k1="1" k2="0" k3="0.8" k4="0" operator="arithmetic" result="f5"></feComposite>

Я заметил, что тот же значок плохо отображается на экранах с меньшим разрешением.

Например, вот скриншот с HP Z24

по сравнению с MacBook Pro 2018 года при постоянном размере изображения

Градиентная заливка отображается одинаково на обоих экранах, что приводит меня к выводу, что это связано с тем, как данный экран вычисляет фильтр. Встраивание и формирование паттернов в формате PNG с битом 64 работает стабильно, но этот метод дает размер изображения 10X.