尽管从assests中提供了彩色图像，但SVG图片仍在颤动中返回黑色图像

Question

这是我要添加 svgpicture 但我得到黑色图像新容器子项的代码： new SvgPicture.asset('assets/camera.svg') ),

这是我的 camera.svg 文件

<svg xmlns="http://www.w3.org/2000/svg" width="13.607" height="13.608" viewBox="0 0 13.607 13.608">
    <defs>
        <style>
            .cls-1{}
        </style>
    </defs>
    <g id="Group_5" data-name="Group 5" transform="translate(-57.8 -130.498)">
        <g id="Group_4" data-name="Group 4">
            <g id="Group_3" data-name="Group 3">
                <path id="Path_2" d="M69.415 139.294a6.792 6.792 0 0 0-2.586-1.621 3.933 3.933 0 1 0-4.452 0 6.814 6.814 0 0 0-4.577 6.433h1.063a5.741 5.741 0 1 1 11.481 0h1.063a6.763 6.763 0 0 0-1.992-4.812zM64.6 137.3a2.87 2.87 0 1 1 2.87-2.87 2.874 2.874 0 0 1-2.87 2.87z" class="cls-1" data-name="Path 2"/>
            </g>
        </g>
    </g>
</svg>

Answer 1

使用https://vecta.io/nano 它可以删除不支持的标签，例如并对 svg 文件进行一定级别的压缩

Answer 2

这可能是由于来自互联网的损坏的 SVG 文件而发生的。我之前遇到过这个问题，并尝试了很多方法来解决它。但最后，我在这个软件svgcleaner的帮助下解决了它。

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

安装后，

1. 导入您的 SVG。

2. 点击运行。

3. 成功！在这里您可以看到您的 SVG 已成功清理。

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

它对我来说非常好。

Answer 3

flutter_svg无法理解Internal 或 Embedded CSS。

因此，您需要删除内部 css 并编写内联 css。

例子：- <path style="fill:#566e83;" ...

Answer 4

这是内联CSS的原因......

 <style>
        .cls-1{}
    </style>

删除此行并尝试...您的问题将得到解决... flutter svg cant read inline CSS

Answer 5

像下面一样编辑style以更改颜色：

<svg xmlns="http://www.w3.org/2000/svg" width="13.607" height="13.608" viewBox="0 0 13.607 13.608" style="fill: #ff0000;">
    <defs>
        <style>
            .cls-1{}
        </style>
    </defs>
    <g id="Group_5" data-name="Group 5" transform="translate(-57.8 -130.498)">
        <g id="Group_4" data-name="Group 4">
            <g id="Group_3" data-name="Group 3">
                <path id="Path_2" d="M69.415 139.294a6.792 6.792 0 0 0-2.586-1.621 3.933 3.933 0 1 0-4.452 0 6.814 6.814 0 0 0-4.577 6.433h1.063a5.741 5.741 0 1 1 11.481 0h1.063a6.763 6.763 0 0 0-1.992-4.812zM64.6 137.3a2.87 2.87 0 1 1 2.87-2.87 2.874 2.874 0 0 1-2.87 2.87z" class="cls-1" data-name="Path 2"/>
            </g>
        </g>
    </g>
</svg>