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

sorry i dint get what is paint0_linear? will u please explain it — lokesh paladugula, Apr 15 '20 at 09:03
From your error message **Failed to find definition for url(#paint0_linear) I/flutter (18256)** so what file contains that? Can you add the contents of that file to the question please? — Robert Longson, Apr 15 '20 at 09:11
@lokeshpaladugula, I think he wants you to attach the contents of otpLogo.svg to the post. I'm getting the same error, but I'm not authorized to share the file contents. Would it happen to be [this file](https://github.com/opentripplanner/opentripplanner.github.io/blob/master/otp-logo.svg)? — ThinkDigital, Jun 12 '20 at 21:01
@ThinkDigital I had it too. Try my answer below and see if it helps. — Giraldi, Jul 07 '20 at 10:20

Giraldi · Answer 1 · 2021-01-05T04:28:21.070

82

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.

edited Jan 05 '21 at 04:28

answered Jul 07 '20 at 10:18

Giraldi

16,451
6
33
52

2

This is the corresponding issue: https://github.com/dnfield/flutter_svg/issues/102 – Giraldi Jul 07 '20 at 10:36
1

Can you post please example of svg file before you edit it and after, as I'm not really sure where should I put like this – Jan Jan 01 '21 at 09:09
@Jan okay... I added a sample case above for reference. – Giraldi Jan 05 '21 at 04:29
Thank you, though my SVG files have much more info, it doesn't work when I do what you did, can you check it out? cant post code here its to many characters file name: bku7.svg https://ufile.io/xnjwekoh – Jan Jan 05 '21 at 09:00
@Jan What kind of error are you facing, btw? Is your error message the same as that of the OP above? Have you tried [optimizing your SVG](https://jakearchibald.github.io/svgomg/) first? – Giraldi Jan 05 '21 at 09:30
Now I managed to get svg shown in the app, I still get ERROR: Failed to find definition for url(#meshgradient5266). But they are shown without meshgradient with color in between original color and white – Jan Jan 05 '21 at 11:23
@Jan Okay, I think this is a separate issue & you should probably create a new question. However, my assumption for your issue is that Flutter (or the _flutter_svg_ package) does not support **Mesh Gradient**. You may have to create a gradient workaround or save it as a PNG. – Giraldi Jan 05 '21 at 15:43
I did not find a solution yet, there is a problem with flutter_svg probably fixed coming soon – Álvaro Agüero Jun 08 '21 at 16:38
Worked like a charm for me. I just moved the defs block to the top and that was all! – Roberto Juárez Dec 07 '21 at 07:43
Well done, worked! – Aziz Jan 26 '22 at 10:03
This worked, after fixed, the error has completely disappeared – Nghien Nghien May 18 '22 at 06:43

score 25 · Answer 2 · answered Oct 12 '21 at 12:25

25

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!

answered Oct 12 '21 at 12:25

trava

347
3
4

1

BEST SIMPLE ANSWER!!!!!! THANKSSS – SwiftiSwift Jan 17 '23 at 08:15
1

like it so much – Amirali Eric Janani Mar 13 '23 at 07:59

score 3 · Answer 3 · answered May 07 '22 at 16:36

3

Some informations about this behaviour. This can occur if you export from Figma for exemple. And be sure to put <defs></defs> just after the <svg opening tag. Even if you have something like <path at the top

answered May 07 '22 at 16:36

Ramah

76
5

score 3 · Answer 4 · answered Aug 25 '22 at 08:05

3

I ran into the same thing after downloading SVG from Figma.

Then I tried to

Download a PNG file from Figma
Import it into Adobe XD
Then Export it to SVG from Adobe XD.

And this worked for me.

answered Aug 25 '22 at 08:05

myturmudi

201
3
8

score 2 · Answer 5 · answered Sep 04 '22 at 02:46

The error message actually tells us how to fix it:

Failed to find definition for url(#g1)

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

That means if your svg is :

<svg>
   <rect fill="url(#g1)"/>
   <defs>
      <radiusGraident id="g1"> ... </radiusGradient>
   </defs>
</svgs>

Please make the <defs> ahead of its usage. So the below svg would work :

<svg>
   <defs>
      <radiusGraident id="g1"> ... </radiusGradient>
   </defs>
   <rect fill="url(#g1)"/>
</svgs>

Marek Lipskij · Answer 6 · 2022-05-19T11:13:23.027

The error means that the SVG was not exported correctly. The layer in question connected to the user might not render as intended.

The successful rendering really depends on each individual device so if it shows correctly for e.g. iOS Simulator does not necessarily mean it will render correctly on every device (and in my experience, it doesn't).

The solution might be to try to export it differently, or if possible to switch it for example to PNG.

score 1 · Answer 7 · answered Dec 10 '22 at 18:51

if you have png from svg image then follow these steps:

1- Convert png to svg through this link: https://express.adobe.com/pt-BR/tools/convert-to-svg

2-After converting png to svg, insert it into your project.

3- If the background of the image does not have transparency, open the image file in the IDE (Android Studio or Visual Studio), showing the image code, go to the third line or close to it, change the option "opacity" to opacity=" 0"

score 0 · Answer 8 · answered Oct 19 '22 at 02:09

0

If the rearranging defs to the top solution doesn't work, just remove the pattern, rect and defs tag and only leave the image tag

answered Oct 19 '22 at 02:09

Said Ramadhan

1

score 0 · Answer 9 · answered Jan 16 '23 at 09:03

When using the Flutter SvgPicture package, I fall into the same problem.

I solve this issue by exporting the file from Figam as PDF and then converting the pdf file to SVG.

Here are the steps I follow:

Save as (.pdf) from Figma/Adobe XD.
Go to Zamzar and convert the PDF file into SVG Image.
Use this image & Boom !!!

The problem is solved !!!

score 0 · Answer 10 · answered Mar 07 '23 at 02:02

0

I encountered the same problem, I moved the svg's to and it solved the problem.

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

change to

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

answered Mar 07 '23 at 02:02

Xxugle

1

SvgPicture image rendering error in flutter

10 Answers10

Linked

Related