[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 and Skin Colors
  [Expand]Filtering UI Context
  [Collapse]High DPI Support
    DirectX Hardware Acceleration
    How To: Draw and Use SVG Images
  [Expand]Scaffolding Wizard
  [Expand]Formatting Values
   HTML Text Formatting
  [Expand]Tooltip Management
  [Expand]Saving and Restoring Layouts to a File, Stream and System Registry
   Clipboard - Copy and Paste Operations. Data 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]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

How To: Draw and Use SVG Images

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

Expanded Draw SVG Icons


To draw SVG icons, launch the SVG Icon Builder tool available from Visual Studio's "DEVEXPRESS" menu. You can also use third-party vector graphics editors, such as Adobe Illustrator, Inkscape, Adobe Flash Professional or CorelDRAW.

Image Size and Grid Settings

When creating SVG icons you should consider their intended application. For example, if you draw a 32x32 icon and have a 3-pixel wide shape, downscaling it to 16x16 pixels produces a 1.5 pixel line that looks blurry. To avoid this, make sure you use even dimensions. The figure below illustrates an image with 2-pixel grid cells.


DevExpress controls choose SVG icon colors according to the current application skin and\or SVG skin palette. Below is a button with a vector image as it appears in four different skins.

If you want your custom SVG icons to support this feature, either paint icon shapes with the same colors as DevExpress skins or utilize valid .css style names. The table below shows the six default DevExpress skin palette colors and their corresponding color codes:

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

Below is an XML markup for an SVG image created in Adobe Illustrator. In this markup, 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 can be repainted.


Gradient colors, animations, and external .css styles are not currently supported.

Expanded SVG Icon Builder

The SVG Icon Builder is a tool for creating vector icons by combining and re-painting sample images from DevExpress.

To launch the SVG Icon Builder:

  1. Run Visual Studio.
  2. Select DevExpress | All Platforms | Run SVG Icon Builder ...

Alternatively, you can download the Icon Builder from the Microsoft Store as a stand-alone application.

In the following figure, a large (main) "Document" image and one small (action) "Pencil" image are combined to create a custom "Edit Document" vector icon:

To create icons in the SVG Icon Builder, drag images from the list onto the preview area. You can then use the dialog's toolbox to move, rotate and flip images horizontally.

The color selector allows you to re-paint each part of a vector image.

Expanded Assign SVG Icons to DevExpress Controls

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

You can also switch to the "DX Image Gallery" tab to choose vector icons from the DevExpress Image Gallery.

Every ...SvgImage property has a related ...SvgImageSize property. The figure below illustrates the BarItem class's size properties.

Size properties behave in the following manner:

  • If items provide properties that manage icon sizes, the ...SvgImageSize settings are ignored. For example, the BarItem.RibbonStyle property specifies that a button icon is either 16x16 or 32x32 when this button is in a Ribbon.
  • If items use no specific logic to set their icon sizes, the ...SvgImageSize properties are in effect. Set the icon size manually or leave it as 0x0 to draw the icon as is. For example, the Bar Manager does not limit icon sizes, so you can have 64x64 icons as shown below.

Expanded Assign SVG Icons Manually

If a control supports SVG Icons and has a related SvgImage property, create a new DevExpress.Utils.Svg.SvgImage class instance and assign it to that property. The SvgImage class provides the FromFile, FromResources and FromStream methods to load vector icons from different sources.

The DevExpress.Utils library provides a public API for manually assigning SVG icons to third-party controls or DevExpress controls that do not support vector icons yet.

  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.
  2. Call the static DevExpress.Utils.Svg.SvgPaletteHelper.GetSvgPalette method to retrieve the current application skin's and visual element state's color palette. Skip this step when assigning SVG icons to third-party controls that do not support DevExpress skins.
  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 renders 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. The button receives a permanent icon that is never redrawn. The grid column, in turn, supports Glyph Skinning and you should render its icon accordingly to current Look And Feel and Skinning settings.

Is this topic helpful?​​​​​​​