WPF What is the correct way of using SVG files as icons in WPF

Question

Can someone describe a recommended Step by Step procedure for doing this  Step1  Convert SVG to XAML    thats easy Step2  Now what

User · Answer

Windows 10 build 15063  Creators Update  natively supports SVG images  though with some gotchas  to UWP UAP applications targeting Windows 10   If your application is a WPF app rather than a UWP UAP  you can still use this API  after jumping through quite a number of hoops   Windows 10 build 17763  October 2018 Update  introduced the concept of XAML islands  as a  preview  technology but I believe allowed in the app store  in all cases  with Windows 10 build 18362  May 2019 Update  XAML islands are no longer a preview feature and are fully supported  allowing you to use UWP APIs and controls in your WPF applications   You need to first add the references to the WinRT APIs  and to use certain Windows 10 APIs that interact with user data or the system  e g  loading images from disk in a Windows 10 UWP webview or using the toast notification API to show toasts   you also need to associate your WPF application with a package identity  as shown here  immensely easier in Visual Studio 2019   This shouldn t be necessary to use the Windows UI Xaml Media Imaging SvgImageSource class  though   Usage  if you re on UWP or you ve followed the directions above and added XAML island support under WPF  is as simple as setting the Source for an  lt Image   gt  to the path to the SVG  That is equivalent to using SvgImageSource  as follows    lt Image gt       lt Image Source gt           lt SvgImageSource UriSource  Assets svg icon svg    gt       lt  Image Source gt   lt  Image gt    However  SVG images loaded in this way  via XAML  may load jagged aliased  One workaround is to specify a RasterizePixelHeight or RasterizePixelWidth value that is double  your actual height width    lt SvgImageSource RasterizePixelHeight  300  RasterizePixelWidth  300  UriSource  Assets svg icon svg    gt   lt  -- presuming actual height or width is under 150 -- gt    This can be worked around dynamically by creating a new SvgImageSource in the ImageOpened event for the base image   var svgSource   new SvgImageSource new Uri  ms-appx       Icon    PrayerIcon ImageOpened     s  e    gt        var newSource   new SvgImageSource svgSource UriSource       newSource RasterizePixelHeight   PrayerIcon DesiredSize Height   2      newSource RasterizePixelWidth   PrayerIcon DesiredSize Width   2      PrayerIcon2 Source   newSource     PrayerIcon Source   svgSource    The aliasing may be hard to see on non high-dpi screens  but here s an attempt to illustrate it   This is the result of the code above  an Image that uses the initial SvgImageSource  and a second Image below it that uses the SvgImageSource created in the ImageOpened event     This is a blown up view of the top image     Whereas this is a blown-up view of the bottom  antialiased  correct  image      you ll need to open the images in a new tab and view at full size to appreciate the difference

User · Answer

You can use the resulting xaml from the SVG as a drawing brush on a rectangle  Something like this    lt Rectangle gt      lt Rectangle Fill gt        --- insert the converted xaml s geometry here ---     lt  Rectangle Fill gt   lt  Rectangle gt

User · Answer

Use the SvgImage or the SvgImageConverter extensions  the SvgImageConverter supports binding  See the following link for samples demonstrating both extensions   https   github com ElinamLLC SharpVectors tree master TutorialSamples ControlSamplesWpf

User · Answer

Install the SharpVectors library Install-Package SharpVectors  Add the following in XAML  lt UserControl xmlns svgc  quot http   sharpvectors codeplex com svgc quot  gt       lt svgc SvgViewbox Source  quot  Icons icon svg quot   gt   lt  UserControl gt

User · Answer

Another alternative is dotnetprojects SVGImage This allows native use of  svg files directly in xaml  The nice part is  it is only one assembly which is about 100k  In comparision to sharpvectors which is much bigger any many files  Usage      xmlns svg1  quot clr-namespace SVGImage SVG assembly DotNetProjects SVGImage quot       lt svg1 SVGImage Name  quot mySVGImage quot  Source  quot  MyDemoApp component Resources MyImage svg quot   gt       That s all  See   https   www nuget org packages DotNetProjects SVGImage  https   github com dotnetprojects SVGImage

