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!

Answer 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

Answer 4

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.

Answer 5

There is no localization for date functions in BigQuery. You have a couple of options: write a function to replace the month names with the languages you'd like. Or, create a translation table with the English names and names you need, then join on that to display the desired language.