Filtered SVGs seem fuzzy on iOS (in <img> tags)

Question

I experimented with SVG filters, but I can’t figure out how to fix it: I have an SVG that uses filter effects, such as 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>

When it is enabled on the page as an embedded SVG, the graphic display is displayed on the retina screen of iOS.

However, if I try to use it as a source for a tag <img>:

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

The graph seems fuzzy, as if it were a @ 1x resource on the retina screen.

How to make graphics look sharp on iOS without resorting to the built-in SVG or tag <object>? It displays correctly on Chrome desktops and Android devices.

Example

Here's a CodePen that demonstrates the problem , and a screenshot below.