在Visual Studio 2017的WPF项目中插入SVG等矢量图的方法
嘿,在VS2017的WPF项目里插入SVG矢量图,我给你梳理几个实用的方案,亲测好使:
方案1:将SVG转成XAML资源(原生支持)
WPF本身不直接解析SVG,但可以把SVG转换成XAML格式的Drawing或Path,这样就能直接用WPF原生控件渲染了:
- 找个靠谱的SVG转XAML工具,把你的SVG文件转换成XAML格式的绘图资源。
- 在项目里新建一个
ResourceDictionary(比如命名为SvgResources.xaml),把转换后的XAML代码粘贴进去,记得给每个资源设置唯一的x:Key,示例代码:
<DrawingImage x:Key="SettingsIcon"> <DrawingImage.Drawing> <GeometryDrawing Brush="#FF333333" Geometry="M12,12 L24,24 ..." /> </DrawingImage.Drawing> </DrawingImage>
- 在需要展示图标的地方,用
Image控件引用这个资源就行:
<Image Source="{StaticResource SettingsIcon}" Width="40" Height="40" />
方案2:用第三方库直接加载(推荐)
如果不想手动转换,用SharpVectors这个第三方库就能直接加载SVG文件,步骤很简单:
- 打开VS2017的NuGet包管理器,搜索并安装
SharpVectors库。 - 在要使用SVG的XAML页面里添加命名空间:
xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
- 然后用
SvgViewbox控件直接加载SVG文件,示例:
<svgc:SvgViewbox Source="/Assets/Logo.svg" Width="100" Height="100" />
这里的路径要对应你项目里SVG文件的实际位置,如果是放在Assets文件夹下,这样写就没问题。
方案3:代码动态加载SVG(适合动态场景)
如果需要在代码里动态加载SVG,可以把SVG设为嵌入资源,再通过SharpVectors读取:
- 把SVG文件添加到项目后,在属性面板里设置其生成操作为“嵌入的资源”。
- 编写加载方法:
using SharpVectors.Converters; using SharpVectors.Renderers.Wpf; using System.Windows.Media; public ImageSource LoadSvgResource(string resourcePath) { var svgReader = new SvgReader(); return svgReader.Read(new Uri(resourcePath, UriKind.Relative)) as DrawingImage; }
- 然后在代码里给Image控件赋值:
myImageControl.Source = LoadSvgResource("YourProjectName.Assets.Icon.svg");
注意资源路径的格式是“项目名称.文件夹路径.文件名.svg”,比如你的项目叫WpfApp1,SVG放在Assets文件夹下,路径就是WpfApp1.Assets.Icon.svg。
内容的提问来源于stack exchange,提问作者Djidjeli Wail




