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

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

Т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

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

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

Not Supported SVG File Format Properties

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

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

Telerik UI for WPF Learning Resources

• Telerik UI for WPF SvgImage Component
• Getting Started with Telerik UI for WPF Components
• Telerik UI for WPF Installation
• Telerik UI for WPF and WinForms Integration
• Telerik UI for WPF Visual Studio Templates
• Setting a Theme with Telerik UI for WPF
• Telerik UI for WPF Virtual Classroom (Training Courses for Registered Users)
• Telerik UI for WPF License Agreement

See Also

• Animations
• Clipping
• Paint Servers