User · Answer

We can use directly the path s code from the SVG s code         lt Path gt           lt Path Data gt               lt PathGeometry Figures  M52 8 105l-1 9 4 1c

User · Answer

Your technique will depend on what XAML object your SVG to XAML converter produces   Does it produce a Drawing   An Image   A Grid   A Canvas   A Path   A Geometry   In each case your technique will be different   In the examples below I will assume you are using your icon on a button  which is the most common scenario  but note that the same techniques will work for any ContentControl   Using a Drawing as an icon  To use a Drawing  paint an approriately-sized rectangle with a DrawingBrush    lt Button gt     lt Rectangle Width  100  Height  100  gt       lt Rectangle Fill gt         lt DrawingBrush gt           lt DrawingBrush Drawing gt              lt Drawing       gt   lt  -- Converted from SVG -- gt            lt  DrawingBrush Drawing gt         lt  DrawingBrush gt       lt  Rectangle Fill gt     lt  Rectangle gt   lt  Button gt    Using an Image as an icon  An image can be used directly    lt Button gt     lt Image       gt    lt  -- Converted from SVG -- gt   lt  Button gt    Using a Grid as an icon  A grid can be used directly    lt Button gt     lt Grid       gt    lt  -- Converted from SVG -- gt   lt  Button gt    Or you can include it in a Viewbox if you need to control the size    lt Button gt     lt Viewbox     gt       lt Grid       gt    lt  -- Converted from SVG -- gt     lt  Viewbox gt   lt  Button gt    Using a Canvas as an icon  This is like using an image or grid  but since a canvas has no fixed size you need to specify the height and width  unless these are already set by the SVG converter     lt Button gt     lt Canvas Height  100  Width  100  gt    lt  -- Converted from SVG  with additions -- gt     lt  Canvas gt   lt  Button gt    Using a Path as an icon  You can use a Path  but you must set the stroke or fill explicitly    lt Button gt     lt Path Stroke  Red  Data         gt   lt  -- Converted from SVG  with additions -- gt   lt  Button gt    or   lt Button gt     lt Path Fill  Blue  Data         gt   lt  -- Converted from SVG  with additions -- gt   lt  Button gt    Using a Geometry as an icon  You can use a Path to draw your geometry   If it should be stroked  set the Stroke    lt Button gt     lt Path Stroke  Red  Width  100  Height  100  gt       lt Path Data gt         lt Geometry       gt   lt  -- Converted from SVG -- gt       lt  Path Data gt     lt  Path gt   lt  Button gt    or if it should be filled  set the Fill    lt Button gt     lt Path Fill  Blue  Width  100  Height  100  gt       lt Path Data gt         lt Geometry       gt   lt  -- Converted from SVG -- gt       lt  Path Data gt     lt  Path gt   lt  Button gt    How to data bind  If you re doing the SVG -  XAML conversion in code and want the resulting XAML to appear using data binding  use one of the following   Binding a Drawing    lt Button gt     lt Rectangle Width  100  Height  100  gt       lt Rectangle Fill gt         lt DrawingBrush Drawing   Binding Drawing  Source  StaticResource          gt       lt  Rectangle Fill gt     lt  Rectangle gt   lt  Button gt    Binding an Image    lt Button Content   Binding Image     gt    Binding a Grid    lt Button Content   Binding Grid     gt    Binding a Grid in a Viewbox    lt Button gt     lt Viewbox     gt       lt ContentPresenter Content   Binding Grid     gt     lt  Viewbox gt   lt  Button gt    Binding a Canvas    lt Button gt     lt ContentPresenter Height  100  Width  100  Content   Binding Canvas     gt   lt  Button gt    Binding a Path    lt Button Content   Binding Path     gt    lt  -- Fill or stroke must be set in code unless set by the SVG converter -- gt    Binding a Geometry    lt Button gt     lt Path Width  100  Height  100  Data   Binding Geometry     gt   lt  Button gt

[wpf] WPF What is the correct way of using SVG files as icons in WPF

Examples related to wpf

Examples related to svg