SVG Image Palettes
- 2 minutes to read
The application’s current theme determines an SVG Image‘s predefined colors by default. Refer to the Predefined Colors topic to learn more.
You can change the colors of an SVG image with custom colors manually using 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.
Tip
A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=T615789.
Follow the steps below to change an SVG image’s colors:
Specify your SVG image in markup:
<Image Source="{dx:SvgImageSource Uri=Images/logo.svg}"/>
Bind the current theme name to the SvgImageHelper.State attached property:
<Image Source="{dx:SvgImageSource Uri=Images/logo.svg}" dx:SvgImageHelper.State="{Binding Path=(dx:ThemeManager.TreeWalker).ThemeName, RelativeSource={RelativeSource Self}}"> </Image>
Create the WpfSvgPalette class instance to define your image’s palette. Use the attached WpfSvgPalette.Palette property to specify the palette:
<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.
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:
<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.
Colors can be specified in the default DevExpress SVG palette. Set the WpfSvgPalette.OverridesThemeColors property to true to override the default palettes:
<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>