SvgPicture image rendering error in flutter

Question

im using svgPicture to show the image and every time at first it showing error and then it showing image.

SvgPicture.asset(
 'assets/Images/otpLogo.svg',
  height: SizeConfig.blockSizeVertical * 26,                      
),

and the error is

══╡ EXCEPTION CAUGHT BY SVG ╞═══════════════════════════════════════════════════════════════════════ I/flutter (18256): The following assertion was thrown in _getDefinitionPaint: I/flutter (18256): Failed to find definition for url(#paint0_linear)
I/flutter (18256): This library only supports and xlink:href references that are defined ahead of their I/flutter (18256): references. I/flutter (18256): This error can be caused when the desired definition is defined after the element referring to it I/flutter (18256): (e.g. at the end of the file), or defined in another file. I/flutter (18256): This error is treated as non-fatal, but your SVG file will likely not render as intended

Answer 1

I'm not sure if this is the exact problem since you did not provide the code to the SVG file but according to the error message, it says:

This error can be caused when the desired definition is defined after the element referring to it...

For me, anyway, the solution was to edit the SVG file and move the <defs> tag and all its contents up to just below the opening of the <svg> tag.

---

You can improve and optimize your SVG code structure by using this online tool. Then simply cut and paste the defs as explained above.

Nonetheless, there is still an open issue in the repo about this particular problem.

---

Sample Case:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
    <g fill="none" fill-rule="evenodd" transform="translate(8 6)">
        <mask id="prefix__b" fill="#fff">
            <use xlink:href="#prefix__a"/>
        </mask>
        <g fill="#FFF" mask="url(#prefix__b)">
            <path d="M0 0H24V24H0z" transform="translate(-8 -6)"/>
        </g>
    </g>
    <defs>
        <path id="prefix__a" d="M7.705 1.41L6.295 0 0.295 6 6.295 12 7.705 10.59 3.125 6z"/>
    </defs>
</svg>

Fixed version:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
    <defs>
        <path id="prefix__a" d="M7.705 1.41L6.295 0 0.295 6 6.295 12 7.705 10.59 3.125 6z"/>
    </defs>
    <g fill="none" fill-rule="evenodd" transform="translate(8 6)">
        <mask id="prefix__b" fill="#fff">
            <use xlink:href="#prefix__a"/>
        </mask>
        <g fill="#FFF" mask="url(#prefix__b)">
            <path d="M0 0H24V24H0z" transform="translate(-8 -6)"/>
        </g>
    </g>
</svg>

Note: Notice the changing position of the defs tag.

Answer 2

Before in my svg file:

<svg>
  <g>
     ...
  </g>
  <defs>
     ...
  </defs>
</svg>

After in my svg file:

<svg>
  <defs>
     ...
  </defs>
  <g>
     ...
  </g>
</svg>

Move <defs></defs> to up!