我正在尝试使用Flutter svg，但要加载黑色svg

Question

我正在尝试使用Flutter SVG依赖项，我将svg放入资产中，在pubspec.yaml中设置，并在我的小部件中设置，但是svg加载了黑色容器

我已经尝试过更改svg，而另一个svg可以正常工作，但另一个却不能...

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

波动中的svg

Here the svg

我期望的响应像scodeg中的链接一样被涂成彩色svg，但是我得到了this

Answer 1

这可能是由于来自互联网的SVG文件损坏而发生的。我较早就遇到了这个问题，并尝试了多种方法来解决它。但是最后，我借助svgcleaner这个软件解决了这个问题。

从here

将应用程序下载到您的操作系统中

安装后，

1. 导入您的SVG。

1. 单击运行。

1. 成功！在这里，您可以看到SVG已成功清除。

清洁后，您可以从输出文件夹位置抓取那些SVG文件，并将这些文件添加到您的flutter应用程序中，而不会看到黑色的SVG。

像这样完美地工作。

Answer 2

尝试一下：

Container(
  child: SvgPicture.asset(
       'assets/images/image.svg',
        fit: BoxFit.contain,
  ),
)

Answer 3

如果您没有解决方案，请尝试将图像从svg转换为png并使用：

Image.asset('assets/images/image.png',)

Answer 4

我想我来晚了，但这可能只会帮助某些人使svg图像中的所有样式变为行内样式，而将所有颜色变为行内样式，因为SvgPicture无法读取该标签，因此样式不会呈现。 >

Answer 5

某些 SVG 图像使用样式标记，如果您尝试使用 flutter_svg 加载此类图像，图像将不会按预期呈现。目前 flutter_svg 仅支持通过内联样式设置样式，而不支持某些 SVG 文件可能包含的样式标签（在我的例子中，我从 Adob​​e XD 导出图像，它在标签中包含所有样式）。当您尝试加载此类 SVG 图像时，您将收到以下错误：

<块引用>

======== SVG 捕获的异常 ==================================== ============================== 在 parseSvgElement 中抛出了以下 UnimplementedError：

元素未在此库中实现。 此库和请求的 SVG 不支持样式元素 可能无法按预期呈现。 如果可能，请确保 SVG 使用内联样式和/或属性 （受支持），或使用预处理实用程序，例如 svgcleaner 为您内联样式。

此错误提到使用内联样式而不是样式标记，您可以使用 svgcleaner（如@Alif 的回答中所述）或类似实用程序来转换具有内联样式的 SVG 文件。

有关更多详细信息，请参阅此 link 以检查 SVG 与 flutter_svg 的兼容性并处理其他用例