SvgPicture image rendering error in flutter SvgPicture image rendering error in flutter flutter flutter

SvgPicture image rendering error in flutter


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.