Log In
[Expand]General Information
[Collapse]WinForms Controls
 [Expand]What's Installed
 [Expand]Build an Application
 [Expand]Controls and Libraries
 [Collapse]Common Features
  [Expand]Data Binding Common Concepts
  [Expand]Data Source Wizard
  [Expand]Application Appearance
  [Expand]Filtering UI Context
  [Collapse]High DPI Support
    How To: Draw and Use SVG Images
  [Expand]Scaffolding Wizard
  [Expand]Formatting Values
   HTML Text Formatting
  [Expand]Tooltip Management
  [Expand]Saving and Restoring Layouts
   Clipboard - Copy Data and Formatting
   Version Compatibility: Default Property Values
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Report Server
[Expand]eXpressApp Framework
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

How To: Draw and Use SVG Images

Scalable Vector Graphics (SVG) is an XML-based vector image format. This article contains guidelines on creating images of this format and utilizing them within your applications.

Expanded Draw SVG Icons

SVG images can be produced by vector graphics editors, such as Adobe Illustrator, Inkscape, Adobe Flash Professional or CorelDRAW.

Image Size and Grid Settings
Draw SVG icons with regard to actual sizes in which these icons will be used. For example, if you paint a 32x32 icon, make sure dimensions of all shapes are multiples of 2 pixels. Otherwise, downscaling this icon to 16x16 size will produce a shape with an uneven amount of pixels and this shape will look blurry.
In order to follow this recommendation, set correct grid sizes in your graphics editor. The figure below illustrates a valid image with 2-pixel grid cells.

DevExpress controls colorize SVG images according to the current application skin. The figure below illustrates a button with a vector image assigned, as it appears in four different skins.

If you want your custom SVG icons to support this feature, utilize exact same colors as DevExpress skins do. Alternatively, you can use valid .css style names. Below is an XML markup for an SVG image created by Adobe Illustrator. In this markup, all shapes are painted with the White and Green styles. Both names match those in the default DevExpress SVG palette. As a result, such an image will support colorization.

The following table enumerates all six colors of the default DevExpress SVG palette and style names that match these colors. Icons that utilize these colors will support skin colorization.

Style Name Color Hex Code Color Sample
Red #D04D2F
Green #4DAE89
Blue #377AB5
Yellow #EEB764
Black #000000

Do not use gradient colors, animations and external .css styles. These features are currently not supported.

Expanded Assign SVG Icons to DevExpress Controls

To assign a vector image to an item, expand the ImageOptions properties section and utilize required ...SvgImage properties. For example, BarItems provide the SvgImage and DisabledSvgImage properties to assign vector icons for regular and disabled item states respectively. Click the ellipsis button to invoke the DevExpress Image Selector dialog and choose a vector image from a local storage or form/project resources.

Every ...SvgImage property is coupled with the related ...SvgImageSize property. The figure below illustrates these size properties for the mentioned BarItem class.

Size properties act in the following manner.

  • If items use no other logic to size their icons, ...SvgImageSize properties will be in effect. In case the property is not manually set and equals the default (0, 0) value, the image will be drawn as is. For example, the figure below illustrates a toolbar with four buttons. The last button displays a vector image scaled to 64x64 pixels.

  • In case items provide other properties, ...SvgImageSize settings will be ignored. For example, the same button from the image above will be drawn as a 16x16 or 32x32 icon when the parent button is hosted within a Ribbon, since for this scenario, the BarItem.RibbonStyle property is predominant.

Expanded Assign SVG Icons Manually

The DevExpress.Utils library provides public API for you to manually assign SVG icons for non-DevExpress controls or DevExpress controls that do not yet support vector icons.

  1. Call the DevExpress.Utils.Svg.SvgBitmap.FromFile or DevExpress.Utils.Svg.SvgBitmap.FromStream method to initialize an SVG bitmap from a file or stream respectively.

  2. Call the static DevExpress.Utils.Svg.SvgPaletteHelper.GetSvgPalette method to retrieve a color palette for the current application skin and visual element state (normal, hovered, pressed, etc.). You can skip this step in case you need to assign an SVG item to a control that does not support DevExpress skins (e.g., any standard WinForms control).

  3. Call the DevExpress.Utils.Svg.SvgBitmap.Render method to produce a raster image based on your SVG bitmap. This method takes two parameters: a palette (see the previous step) and a scale factor (set to 1 to draw an image as is). If you do not specify a scale factor manually, the icon will be rendered according to the current system DPI setting.

The code below assigns the same vector icon to a Data Grid column and a standard WinForms button. Since the grid column supports skinning, its icon is rendered dynamically on the GridView.CustomDrawCell event, with regard to current Look And Feel settings. A button in turn receives a permanent icon that will not be redrawn.

How would you rate this topic?​​​​​​​