Specifying SVG Images

• Mar 12, 2021
• 2 minutes to read

This topic describes how to specify SVG Images:

• In Markup
• In Code-Behind

In Markup

You can specify SVG images in markup using the SvgImageSourceExtension extension. This markup extension can be used with any property supporting the ImageSource value.

The following table shows the extension’s properties:

Property	Description
SvgImageSourceExtension.Uri	Gets or sets a System.Uri object that specifies the SVG image’s file.
BaseSvgImageSourceExtension.Size	Gets or sets the SVG image’s sizes.
BaseSvgImageSourceExtension.AutoSize	Gets or sets whether SVG image sizes are calculated automatically.

The code sample below shows how to use the SvgImageSourceExtension to specify an SVG image as a BarButtonItem‘s glyph:

XAML

<dxb:BarContainerControl>
    <dxb:MainMenuControl>
        <dxb:BarButtonItem Glyph="{dx:SvgImageSource Uri=Images/Notebook1.svg}"/>
        <dxb:BarButtonItem Glyph="{dx:SvgImageSource Uri=Images/Notebook2.svg}"/>
        <dxb:BarButtonItem Glyph="{dx:SvgImageSource Uri=Images/Notebook3.svg}"/>
    </dxb:MainMenuControl>
</dxb:BarContainerControl>

The following image shows the result:

Tip

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=T407507.

In Code-Behind

You can specify SVG images in code-behind. The code sample below shows a ViewModel with string paths to *.svg files:

C#

public MainWindow() {
   InitializeComponent();
   DataContext = new List<String>() { "Images/First.svg", "Images/Last.svg" };
}

VB.NET

Public Sub MainWindow()
    InitializeComponent()
    DataContext = New List(Of String)() From {"Images/First.svg", "Images/Last.svg"}
End Sub

You can convert these string paths to ImageSource objects:

C#

public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
    var uri = uriConverter.ConvertFrom(value) as Uri;
    if (uri == null) return null;
    var absoluteUri = uri.IsAbsoluteUri ? uri : new Uri(baseUri, uri);
    using(var stream = UriStreamHelper.GetStream(absoluteUri)) {
       object unused = null;
       var image = SvgImageHelper.GetOrCreateSvgImage(stream, ref unused);
       return WpfSvgRenderer.CreateImageSource(image, 1d, null, null, true);
    }
}

VB.NET

Public Function Convert(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As CultureInfo) As Object
    Dim uri = TryCast(uriConverter.ConvertFrom(value), Uri)
    If uri Is Nothing Then Return Nothing
    Dim absoluteUri = If(uri.IsAbsoluteUri, uri, New Uri(baseUri, uri))
    Using stream = UriStreamHelper.GetStream(absoluteUri)
        Dim unused As Object = Nothing
        Dim image = SvgImageHelper.GetOrCreateSvgImage(stream, unused)
        Return WpfSvgRenderer.CreateImageSource(image, 1, Nothing, Nothing, True)
    End Using
End Function

The image below shows a ListBox with your SVG images:

Tip

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=T612359.