c# WPF SVG 文件的引用（SharpVectors）

阿里巴巴矢量图标库提供了大量的 SVG 图标：https://www.iconfont.cn/  但是 WPF 本身不支持 SVG 格式的文件。

方法一：如果对图片的颜色没有要求，那么可以在下载图片时选择：复制 SVG ，然后将文本中的 Path 路径提取出来，多个路径之间用空格隔开。这种方法只能调节图像的前景色和背景色。

原 SVG 文本：

<svg t="1572520948109" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6553" width="200" height="200"><path d="M651.424 217.066667a32 32 0 0 1 62.485333 13.866666L682.261333 373.333333H800a32 32 0 0 1 31.946667 30.122667L832 405.333333a32 32 0 0 1-32 32H668.032l-33.184 149.333334H800a32 32 0 0 1 31.946667 30.122666L832 618.666667a32 32 0 0 1-32 32H620.629333l-34.72 156.266666a32 32 0 0 1-36.341333 24.661334l-1.845333-0.352a32 32 0 0 1-24.298667-38.186667L555.061333 650.666667H407.296l-34.72 156.288a32 32 0 0 1-36.341333 24.64l-1.845334-0.341334a32 32 0 0 1-24.298666-38.186666L341.728 650.666667 224 650.666667a32 32 0 0 1-31.946667-30.122667L192 618.666667a32 32 0 0 1 32-32h131.957333l33.184-149.333334H224a32 32 0 0 1-31.946667-30.122666L192 405.333333a32 32 0 0 1 32-32h179.36l34.730667-156.266666a32 32 0 0 1 36.341333-24.661334l1.845333 0.352a32 32 0 0 1 24.298667 38.186667l-31.648 142.378667h147.765333zM602.474667 437.333333H454.698667l-33.184 149.333334h147.776l33.184-149.333334z" p-id="6554"></path></svg>

XAML 代码：

  <Path Width="100" Height="100" Stretch="Uniform" Data="M856.34479531 833.26631065a42.58114365 42.58114365 0 0 0 40.27053867-48.19261201l-16.1742331-88.13306426A80.87116377 80.87116377 0 0 0 805.18140547 632.57378926h-193.76070732l-15.84414581-99.02591543a236.01176455 236.01176455 0 0 0 148.20878584-221.81804912 240.96306006 240.96306006 0 1 0-481.59603369 0 236.34185098 236.34185098 0 0 0 148.53887226 220.49770341l-11.88310956 99.02591544H206.07461914a77.57030039 77.57030039 0 0 0-76.24995469 64.36684511L113.65043222 783.75335293a37.95993369 37.95993369 0 0 0 36.30950156 48.19261201z M161.51295781 862.97408457h693.18140537a49.51295771 49.51295771 0 0 1 49.51295772 49.51295772 49.51295771 49.51295771 0 0 1-49.51295772 49.51295771h-693.18140537A49.51295771 49.51295771 0 0 1 112.0000001 912.48704229 49.51295771 49.51295771 0 0 1 161.51295781 862.97408457z M664.89469297 277.0707544m-33.00863906 0a33.00863818 33.00863818 0 1 0 66.01727724 0 33.00863818 33.00863818 0 1 0-66.01727724 0Z M527.57875654 144.37602793a177.91656065 177.91656065 0 0 1 56.11468536 28.71751553 165.0431918 165.0431918 0 0 1 33.00863906 47.86252558 25.08656484 25.08656484 0 0 0 44.2315749-23.10604716 221.81805 221.81805 0 0 0-46.21209346-62.05624014A216.20658164 216.20658164 0 0 0 542.43264394 97.50376162a24.7894875 24.7894875 0 0 0-16.17423222 46.87226631z" />
      

有时美工导出的 SVG 文本是大量的路径的拼接，而且这些路径不是 Path ，而是 Rect，Ellipse 这些规则形状。这就需要美工在导出 SVG 前建立复合路径。

