Why does Mozilla Firefox display SVG icon incorrectly?

Question

css

In all browsers it is displayed normally and it is wrong in Firefox. Here is a screenshot:

Here is the icon code for everyone:

<svg width="12" height="16" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="canvas" transform="translate(443 345)">
    <g id="search-icon">
      <g id="line">
        <use xlink:href="#path0_stroke" transform="matrix(0.496024 0.868309 -0.863711 0.503987 -435.439 -336.055)"/>
      </g>
      <g id="ellipse">
        <mask id="mask0_outline_ins">
          <use xlink:href="#path1_fill" fill="white" transform="translate(-443 -345)"/>
        </mask>
        <g mask="url(#mask0_outline_ins)">
          <use xlink:href="#path2_stroke_2x" transform="translate(-443 -345)"/>
        </g>
      </g>
     </g>
  </g>
  <defs>
    <path id="path0_stroke" d="M 0.00980265 1.06793L 6.94346 0.99996L 6.92386 -0.999944L -0.00980265 -0.931972L 0.00980265 1.06793Z"/>
    <path id="path1_fill" d="M 11 5.55871C 11 8.62869 8.53756 11.1174 5.5 11.1174C 2.46243 11.1174 0 8.62869 0 5.55871C 0 2.48872 2.46243 0 5.5 0C 8.53756 0 11 2.48872 11 5.55871Z"/>
    <path id="path2_stroke_2x" d="M 8.99999 5.55871C 8.99999 7.5442 7.41302 9.11741 5.5 9.11741L 5.5 13.1174C 9.6621 13.1174 13 9.71319 13 5.55871L 8.99999 5.55871ZM 5.5 9.11741C 3.58697 9.11741 2 7.5442 2 5.55871L -2 5.55871C -2 9.71319 1.3379 13.1174 5.5 13.1174L 5.5 9.11741ZM 2 5.55871C 2 3.57321 3.58697 2 5.5 2L 5.5 -2C 1.3379 -2 -2 1.40422 -2 5.55871L 2 5.55871ZM 5.5 2C 7.41302 2 8.99999 3.57321 8.99999 5.55871L 13 5.55871C 13 1.40422 9.6621 -2 5.5 -2L 5.5 2Z"/>
  </defs>
</svg>

Answer 1

In general, your SVG file is monstrously complicated.
Why does it use a mask, some complex strokes, a viewport smaller than the size of objects, and so on? Every overkill like that has the potential to impact rendering (although ideally it shouldn't, but if there's a chance something goes wrong, they bump it up a notch).