flutter cannot load and render svg images-CodePudding

I am trying to load and show an image in svg format but I get this error everytime

unhandled element pattern; Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#5abbc(), name: "assets/svg/Ellipse.svg", colorFilter: null)
══╡ EXCEPTION CAUGHT BY SVG ╞═══════════════════════════════════════════════════════════════════════
The following assertion was thrown while parsing AssetBundlePictureKey(bundle:
PlatformAssetBundle#5abbc(), name: "assets/svg/Ellipse.svg", colorFilter: null) in
_getDefinitionPaint:
Failed to find definition for url(#pattern0)
This library only supports <defs> 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
════════════════════════════════════════════════════════════════════════════════════════════════════

This is how I am trying to display it

Padding(
  padding: const EdgeInsets.only(top: 24),
  child: SvgPicture.asset(
   'assets/svg/Ellipse.svg',
   width: 100,
   height: 100,
 ),
),

How can I fix the error

CodePudding user response：

Try using flutter_svg library. This will render SVG in your flutter app.

Link: https://pub.dev/packages/flutter_svg

Basic Usage:

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

CodePudding user response：

Flutter natively doesn’t support rendering SVG. But there are some workaround for that.

Solution 1: There is a package called flutter_svg which provide a solid way of adding SVG to your flutter project.

Solution 2: Convert your SVG files to PNG using a free online convertor (Example: https://svgtopng.com/).