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?

Answer 1

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:

<Button>   <Rectangle Width="100" Height="100">     <Rectangle.Fill>       <DrawingBrush>         <DrawingBrush.Drawing>            <Drawing ... /> <!-- Converted from SVG -->          </DrawingBrush.Drawing>       </DrawingBrush>     </Rectangle.Fill>   </Rectangle> </Button> 

Using an Image as an icon

An image can be used directly:

<Button>   <Image ... />  <!-- Converted from SVG --> </Button> 

Using a Grid as an icon

A grid can be used directly:

<Button>   <Grid ... />  <!-- Converted from SVG --> </Button> 

Or you can include it in a Viewbox if you need to control the size:

<Button>   <Viewbox ...>     <Grid ... />  <!-- Converted from SVG -->   </Viewbox> </Button> 

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):

<Button>   <Canvas Height="100" Width="100">  <!-- Converted from SVG, with additions -->   </Canvas> </Button> 

Using a Path as an icon

You can use a Path, but you must set the stroke or fill explicitly:

<Button>   <Path Stroke="Red" Data="..." /> <!-- Converted from SVG, with additions --> </Button> 

or

<Button>   <Path Fill="Blue" Data="..." /> <!-- Converted from SVG, with additions --> </Button> 

Using a Geometry as an icon

You can use a Path to draw your geometry. If it should be stroked, set the Stroke:

<Button>   <Path Stroke="Red" Width="100" Height="100">     <Path.Data>       <Geometry ... /> <!-- Converted from SVG -->     </Path.Data>   </Path> </Button> 

or if it should be filled, set the Fill:

<Button>   <Path Fill="Blue" Width="100" Height="100">     <Path.Data>       <Geometry ... /> <!-- Converted from SVG -->     </Path.Data>   </Path> </Button> 

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:

<Button>   <Rectangle Width="100" Height="100">     <Rectangle.Fill>       <DrawingBrush Drawing="{Binding Drawing, Source={StaticResource ...}}" />     </Rectangle.Fill>   </Rectangle> </Button> 

Binding an Image:

<Button Content="{Binding Image}" /> 

Binding a Grid:

<Button Content="{Binding Grid}" /> 

Binding a Grid in a Viewbox:

<Button>   <Viewbox ...>     <ContentPresenter Content="{Binding Grid}" />   </Viewbox> </Button> 

Binding a Canvas:

<Button>   <ContentPresenter Height="100" Width="100" Content="{Binding Canvas}" /> </Button> 

Binding a Path:

<Button Content="{Binding Path}" />  <!-- Fill or stroke must be set in code unless set by the SVG converter --> 

Binding a Geometry:

<Button>   <Path Width="100" Height="100" Data="{Binding Geometry}" /> </Button> 

Answer 2

Install the SharpVectors library

Install-Package SharpVectors 

Add the following in XAML

<UserControl xmlns:svgc="http://sharpvectors.codeplex.com/svgc">     <svgc:SvgViewbox Source="/Icons/icon.svg"/> </UserControl>