Failed to find definition for url(#paint0_linear) in flutter

Question

I am using flame_svg: ^0.0.1 package from flutter for rendering svg when i try to load the svg it gives the below error

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

Answer 1

Go to your SVG file and you will find the <def> tag at the bottom of the JSON. you need to put that on the top after the <svg> tag.

    <svg width="329" height="248" viewBox="0 0 329 248" fill="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
    <radialGradient id="paint0_radial_4273_1881" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(419.65 197.242) scale(415.687 359.777)">
    <stop stop-color="#C760E0"/>
    <stop offset="0.5" stop-color="#9441A8"/>
    <stop offset="1" stop-color="#6C297C"/>
    </radialGradient>
    </defs>
.....
<\svg>

Answer 2

As suggested on the logs provided, it seems that the SVG that you're trying to display is unsupported:

flutter: This library only supports <defs> and xlink:href references that are defined ahead of their 
flutter: references.

Make sure that the SVG that you're trying to load has the supported tags. You can try loading a different SVG and see if it can be displayed.

Answer 3

Move <defs> tag below the end of opening <svg>. It will solve Svg Rendering error especially when you use gradient svg in flutter_svg package.

<svg>
  <defs></defs>
   <path></path>
</svg>

Explaination:

According to javatpoint

The SVG element is used to embed definitions that can be reused inside an SVG image.

So these svg plugins in flutter reads the svg code sequentially. Now if it doesn't finds the definition it throws an error. That's why the definition needs to be at the top