Getting Started with WPF RadSvgImage

This tutorial will walk you through the creation of a sample application that contains a RadSvgImage control.

Assembly References

To use RadSvgImage, add a reference to the following assembly:

Telerik.Windows.Controls

Adding Telerik Assemblies Using NuGet

To use RadSvgImage when working with NuGet packages, install the Telerik.Windows.Controls.for.Wpf.Xaml package. The package name may vary slightly based on the Telerik dlls set - Xaml or NoXaml

Read more about NuGet installation in the Installing UI for WPF from NuGet Package article.

Defining the RadSvgImage as a Stand-Alone Component

You can add RadSvgImage manually in XAML as demonstrated in the following example:

Adding RadSvgImage in XAML

<telerik:RadSvgImage/>

Displaying an SVG image

To display an SVG image in the RadSvgImage control, you can set the UriSource property.

Displaying an SVG image using the UriSource property

<telerik:RadSvgImage UriSource="MySVGImage.svg" 
                     Width="128" 
                     Height="128"/>

RadSvgImage with an SVG image

WPF RadSvgImage with an SVG image

Тhe RadSVGImage control does not have a specified size by default. When placed in a panel that measures it with double.PositiveInfinity, for example, in a StackPanel, it will need to have a set size in order to display the SVG image.

Defining the RadSvgImage as a Markup Extension

The RadSvgImage control provides the ability to use it as a markup extension, instead of defining it as a stand-alone component.

RadSvgImage as a markup extension

<Image Source="{telerik:RadSvgImageSource Source='MySVGImage.svg'}" 
       Width="128" 
       Height="128"/>

RadSvgImage as a markup extension

WPF RadSvgImage as a markup extension

Displaying an Xml-Based String

The RadSvgImage control provides the XmlSource property that allows you to set an xml-based string and display it.

Setting the XmlSource property

this.svgImage.XmlSource = "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\r\n<svg height=\"100\" width=\"100\">\r\n  <circle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"black\" stroke-width=\"3\" fill=\"red\" />\r\n</svg>";

Me.svgImage.XmlSource = "<?xml version=""1.0"" encoding=""UTF-8"" standalone=""no""?>" & vbCrLf & "<svg height=""100"" width=""100"">" & vbCrLf & "  <circle cx=""50"" cy=""50"" r=""40"" stroke=""black"" stroke-width=""3"" fill=""red"" />" & vbCrLf & "</svg>"

RadSvgImage displaying an xml-based string

WPF RadSvgImage displaying an xml-based string

Overriding Color

The RadSVGImage component allows you to replace the fill color of the geometry that displays the SVG image. To do so, set the OverrideColor property.

Setting the OverrideColor property

<telerik:RadSvgImage UriSource="MySVGImage.svg" 
                     OverrideColor="Red" 
                     Width="128" 
                     Height="128"/>

RadSvgImage with set OverrideColor

WPF RadSvgImage with set OverrideColor

Not Supported SVG File Format Properties

The RadSvgImage control does not support the following SVG file format properties:

<audio/>
<mask/>
<mpath/>
<canvas/>
<video/>