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

Well, is the definition after the element as the error suggests? — Robert Longson, Nov 26 '20 at 16:11
https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#patterns — Robert Longson, Nov 26 '20 at 16:28
Can you share the svg file in question? There's likely an issue with it... — Luan Nico, Mar 28 '21 at 06:36

score 12 · Answer 1 · edited Jul 15 '22 at 09:12

12

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

edited Jul 15 '22 at 09:12

Sp4Rx

1,498
3
20
37

answered Mar 03 '22 at 08:08

Wai Han Ko

760
5
16

It worked magically. – Sp4Rx Jul 15 '22 at 05:13
1

What I found is. `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 – Sp4Rx Jul 15 '22 at 05:17
2

Thanks man. It just worked, and its the solution that Figma users need – fabiangamboa95 Jul 17 '22 at 19:15

score 0 · Answer 2 · answered Jan 25 '22 at 02:00

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.

score 0 · Answer 3 · answered Jun 06 '22 at 10:16

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>

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

3 Answers3