WPF使用SVG簡單整理

1、SVG是什麼

它的英文全稱爲Scalable Vector Graphics，意思爲可縮放的矢量圖形。

 具體參考:https://www.w3.org/Graphics/SVG/

 

2、SVG製做

一、在iconfont網站選擇要須要的圖標加入到項目，進行編輯

二、在線網站svg文件編輯製做

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

三、使用Inkscape軟件 

    這個軟件在處理svg明顯強大的多，有詳細幫助文檔和示例，具體參考官網。 

 

3、WPF裏使用SVG

我經常使用的有三種方式：

一、單個圖標的svg,

    直接複製path下面d屬性的內容 到wpf Path裏面使用，一般在Iconfont搜索下載

二、直接加載svg文件，就像加載圖片路徑同樣

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

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