Predefined Colors

• May 30, 2019

An SVG Image‘s colors can be modified according to the current application theme. Below is the same SVG image in four different themes:

Use the following predefined colors to make your SVG Image support this feature: Red, Green, Blue, Yellow, Black, White. These class names are defined in the default DevExpress SVG palette.

The code sample below is an XML markup for an SVG image created in Adobe Illustrator. In this markup, shapes are painted with the White and Green colors. As a result, such an image can be repainted according to the current application theme.

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 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
    <g id="Add">
        <circle class="Green" cx="16" cy="16" r="14"/>
        <polygon class="White" points="24,14 18,14 18,8 14,8 14,14 8,14 8,18 14,18 14,24 18,24 18,18 24,18"/>
    </g>
</svg>

Note

The SVG Icon Builder uses predefined colors for creating SVG images.

Tip

If you have an SVG image with custom colors, you can change these colors manually using palettes. Refer to the SVG Image Palettes topic for more information.