WPF使用SVG简单整理

一、SVG是什么

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

 具体参考:https://www.w3.org/Graphics/SVG/

 

二、SVG制作

1、在iconfont网站选择要需要的图标加入到项目，进行编辑

2、在线网站svg文件编辑制作

    http://www.zuohaotu.com/svg/
    https://www.zhangxinxu.com/sp/svg/
    https://c.runoob.com/more/svgeditor/

3、使用Inkscape软件 

    这个软件在处理svg明显强大的多，有详细帮助文档和示例，具体参考官网。 

 

三、WPF里使用SVG

我常用的有三种方式：

1、单个图标的svg,

    直接复制path下面d属性的内容 到wpf Path里面使用，通常在Iconfont搜索下载

2、直接加载svg文件，就像加载图片路径一样

   需要使用svg文件的库：https://github.com/ElinamLLC/SharpVectors

3、将svg转换为xaml并将其与原生wpf对象一起使用

   首推 Inkscape软件能保存为Xaml文件，wpf里面直接使用。

   也可以使用开源工具：SvgToXaml 转换为DrawingImage 资源

   简单举例一个转换例子，渐变背景加一个图标。如下：

 <Window.Resources>
        <DrawingImage x:Key="svg_DrawingImage">
            <DrawingImage.Drawing>
                <DrawingGroup ClipGeometry="M0,0 V353 H152 V0 H0 Z">

                    <GeometryDrawing Geometry="F0 M152,353z M0,0z M43.986,167.058C53.875,167.058 61.892,175.092 61.892,185.002 61.892,194.912 53.875,202.946 43.986,202.946 34.097,202.946 26.08,194.912 26.08,185.002 26.08,175.092 34.097,167.058 43.986,167.058z">
                        <GeometryDrawing.Brush>
                            <LinearGradientBrush StartPoint="26.0803,185.0014"
                                                 EndPoint="61.8916,185.0014"
                                                 MappingMode="Absolute"
                                                 SpreadMethod="Pad"
                                                 Opacity="1">
                                <GradientStop Color="#FF3FEAAF"
                                              Offset="0" />
                                <GradientStop Color="#FF0BE873"
                                              Offset="0.73549999999999993" />
                            </LinearGradientBrush>
                        </GeometryDrawing.Brush>
                    </GeometryDrawing>

                    <GeometryDrawing Brush="#FFFFFFFF"
                                     Geometry="F1 M152,353z M0,0z M51.162,175.539L36.302,175.539 32.233,182.101 43.492,196.465 55.739,182.099 51.162,175.539z M43.747,176.506L48.205,181.798 39.734,181.798 43.747,176.506z M39.298,181.436L37.053,176.106 43.339,176.106 39.298,181.436z M48.258,182.366L43.52,194.536 39.5,182.366 48.258,182.366z M38.904,182.366L43.086,195.027 33.161,182.366 38.904,182.366z M48.809,182.514L48.827,182.536 48.899,182.366 54.767,182.366 43.908,195.104 48.809,182.514z M49.137,181.798L51.283,176.703 54.837,181.798 49.137,181.798z M50.899,176.154L48.667,181.453 48.649,181.446 44.151,176.107 50.865,176.107 50.899,176.154z M36.51,176.279L38.835,181.798 33.088,181.798 36.51,176.279z" />

                </DrawingGroup>
            </DrawingImage.Drawing>
        </DrawingImage>
    </Window.Resources>
    <Grid>
        <Image Source="{StaticResource svg_DrawingImage}" />
    </Grid>

 

总结：推荐Inkscape设计svg文件，功能强大同时能导出很多种格式。 

 关于wpf如何使用 iconfont字体,下一篇单独总结