颤振无法加载和渲染 svg 图像答案

【问题标题】：flutter cannot load and render svg images颤振无法加载和渲染 svg 图像
【发布时间】：2021-12-22 00:17:39
【问题描述】：

我正在尝试加载并显示 svg 格式的图像，但每次都会收到此错误

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
════════════════════════════════════════════════════════════════════════════════════════════════════

这就是我试图展示它的方式

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

我该如何解决这个错误

【问题讨论】：

请分享您的代码并确保在 pubspec 中初始化您的资产
你可以试试这个stackoverflow.com/questions/61202925/…

标签： flutter flutter-image

【解决方案1】：

尝试使用 flutter_svg 库。这将在你的 Flutter 应用中呈现 SVG。

链接：https://pub.dev/packages/flutter_svg

基本用法：

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

【讨论】：

【解决方案2】：

Flutter 本身不支持渲染 SVG。但是有一些解决方法。

解决方案 1：有一个名为 flutter_svg 的包，它提供了一种将 SVG 添加到 Flutter 项目的可靠方法。

解决方案 2：使用免费的在线转换器将您的 SVG 文件转换为 PNG（例如：https://svgtopng.com/）。

【讨论】：