Specifying SVG Images

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

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

ImagesSVGMarkup

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.
var image = SvgImageHelper.CreateImage(absoluteUri);
return WpfSvgRenderer.CreateImageSource(image, 1d, null, null, 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:

ImagesSVGCodeBehind

See Also