如何使用 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 转换为 xaml https://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%20technology,Windows% 20Forms%20和%20WPF%20技术。

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