Specifying SVG Images

• Dec 16, 2019
• 2 minutes to read

In Markup

The Image Picker tool displays the collection of SVG images stored in the DevExpress.Images.v19.2.dll assembly.

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

GitHub Example: How to use the SvgImageSource extension to specify a vector image as BarButtonItem’s glyph

In Code-Behind

1. Call the SvgImageHelper.CreateImage method to create an SVG Image.
2. Call the WpfSvgRenderer.CreateImageSource method to render the SVG Image to an ImageSource object.

C#

var image = SvgImageHelper.CreateImage(absoluteUri);
return WpfSvgRenderer.CreateImageSource(image, 1d, null, null, true);

VB.NET

Dim image = SvgImageHelper.CreateImage(absoluteUri)
Return WpfSvgRenderer.CreateImageSource(image, 1R, Nothing, Nothing, True)

Tip

GitHub Example: How to specify SVG images manually

This example provides a ViewModel with string paths to *.svg files. You can convert these string paths to ImageSource objects and show a ListBox with your SVG images: