SVG Images and Color Palettes

• Feb 10, 2022
• 4 minutes to read

SVG images scale without quality loss and vector image draw routines can switch between multiple color schemes to change an image’s appearance in response to runtime events.

The DevExpress SVG engine can use colors defined within an image file or colors from external palettes to render vector primitives. In the latter case, the engine chooses those palette colors whose names match the CSS style class names defined within an SVG file. Each CSS style class in DevExpress SVG icons includes the ‘fill’ or ‘stroke’ attribute to indicate that the CSS color fills an enclosed shape or its outline.

The DevExpress SVG engine can use either colors defined within an image file or named colors from external palettes to render vector primitives. In the latter case, the engine identifies required colors within a palette by names of the CSS style classes that declare ‘fill’ or ‘stroke’ attribute colors. All SVG icons in the DevExpress Icon Library include such CSS classes to allow the engine to use palettes instead of built-in color values (in vector skins, for instance).

The example below shows an XML structure of the “ChartBubble” DevExpress SVG icon. Its solid circles within the geometry section refer to the fill colors defined in the corresponding CSS classes by their names.

XML

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0py"
viewbox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">  <!-- CSS Style Classes -->
 .Green{fill:#039C23;}  <!-- The class name followed by the 'fill' attribute and the corresponding built-in hexadecimal color code -->
 .Black{fill:#727272;}
 .Red{fill:#D11C1C;}
 .Yellow{fill:#FFB115;}
 .Blue{fill:#1177D7;}
 .White{fill:#FFFFFF;}
 .st0{opacity:0.5;}
 .st1{opacity:0.75;}
</style>  <!-- End of the CSS styles declaration -->
<g id="ChartBubble">  <!-- The SVG geometry section.  Each line defines a circle filled with the color defined the CSS class or identically named color within an applied color palette -->
 <circle class="Yellow" cx="11" cy="21" r="7" />
 <circle class="Blue" cx="23" cy="11" r="5"/>
 <circle class="Green" cx="24" cy="22" r="2" />
 <circle class="Red" cx="12" cy="6" r="4" />
</g>  <!-- The end of the SVG geometry section. -->
</svg>

The most of DevExpress color palettes are dictionaries populated with TdxAlphaColor values and their names as keys. An advanced color palette can store and manage two color palettes that correspond to the ‘fill’ and ‘stroke’ CSS attributes.

The following code example populates only the FillColors palette to override the “Yellow”, “Blue”, “Green”, and “Red” colors to which the “ChartBubble” icon’s solid circles refer. The listed routine calls an image container’s StretchDraw procedure twice to paint the same icon on two surfaces: the left one shows the custom palette while the other one demonstrates built-in CSS colors for comparison.

Delphi

uses
..., dxGDIPlusClasses, dxCoreGraphics;
//...
procedure MyForm.cxButton1Click(Sender: TObject);
var
  AImageContainer: TdxSmartGlyph;
  APalette: TdxAdvancedColorPalette;
begin
  AImageContainer := TdxSmartGlyph.Create;  // Creates an empty image container
  APalette := TdxAdvancedColorPalette.Create;  // Creates an empty advanced color palette
  APalette.FillColors['Yellow'] := TdxAlphaColors.YellowGreen;
  APalette.FillColors['Blue'] := TdxAlphaColors.CadetBlue;
  APalette.FillColors['Green'] := TdxAlphaColors.DarkGreen;
  APalette.FillColors['Red'] := TdxAlphaColors.Coral;
  AImageContainer.LoadFromFile('D:\ChartBubble.svg'); // Loads the ChartBubble SVG icon
  AImageContainer.StretchDraw(PaintBox1.Canvas.Handle, PaintBox1.ClientRect, 255, APalette);  // Uses the custom palette to paint the stored image.  Note that you do not need to free the created palette in code, since the procedure accepts it via the IdxColorPalette interface.
  AImageContainer.StretchDraw(PaintBox2.Canvas.Handle, PaintBox2.ClientRect);  // Paints the stored image without a palette
  AImageContainer.Free;  // Releases the image container to avoid memory leaks
end;

C++

void __fastcall MyForm.cxButton1Click(TObject *Sender)
{
  TdxSmartGlyph *AImage;
  TdxAdvancedColorPalette *APalette;
  AImageContainer = new TdxSmartGlyph();  // Creates an empty image container
  APalette = new TdxAdvancedColorPalette();  // Creates an empty advanced color palette
  APalette->FillColors["Yellow"] = TdxAlphaColors::YellowGreen;
  APalette->FillColors["Blue"] = TdxAlphaColors::CadetBlue;
  APalette->FillColors["Green"] = TdxAlphaColors::DarkGreen;
  APalette->FillColors["Red"] = TdxAlphaColors::Coral;
  AImageContainer->LoadFromFile("D:\ChartBubble.svg");  // Loads the ChartBubble SVG icon
  AImageContainer->StretchDraw(PaintBox1->Canvas->Handle, PaintBox1->ClientRect, 255, *APalette);  // Uses the custom palette to paint the stored image.  Note that you need to dereference a pointer to the palette in a StretchDraw procedure call.  As in Delphi code, do not call the palette's destructor.
  AImageContainer->StretchDraw(PaintBox2->Canvas->Handle, PaintBox2->ClientRect);  // Paints the stored image without a palette
  delete AImageContainer;  // Frees the image container to avoid memory leaks
}