（PS 参考：https://jingyan.baidu.com/article/9113f81b24e19a2b3214c7f6.html）

（GIMP 参考：https://stackoverflow.com/questions/11529470/is-there-a-tool-to-create-svg-paths-from-an-svg-file）

（网上看到有人使用 InKscape 直接可以转 XAML，但是笔者没有成功过。）

注意事项：WPF 默认会将多个路径中的相同部分进行相减操作。如果SVG文件的路径有重合部分，上面的方法绘制的图形会缺少部分路径。需要使用WPF中的 CombinedGeometry 来处理多段路径（GeometryGroup同样会进行相减操作）。

原 SVG 文本：

<svg t="1599786659262" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1958" width="200" height="200"><path d="M872.448 1011.712h-4.096c-24.576 0-45.056-8.192-61.44-24.576L737.28 917.504h-4.096l-57.344 57.344c-24.576 16.384-57.344 24.576-81.92 16.384-16.384-4.096-28.672-12.288-40.96-20.48l-53.248-53.248-53.248 53.248c-8.192 8.192-20.48 20.48-40.96 20.48-32.768 8.192-65.536 0-86.016-20.48l-53.248-53.248h-4.096l-69.632 69.632c-16.384 16.384-36.864 24.576-61.44 24.576h-24.576l-8.192-8.192c-8.192-8.192-32.768-20.48-32.768-57.344V266.24h61.44v679.936s0 4.096 4.096 4.096 8.192-4.096 16.384-8.192l77.824-77.824c16.384-16.384 32.768-16.384 40.96-16.384 8.192 0 16.384 4.096 20.48 4.096h8.192l69.632 69.632c8.192 8.192 20.48 8.192 28.672 4.096h8.192v-4.096l57.344-57.344c16.384-16.384 32.768-16.384 40.96-16.384 8.192 0 24.576 0 40.96 16.384l57.344 57.344 4.096 4.096h4.096c4.096 0 16.384 0 28.672-8.192l57.344-57.344c16.384-16.384 32.768-16.384 40.96-16.384 8.192 0 16.384 4.096 20.48 4.096h8.192l86.016 86.016c8.192 8.192 12.288 8.192 16.384 8.192V266.24h61.44v679.936c0 49.152-28.672 65.536-53.248 65.536z m-372.736-102.4z" p-id="1959"></path><path d="M925.696 851.968h-61.44V131.072c0-28.672-24.576-53.248-53.248-53.248H176.128c-28.672 0-53.248 24.576-53.248 53.248v724.992H65.536V131.072C65.536 69.632 114.688 16.384 180.224 16.384h634.88c61.44 0 114.688 49.152 114.688 114.688v720.896z" p-id="1960"></path><path d="M274.432 245.76l69.632 126.976L417.792 245.76h57.344L389.12 389.12h57.344v28.672H372.736v32.768h73.728v28.672H372.736v61.44H319.488v-61.44H241.664V450.56h77.824v-32.768H241.664v-28.672h61.44L212.992 245.76zM757.76 376.832h-167.936c-12.288 0-20.48-8.192-20.48-20.48s8.192-20.48 20.48-20.48h167.936c12.288 0 20.48 8.192 20.48 20.48s-8.192 20.48-20.48 20.48zM757.76 696.32h-491.52c-12.288 0-20.48-8.192-20.48-20.48s8.192-20.48 20.48-20.48h491.52c12.288 0 20.48 8.192 20.48 20.48s-8.192 20.48-20.48 20.48zM757.76 499.712h-167.936c-12.288 0-20.48-8.192-20.48-20.48s8.192-20.48 20.48-20.48h167.936c12.288 0 20.48 8.192 20.48 20.48s-8.192 20.48-20.48 20.48z" p-id="1961"></path></svg>

