在UWP应用程序中显示的SVG图像显示为黑色

Question

我和我的团队正试图在我们的UWP win10应用程序中添加一些.svg图标（目标和最小版本是Windows 10 Fall Creators更新）。

在我的资源文件中，我将我的SvgImageSource定义如下：

<SvgImageSource x:Key="PencilIcon" UriSource="Images/DeviceMenu/Icon_EditMode_grey.svg" />

然后我继续在我的组件中使用此图像源：

<Image Source="{StaticResource PencilIcon}" />

我尝试了几个不同的svgs，它们都以正确的形状渲染，但都是黑色的（第一个是铅笔）：

原来的svg看起来像这样：

这是SVG的源代码

我尝试调整拉伸，宽度，高度等等，但我似乎无法让它工作。

Answer 1

这是Adobe Illustrator的一个已知问题，请尝试使用其SVG导出设置。

Answer 2

UWP不知道css样式是什么。就我而言，有这样的：

<style
     type="text/css"
     id="style2">
    .st0{fill:#996459;}
    .st1{fill:#FFFFFF;}
    .st2{fill:#B4B6BC;}
    .st3{fill:#5C546A;}
    .st4{fill:#868491;}
    .st5{fill:#0F4499;}
</style>

要为UWP修复此问题，请找到每个class =“...”并手动应用该样式。

Answer 3

如果插图使用样式：“演示属性”

Answer 4

如果您使用插图画家，那么尝试更改样式。它应该像Style Attributes。

Answer 5

UWP只是部分支持SVG Ver 1.1规范（参见SVG Support）

并且它不支持类似CSS的样式。

See image

如果您使用Adobe Illustrator导出图像，则可以使用导出设置：AI export Settings

或者手动制作：See image

或者用我的工具：

• Marketplace的Visual Studio扩展。
• Github releases的桌面版

此工具只是直接将css样式内联到svg元素。