UWP应用载入SVG图片的兼容性方案

原文 UWP应用载入SVG图片的兼容性方案

新版本《纸书科学计算器》的更新点之一，就是优化了表达式的显示方式。在旧版本中，表达式里的符号是用png图片显示的，当用户放大看的时候会发现一些锯齿，非常影响使用体验。图片的等比缩放也会导致符号的粗细不一，比较明显的如下：

（矩阵的硕大括号非常违和，细看还会有些锯齿）

在开发新版本时，为了使表达式的显示更精细，我打算用svg图片来代替之前的png图片，这种基于xml的矢量图形格式既小巧又能有效避免锯齿。虽然我也考虑过xaml里的path路径，但是因为时间原因，我并不想大幅改动之前的代码。如果uwp的Image控件能像HTML5的img标签一样支持svg图片那就太好了。那么Image控件到底滋不滋瓷svg呢？

答案很尴尬：首先你问我滋不滋瓷，我肯定是滋瓷的。但是只有在Windows 10 Creators Update (10.0.15063.0)之后才能直接支持。15063可是今年上半年才出的更新，毫无疑问还有大量用户停留在14393甚至更低的版本。这里不得不吐槽一下巨硬，svg的支持居然做得这么晚，一向思维领先的uwp这次真的落后了很多。难道是为了推荐开发者一律用path路径吗？

由于要兼容14393及以下的版本，在这些版本的系统上只能使用第三方库。经过搜索了解到，有个开源的矢量图加载库Mntone.SvgForXaml可以显示svg图片。经过实际测试，发现Mntone.SvgForXaml内部是parse了svg文件的xml再转换成Bitmap绘制在Image控件上实现的。虽然确实可以支持svg，但是显示效果不佳：由于图片经过了栅格化，用viewbox缩放后还是会有锯齿。虽感无奈，但为了保证对低版本系统的支持也只能这样了。

最后决定，14393及以下的版本的系统上使用Mntone.SvgForXaml，在15063以上的系统还是直接采用Image控件载入svg，因为这个无论怎么缩放都是无锯齿的。

一、Mntone.SvgForXaml的使用及坑

关于Mntone.SvgForXaml的使用，网上已经有了很多帖子，比如UWP项目中加载svg矢量图 - 菜鸟之路 - CSDN博客，基本的使用方法简要介绍如下（大部分转自该文章）：

1.用NuGet包管理器在项目里添加Mntone.SvgForXaml，会自动添加依赖包Win2D.uwp；

2.在xaml文件中添加命名空间：

xmlns:svg="using:Mntone.SvgForXaml.UI.Xaml"

3.在xaml文件中声明该控件：

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

4.用C#代码载入图片（也可以在xaml中将SvgImage控件的Source属性用Bind绑定赋值）：

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);
}

5.由于矢量图都是加载到内存中，所以使用完后最好卸载一下：

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

但是，在实际使用中，我发现这个库是有坑的。SvgImage控件如果是用C#动态添加到界面（在《纸书》里完全就是这样的），在声明控件对象后不管是用LoadFileAsync方法，还是用它给的LoadSvg方法，还是为Source属性赋值，在添加到界面后图像都会消失不见。在Mntone.SvgForXaml的文档中貌似也没有什么注明。摸索了半天，发现必须需要在控件的Loaded事件里载入图片才行……晕。具体方式将在下文补上。

二、直接支持svg的Image控件

15063以上的系统可以在xaml中直接把svg图片当成普通图片为Image的Source属性赋值。如：

<Image Source="example.svg" />

在C#代码中，可以用新的对象SvgImageSource（ImageSource的子类）为Image的Source属性赋值。如：

image1.Source = new SvgImageSource(new Uri($"ms-appx:///{filePath}"));

可见，SvgImageSource类的存在与否可以作为当前系统是否直接支持svg的标志。所以靠ApiInformation类就可以轻易判断了：

