本文說如何顯示SVG

【】 本來在我一個白天晚上按鈕，使用圖片，圖片不清晰

這些圖片在http://www.zcool.com.cn/，不知道是不是不能直接用 我們需要一個看起來不會模糊，因爲矢量圖，所以我們就使用svg，其實png也是，但是他播放模糊。

lindexi

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<g>
 <circle fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" cx="32" cy="32" r="16"/>
 <line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="32" y1="10" x2="32" y2="0"/>
 <line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="32" y1="64" x2="32" y2="54"/>
 <line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="54" y1="32" x2="64" y2="32"/>
 <line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="0" y1="32" x2="10" y2="32"/>
 <line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="48" y1="16" x2="53" y2="11"/>
 <line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="11" y1="53" x2="16" y2="48"/>
 <line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="48" y1="48" x2="53" y2="53"/>
 <line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="11" y1="11" x2="16" y2="16"/>
</g>
</svg>

我們開始使用Image，但是沒有顯示

於是網上有一個庫Mntone.SvgForXaml，https://github.com/mntone/SvgForXaml，我們用Nuget

安裝Mntone.SvgForXaml，安裝win2d 1.11.0

我們上面那個代碼就是svg，我們使用ViewModel綁定，綁定內容是SvgDocument

自然我們需要寫一個字符串去轉換

 private void Svgimage()
 {
 string str = @"<?xml version=""1.0"" encoding=""utf-8""?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC ""-//W3C//DTD SVG 1.1//EN"" ""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"">
<svg version=""1.1"" id=""Layer_1"" xmlns=""http://www.w3.org/2000/svg"" xmlns:xlink=""http://www.w3.org/1999/xlink"" x=""0px"" y=""0px""
 width=""64px"" height=""64px"" viewBox=""0 0 64 64"" enable-background=""new 0 0 64 64"" xml:space=""preserve"">
<g>
 <circle fill=""none"" stroke=""#000000"" stroke-width=""2"" stroke-miterlimit=""10"" cx=""32"" cy=""32"" r=""16""/>
 <line fill=""none"" stroke=""#000000"" stroke-width=""2"" stroke-miterlimit=""10"" x1=""32"" y1=""10"" x2=""32"" y2=""0""/>
 <line fill=""none"" stroke=""#000000"" stroke-width=""2"" stroke-miterlimit=""10"" x1=""32"" y1=""64"" x2=""32"" y2=""54""/>
 <line fill=""none"" stroke=""#000000"" stroke-width=""2"" stroke-miterlimit=""10"" x1=""54"" y1=""32"" x2=""64"" y2=""32""/>
 <line fill=""none"" stroke=""#000000"" stroke-width=""2"" stroke-miterlimit=""10"" x1=""0"" y1=""32"" x2=""10"" y2=""32""/>
 <line fill=""none"" stroke=""#000000"" stroke-width=""2"" stroke-miterlimit=""10"" x1=""48"" y1=""16"" x2=""53"" y2=""11""/>
 <line fill=""none"" stroke=""#000000"" stroke-width=""2"" stroke-miterlimit=""10"" x1=""11"" y1=""53"" x2=""16"" y2=""48""/>
 <line fill=""none"" stroke=""#000000"" stroke-width=""2"" stroke-miterlimit=""10"" x1=""48"" y1=""48"" x2=""53"" y2=""53""/>
 <line fill=""none"" stroke=""#000000"" stroke-width=""2"" stroke-miterlimit=""10"" x1=""11"" y1=""11"" x2=""16"" y2=""16""/>
</g>
</svg>
";
 Svg=SvgDocument.Parse(str);

 }

然後我們在我們的界面

先使用命名Mntone.SvgForXaml.UI.Xaml

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

然後綁定

 <Grid>
 <svg:SvgImage x:Name="Svg" Content="{x:Bind View.Svg,Mode=OneWay}"></svg:SvgImage>
 </Grid>

當然我們也可以放在我們的解決方案，假如我們的圖片 Assets/weather_sun.svg

那麼我們可以給我們的svgImage一個x:Name="Svg"

file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/weather_sun.svg"));

await Svg.LoadFileAsync(file);

原文：因爲他會佔用內存，我們需要手動把它釋放

我們寫在我們頁面關掉，其實這個並不是關掉，只是我們的頁面不顯示

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

我們可以簡單把svg轉換爲我們之前的圖片，JPG，png

先讓用戶選擇保存的文件，然後選擇.jpg或.png

var picker = new FileSavePicker();
 picker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
 picker.DefaultFileExtension = ".png";
 picker.FileTypeChoices.Add(new KeyValuePair<string, IList<string>>("Bitmap image", new[] { ".bmp" }.ToList()));
 picker.FileTypeChoices.Add(new KeyValuePair<string, IList<string>>("Png image", new[] { ".png" }.ToList()));
 picker.FileTypeChoices.Add(new KeyValuePair<string, IList<string>>("Jpeg image", new[] { ".jpg", ".jpe", ".jpeg" }.ToList()));
 picker.FileTypeChoices.Add(new KeyValuePair<string, IList<string>>("Gif image", new[] { ".gif" }.ToList()));

SvgImageRendererFileFormat format;可以SvgImageRendererFileFormat.Bitmap或者什麼自己選

await SvgImageRenderer.RendererImageAsync(file, new SvgImageRendererSettings()
{
 Document = content,
 Format = format,
 Scaling = 0.1f,
 Quality = 0.95f
});

參見：http://igrali.com/2015/12/24/how-to-render-svg-in-xaml-windows-10-uwp/

代碼：https://github.com/lindexi/UWP/tree/master/uwp/src/ScalableVectorGraphic

因爲已經有人寫了，和我一樣，駙馬說他用過Svg to Xaml 做，我求請教了駙馬大神，在github找到庫，好像簡單。

---