如何使用SVG图像格式作为WPF图像源

Question

我想使用SVG图像格式作为按钮图像，因为我希望这些图像以高质量显示，所以我决定使用SVG格式。我已经搜索过了，有人说SVG格式可以用作WPF图像源。但是当我使用SVG图像时，像这样：

<Image Source="Images/hard.svg"/>

我有错误。当然，微软网站说我可以使用SVG文件作为图片来源。https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.media.imaging.svgimagesource?view=winrt-19041

如何使用SVG图像格式作为WPF图像源？

Answer 1

您必须使用此库将svg转换为xamlhttps://github.com/BerndK/SvgToXaml

样本输出：

<DrawingImage x:Key="ic_close">
<DrawingImage.Drawing>
<DrawingGroup ClipGeometry="M0,0 V24 H24 V0 H0 Z">
<GeometryDrawing Brush="Red"
Geometry="F0 M24,24z M0,0z M5.21723,16.4509C4.64003,17.0905 4.68203,17.8189 5.21723,18.3421 5.75123,18.8653 6.65362,18.8329 7.15522,18.3421 7.52928,17.977 10.3498,15.0233 11.7599,13.5448 13.1706,15.0243 15.9893,17.977 16.3633,18.3402 16.8649,18.8298 17.7673,18.8634 18.3013,18.3402 18.8365,17.8206 18.8785,17.091 18.3013,16.4514L13.8049,11.7618 18.3013,7.07225C18.8785,6.43265 18.8365,5.70425 18.3013,5.18105 17.7673,4.65785 16.8649,4.69025 16.3633,5.18105 15.9892,5.54616 13.1687,8.49985 11.7585,9.97833 10.3479,8.4988 7.52916,5.54607 7.15523,5.18287 6.65363,4.69327 5.75123,4.65967 5.21723,5.18287 4.68203,5.70247 4.64003,6.43207 5.21723,7.07167L9.71363,11.7613 5.21723,16.4509z" />
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>

示例用法：

<Image Width="14"
Height="14"
Source="{StaticResource ic_close}" />

Answer 2

如果查看链接页面的名称空间，您会看到：

Windows.UI.Xaml.Media.Imaging

这意味着这是uwp而不是wpf。

你可以使用SharpVectors

https://github.com/ElinamLLC/SharpVectors

或者，您可以手动从svg中提取一个或多个路径，并在wpf中使用这些路径。由于这是一种手动转换，如果有许多svg您希望使用，或者如果它们是动态的，则可能没有吸引力。

另一个需要考虑的选项是xaml岛。

您可以在xaml岛中托管uwp图像控件

https://blogs.windows.com/windowsdeveloper/2018/11/02/xaml-islands-a-deep-dive-part-1/#:~：text=XAML%20Islands%20is%20a%20技术，Windows%20Forms%20和%20WPF%20技术。

请注意，这引入了对win 10创建者版本或更高版本的依赖。

Answer 3

WPF渲染基于矢量的文件，但不能直接渲染SVG文件。您必须使用基于矢量的图像处理应用程序将SVG转换为XAML。

通常，从导出的SVG获得的XAML通常由Path或Geometry元素组成，您可以将这些元素包装成Viewbox进行缩放。

Adobe Illustrator(非免费，试用版(产生最佳效果。您可以使用它将SVG图像转换为.ai文件，然后使用Blend或插件将

/aiAB4D(不是免费的，试用版(是另一个应用程序，它也能输出非常好的结果，并允许直接导出到XAML。

InkScape是免费的，也可以工作，但结果不是很好，大多数时候需要手动后处理。复杂的图形永远不会开箱即用。

还有更多像SvgToXaml这样的工具，但我不记得质量了。