XAML代码：

  <CombinedGeometry Geometry2="M274.432 245.76l69.632 126.976L417.792 245.76h57.344L389.12 389.12h57.344v28.672H372.736v32.768h73.728v28.672H372.736v61.44H319.488v-61.44H241.664V450.56h77.824v-32.768H241.664v-28.672h61.44L212.992 245.76zM757.76 376.832h-167.936c-12.288 0-20.48-8.192-20.48-20.48s8.192-20.48 20.48-20.48h167.936c12.288 0 20.48 8.192 20.48 20.48s-8.192 20.48-20.48 20.48zM757.76 696.32h-491.52c-12.288 0-20.48-8.192-20.48-20.48s8.192-20.48 20.48-20.48h491.52c12.288 0 20.48 8.192 20.48 20.48s-8.192 20.48-20.48 20.48zM757.76 499.712h-167.936c-12.288 0-20.48-8.192-20.48-20.48s8.192-20.48 20.48-20.48h167.936c12.288 0 20.48 8.192 20.48 20.48s-8.192 20.48-20.48 20.48z">
                            <CombinedGeometry.Geometry1>
                                <CombinedGeometry Geometry1="M872.448 1011.712h-4.096c-24.576 0-45.056-8.192-61.44-24.576L737.28 917.504h-4.096l-57.344 57.344c-24.576 16.384-57.344 24.576-81.92 16.384-16.384-4.096-28.672-12.288-40.96-20.48l-53.248-53.248-53.248 53.248c-8.192 8.192-20.48 20.48-40.96 20.48-32.768 8.192-65.536 0-86.016-20.48l-53.248-53.248h-4.096l-69.632 69.632c-16.384 16.384-36.864 24.576-61.44 24.576h-24.576l-8.192-8.192c-8.192-8.192-32.768-20.48-32.768-57.344V266.24h61.44v679.936s0 4.096 4.096 4.096 8.192-4.096 16.384-8.192l77.824-77.824c16.384-16.384 32.768-16.384 40.96-16.384 8.192 0 16.384 4.096 20.48 4.096h8.192l69.632 69.632c8.192 8.192 20.48 8.192 28.672 4.096h8.192v-4.096l57.344-57.344c16.384-16.384 32.768-16.384 40.96-16.384 8.192 0 24.576 0 40.96 16.384l57.344 57.344 4.096 4.096h4.096c4.096 0 16.384 0 28.672-8.192l57.344-57.344c16.384-16.384 32.768-16.384 40.96-16.384 8.192 0 16.384 4.096 20.48 4.096h8.192l86.016 86.016c8.192 8.192 12.288 8.192 16.384 8.192V266.24h61.44v679.936c0 49.152-28.672 65.536-53.248 65.536z m-372.736-102.4z"
                                                  Geometry2="M925.696 851.968h-61.44V131.072c0-28.672-24.576-53.248-53.248-53.248H176.128c-28.672 0-53.248 24.576-53.248 53.248v724.992H65.536V131.072C65.536 69.632 114.688 16.384 180.224 16.384h634.88c61.44 0 114.688 49.152 114.688 114.688v720.896z"/>
                            </CombinedGeometry.Geometry1>
                        </CombinedGeometry>

 

 

方法二：使用 nuget 安装 sharpvectors 包：

Install-Package SharpVectors -Version 1.0.0

在调试时走了一点弯路，后来看到了这篇问答：http://www.jiajianhudong.com/question/778215.html 。

总之要注意两点：1.使用  Source="pack://application:,,,/1.svg"    这种方法来调用 svg 文件，这样才能正确的调用资源。

                             2. svg 文件的属性默认是内容，务必改为  Resource，然后一定要重新生成项目再运行。

<Window x:Class="WpfStudy.Wnd1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfStudy"
        mc:Ignorable="d"
         xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
        Title="Wnd1" Height="450" Width="800">
    <Grid>
        <StackPanel>
            <Button Width="100" Height="100">
                <svgc:SvgViewbox IsHitTestVisible="False"  Source="pack://application:,,,/1.svg"/>
            </Button>
          </StackPanel>
    </Grid>
</Window>