UWP项目中加载svg矢量图

最近在项目中显示按钮图片时，总是感觉图片显示不清晰，所以打算加载矢量图显示按钮图片。UWP本身是不支持矢量图的加载的，需要转换为path图自绘。目前主要有两种实现该效果。第一种方法是获取矢量图中的点的位置，然后在程序中直接使用path绘图。第二种方法是调用库的方法去实现矢量图加载。显而易见，第二种方法更容易一些。

在网上找到一个开源的矢量图加载库Mntone.SvgForXaml，使用方法也很简单。在NuGet中添加Mntone.SvgForXaml和Win2d.uwp两个库。

在xmal文件中添加命名空间

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
    <svg:SvgImage x:Name="SvgControl"/>
</Grid>  

在对应的cs中写入要加载的图片名称。

public MainPage()
{
    this.InitializeComponent();
    this.Loaded += MainPage_Loaded;
}

private async void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/magnifier28.svg"));

    await this.SvgControl.LoadFileAsync(file);
}

在此有一点需要注意，由于矢量图都是加载到内存中，所以使用完后需要卸载，否则会一直消耗内存资源

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
     this.SvgControl.SafeUnload();
}

程序运行后效果如下