WPF使用SharpVectors显示SVG图标

WPF使用SharpVectors显示SVG图标

W3C SVG Working Group

SVG它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。

矢量图形，不受像素影响——SVG的这个特性使得它在不同的平台或者媒体下表现良好，无论屏幕分辨率如何，适合WPF使用。

iconfont-阿里巴巴矢量图标库提供了大量的SVG图标。

但是WPF本身不支持直接显示SVG文件，使用SVG通常有三种方法：

• 简单的单个图标SVG，可以直接使用SVG内容中的Path
• 将SVG转换为XAML并将其与原生WPF一起使用，推荐使用Inkscape工具
• 像加载图片路径一样显示SVG图标，需要使用SharpVectors

本文介绍用sharpvectors显示的方法。

第一步 使用Nuget安装sharpvectors包

• GitHub - ElinamLLC/SharpVectors: SharpVectors - SVG# Reloaded: SVG DOM and Rendering in C# for the .Net.

• 此项目提供了一个 C# 库，用于分析、转换和查看 WPF 应用程序中的 SVG 文件。

第二部 添加svg文件

• 下载svg文件添加到项目中

• 注意：需要将文件属性中生成操作修改为 Resource

第三步 添加引用

• 添加对sharpvectors的引用

xmlns:svgc = "http://sharpvectors.codeplex.com/svgc/"

第四步 显示语法示例

• 重新生成一下项目

• 使用sharpvectors提供的SvgViewbox控件显示svg图标

• 经过测试以下三种方法都可以访问到目标资源文件

<svgc:SvgViewbox IsHitTestVisible="False"  Source="Images/file.svg"/>
<svgc:SvgViewbox IsHitTestVisible="False"  Source="/Images/file.svg"/>
<svgc:SvgViewbox IsHitTestVisible="False"  Source="pack://application:,,,/Images/file.svg"/>