SVG image errors occur while rendering in flutter-CodePudding

It shows the error message like this. The following assertion was thrown while parsing AssetBundlePictureKey(bundle: PlatformAssetBundle#9940f(), name: "assets/icons/academy.svg", colorFilter: null, theme: SvgTheme(currentColor: null, fontSize: 14.0, xHeight: 7.0)) in _getDefinitionPaint: Failed to find definition for url(#pattern0)

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

This error can be caused when the desired definition is defined after the element referring to it (e.g. at the end of the file), or defined in another file.

This error is treated as non-fatal, but your SVG file will likely not render as intended

My SVG file containing images image.svg

<svg width="69" height="69" viewBox="0 0 69 69" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="16" y="19" width="37" height="31" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_42_579" transform="translate(0 -0.030613) scale(0.00221729 0.00264645)"/>
</pattern>
<image id="image0_42_579" width="451" height="401" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcMAAAGRCAYAAAAZwNgiAAAgAElEQVR4Aex9B3iV1Zb2NzN35s7cf 7c 8/8c1VARUSaIgiIBRAVRdELtotdJCfoVa9iA6lJvvTek5Oek957L6T33nsjvRACXDcN74r1xD7gX3BPuDfeIe 3s55LfEwQEAUX5/ 1kjN9Wr/KbAAAAAElFTkSuQmCC"/>
</defs>
</svg>

And image.svg is displayed in display.dart as

class Display extends StatelessWidget {
  const Display({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('icons')),
      body: Column(
        children: [
          SvgPicture.asset(
            'assets/images/image.svg',
            height: 400.0,
            width: 300.0,
            allowDrawingOutsideViewBox: true,
          ),
        ],
      ),
    );
  }
}

CodePudding user response：

please check your SVG before using it

please go through the link

https://www.svgviewer.dev/

CodePudding user response：

My Suggestion is First download the Svg image in file formate then add the package flutter_svg: ^1.0.3 in pubspec.yaml

add the Svg image in assets folder.

Then use it in the project

final String assetName = 'assets/image.svg';
final Widget svg = SvgPicture.asset(
  assetName,
  semanticsLabel: 'Acme Logo'
);