带过滤器的SVG在iOS上显得模糊（在<img/>标签中）

Question

我一直在试验SVG过滤器，但无法弄清楚如何解决这个问题：我有一个使用过滤器效果的SVG，如feBlend：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="70 0 360 360">
  <defs>
    <path id="orange" d="M200,50 a35 35 0 0 1 100 0 l0 70 a40 40 0 0 1 -100 0 z" fill="rgb(252,170,30)"></path>
    <path id="yellow" transform="rotate(45 250 185)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(242,229,0)">
      <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 250 180" to="45 250 180" dur="1.5s" additive="replace" fill="freeze"/>
    </path>
    …

    <filter id="blendit">
      <feImage xlink:href="#orange" x="0" y="0" result="1"/>
      <feImage xlink:href="#yellow" x="0" y="0" result="2"/>
      …

      <feBlend mode="multiply" in="1" in2="2" result="12"/>
      <feBlend mode="multiply" in="12" in2="3" result="123"/>
      …
    </filter>
  </defs>
  <rect x="0" y="0" width="500" height="500" filter="url(#blendit)"/>
</svg>

当作为内联SVG包含在页面上时，图形在iOS视网膜屏幕上显示清晰。

但是，如果我尝试将其用作<img>标记的来源：

<img src='svg-with-filters.svg'/>

图形显得模糊，好像它是视网膜屏幕上的@ 1x资源。

如何强制图形在iOS上显得清晰，而不使用内嵌SVG或<object>标记？它可以在桌面Chrome和Android设备上正确呈现。

实施例

这里有CodePen that demonstrates the problem，以及下面的屏幕截图。