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字體,下一篇單獨總結