在功能为here的SVG g元素上使用feTurbulbulence过滤器

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

我注意到相同的图标在分辨率较低的屏幕上呈暗淡显示。

例如，这里是a screenshot from an HP Z24

与one from a 2018 MacBook Pro相比，图像尺寸不变

两个屏幕上的渐变填充效果相似，这使我得出结论，这与给定屏幕计算过滤器的方式有关。嵌入和图案化64位png图像的工作原理是一致的，但是该方法的图像尺寸为10倍。