在 UWP 应用程序中显示的 SVG 图像变黑答案

【问题标题】：SVG images shown blacked out in UWP application在 UWP 应用程序中显示的 SVG 图像变黑
【发布时间】：2017-11-29 16:28:01
【问题描述】：

我和我的团队正在尝试将一些 .svg 图标放入我们的 UWP win10 应用程序（目标和最低版本是 Windows 10 Fall Creators 更新）。

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

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

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

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

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

原始的 svg 如下所示：

这里是SVG的源代码

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

【问题讨论】：

标签： xaml svg uwp windows-10-universal

【解决方案1】：

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="..." 并手动应用样式。

【讨论】：

【解决方案2】：

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

【讨论】：

很遗憾，我无法测试 Adobe Illustrator，因为我们的设计师在世界的另一端。但是我设法解决了这个问题，但将图像导入/导出到 InkScape

【解决方案3】：

如果是插画师使用样式：“Presentation Attributes”

【讨论】：

【解决方案4】：

如果您使用 illustrator，请尝试更改样式。它应该类似于样式属性。

【讨论】：

【解决方案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 元素。

【讨论】：