if(ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.Imaging.SvgImageSource"))
{
    image1.Source = new SvgImageSource(new Uri($"ms-appx:///{filePath}"));
}

虽然uwp对svg支持很晚，但还是非常excited!

三、两种方案的结合

在《纸书》中，我写了一个静态类SvgManager来全局掌控svg资源。由于《纸书》里用到的svg资源较少（运算符和函数不算多）但是会频繁的载入，因此我在SvgManager里把所有svg资源都提到内存里来，以减少硬盘读取次数，加快表达式的显示速度。

大体上SvgManager类是这样的：

/// <summary>
/// SVG资源管理类
/// </summary>
public static class SvgManager
{
    /// <summary>
    /// 15063以上系统的svg资源
    /// </summary>
    private static Dictionary<string, SvgImageSource> svgSources;
    /// <summary>
    /// 14393以下系统的svg资源
    /// </summary>
    private static Dictionary<string, SvgDocument> svgDocuments;
    /// <summary>
    /// 是否可以直接使用Image控件载入svg
    /// </summary>
    public static readonly bool CanDisplaySvgDirectly;

    //其他成员声明省略
    ...

    static SvgManager()
    {
        CanDisplaySvgDirectly = ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.Imaging.SvgImageSource");
        //读取svg文件清单作为key
        if (CanDisplaySvgDirectly)
        {
            svgSources = new Dictionary<string, SvgImageSource>();
            foreach (var n in svgFileNames)
                svgSources.Add(n, null);
        }
        else
        {
            svgDocuments = new Dictionary<string, SvgDocument>();
            foreach (var n in svgFileNames)
                svgDocuments.Add(n, null);
        }
        //一次性载入资源
        loadResourcesAsync();
    }

    /// <summary>
    /// 载入SVG文档
    /// </summary>
    private static async void loadResourcesAsync()
    {
        if (CanDisplaySvgDirectly)
        {
            foreach (var key in svgFileNames)
                if (svgSources[key] == null)
                    svgSources[key] = getSource(key);
        }
        else
        {
            foreach (var key in svgFileNames)
                if (svgDocuments[key] == null)
                    svgDocuments[key] = await getDocumentAsync(key);
        }
    }

    private static SvgImageSource getSource(string fileName)
    {
        return new SvgImageSource(new Uri($"ms-appx:///Svg/{fileName}"));
    }

    private static async Task<SvgDocument> getDocumentAsync(string fileName)
    {
        var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri($"ms-appx:///Svg/{fileName}"));
        var stream = await file.OpenStreamForReadAsync();
        var bytes = new byte[stream.Length];
        await stream.ReadAsync(bytes, 0, bytes.Length);
        //Mntone.SvgForXaml库支持的parse操作
        return SvgDocument.Parse(bytes);
    }

    /// <summary>
    /// 获取Source对象
    /// </summary>
    /// <param name="fileName"></param>
    /// <returns></returns>
    public static SvgImageSource GetSource(string fileName)
    {
        if (svgSources.ContainsKey(fileName))
        {
            if (svgSources[fileName] == null)
                svgSources[fileName] = getSource(fileName);
            return svgSources[fileName];
        }
        else
            throw new Exception();
    }

    /// <summary>
    /// 在SvgImage控件内显示SVG
    /// </summary>
    /// <param name="si"></param>
    public static async void LoadSvg(SvgImage si)
    {
        //初始化SvgImage时在Tag属性里赋上了svg文件名
        var filename = si.Tag.ToString();
        if (svgDocuments.ContainsKey(filename))
        {
            if (svgDocuments[filename] == null)
                svgDocuments[filename] = await getDocumentAsync(filename);
            si.LoadSvg(svgDocuments[filename]);
        }
        else
            throw new Exception();
    }
}

之后，在创建svg图片控件的时候，先判断一下SvgManager.CanDisplaySvgDirectly的值，如果为true则创建Image控件，再用SvgManager.GetSource(filename)方法为Image的Source属性赋值；如果为false，则创建第三方SvgImage控件，然后把svg文件名赋在Tag属性里，再添加Loaded事件的处理程序：

svgControl.Loaded += (sender, e) => SvgManager.LoadSvg(sender as SvgImage);

这样，在各大版本的Win10下都能愉快显示svg了。

最终，新版本《纸书》的表达式显示也得到了优化：

感觉一切都顺畅多了~