SVG Image Palettes

• Dec 16, 2019
• 3 minutes to read

The application’s current theme determines an SVG Image‘s predefined colors by default. Refer to the Predefined Colors topic for more information.

You can use palettes to replace predefined colors and custom colors that are not defined in DevExpress palettes.

Below is the same SVG image in two different themes:

• Office2016White: the original image with the #333333 color.
• Office2016Black: the palette replaces the #333333 color with #FFFFFE.

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="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"> 
    <path fill="#333333" d="M15,1H1C0.5,1,0,1.5,0,2v12c0,0.5,0.5,1,1,1h14c0.5,0,1-0.5,1-1V2C16,1.5,15.5,1,15,1z M15,14H1V2h14V14z"/> 
    <path fill="#039C30" d="M0,5V2c0-0.5,0.5-1,1-1h14c0.6,0,1,0.5,1,1v3H0z"/> 
    <g id="Layer_2" opacity="0.6"> 
        <rect x="1" y="2" fill="#FFFFFF" width="14" height="2"/> 
    </g> 
    <rect x="1" y="5" fill="#FFFFFF" width="14" height="9"/> 
    <polygon fill="#333333" points="7.5,12.5 4.5,9.5 5.5,8.5 7.5,10.5 11.5,6.5 12.5,7.5 "/> 
</svg>  

Tip

GitHub Example: How to replace colors for SVG images using palettes

Follow the steps below to change an SVG image’s colors:

1. Specify your SVG image in markup:

   XAML

   <Image Source="{dx:SvgImageSource Uri=Images/logo.svg}"/>
   

2. Bind the current theme name to the SvgImageHelper.State attached property:

   XAML

   <Image Source="{dx:SvgImageSource Uri=Images/logo.svg}" 
          dx:SvgImageHelper.State="{Binding Path=(dx:ThemeManager.TreeWalker).ThemeName, RelativeSource={RelativeSource Self}}">
   </Image>
   

3. Create the WpfSvgPalette class instance to define your image’s palette. Use the attached WpfSvgPalette.Palette property to specify the palette:

   XAML

   <Image Source="{dx:SvgImageSource Uri=Images/logo.svg}" 
          dx:SvgImageHelper.State="{Binding Path=(dx:ThemeManager.TreeWalker).ThemeName, RelativeSource={RelativeSource Self}}">
       <dx:WpfSvgPalette.Palette>
           <dx:WpfSvgPalette/>
       </dx:WpfSvgPalette.Palette>
   </Image>
   

   The WpfSvgPalette.Palette is an inherited property. This means you can specify it at the root level instead of setting it for each image.

4. You can change a certain theme’s colors:

   • Create the WpfSvgPalette class instance and add it to the WpfSvgPalette.States dictionary.
   • Specify the state’s Key to the theme name.
   • Define a Brush to replace colors.

   The code sample below shows how to change the Office2016Black theme’s #333333 color to #FFFFFE:

   XAML

   <Image Source="{dx:SvgImageSource Uri=Images/logo.svg}" 
          dx:SvgImageHelper.State="{Binding Path=(dx:ThemeManager.TreeWalker).ThemeName, RelativeSource={RelativeSource Self}}">
       <dx:WpfSvgPalette.Palette>
           <dx:WpfSvgPalette>
               <dx:WpfSvgPalette.States>
                   <dx:WpfSvgPalette x:Key="Office2016Black">
                       <SolidColorBrush x:Key="#333333" Color="#FFFFFE"/>
                   </dx:WpfSvgPalette>
               </dx:WpfSvgPalette.States>
           </dx:WpfSvgPalette>
       </dx:WpfSvgPalette.Palette>
   </Image>
   

   The root palette is used if a state-specific palette is not specified.

   Note

   To override predefined colors, declare the brush’s key as follows: Predefined Color Name + “Color”.

   Xaml

   <SolidColorBrush x:Key="RedColor" Color="#FFFFFE"/>
   

   In this case, the brush repaints SVG shapes declared with the Red class:

   Xml

   <polygon class="Red" points="4,22 10,16 4,10 4,14 0,14 0,18 4,18"/> 
   

5. The SVG render engine searches colors that your palette does not override in the default DevExpress SVG theme palette. If the SVG image has such colors, they are replaced with colors from the default palette. Set the WpfSvgPalette.OverridesThemeColors property to true to not check the default DevExpress SVG theme palette. In this case, the SVG image keeps its original colors in all themes unless they are overridden in a specific palette.

   XAML

   <Image Source="{dx:SvgImageSource Uri=Images/logo.svg}" 
          dx:SvgImageHelper.State="{Binding Path=(dx:ThemeManager.TreeWalker).ThemeName, RelativeSource={RelativeSource Self}}">
       <dx:WpfSvgPalette.Palette>
           <dx:WpfSvgPalette OverridesThemeColors="True">
               <!-- -->
           </dx:WpfSvgPalette>
       </dx:WpfSvgPalette.Palette>
   </Image>