Skip to main content

IMapSvgPaletteProvider Interface

The interface that should be implemented by classes that are SVG palette providers.

Namespace: DevExpress.XtraMap

Assembly: DevExpress.XtraMap.v23.2.dll

NuGet Package: DevExpress.Win.Map


public interface IMapSvgPaletteProvider

The following members return IMapSvgPaletteProvider objects:


The following example shows how to customize the map pushpin appearance.

using System;
using System.Drawing;
using System.Windows.Forms;
using DevExpress.Utils.Design;
using DevExpress.Utils.Svg;
using DevExpress.XtraMap;

private void Form1_Load(object sender, EventArgs e) {

    VectorItemsLayer vectorLayer = new VectorItemsLayer();

    MapItemStorage storage = new MapItemStorage();
    vectorLayer.Data = storage;

    vectorLayer.EnableSelection = true;
    vectorLayer.EnableHighlighting = true;

    MapPushpin pushpin = new MapPushpin();

    pushpin.Angle = 0.7854;
    pushpin.SvgImage = SvgImage.FromFile(GetRelativePath("arrow.svg"));
    pushpin.SvgImageSize = new Size(64, 64);
    pushpin.Location = new GeoPoint(47, -35);
    pushpin.SvgPaletteProvider = new SvgPaletteProvider();

public class SvgPaletteProvider : IMapSvgPaletteProvider {
    ISvgPaletteProvider IMapSvgPaletteProvider.GetSvgPalette(MapElementState state) {
        SvgPalette svgPalette = new SvgPalette();
        // .st0 is the name of the CSS class used in the pushpin's SVG image.
        if ((state & MapElementState.Highlighted) == MapElementState.Highlighted)
            svgPalette.Colors.Add(new SvgColor("st0", Color.Yellow));
        if ((state & MapElementState.Selected) == MapElementState.Selected)
            svgPalette.Colors.Add(new SvgColor("st0", Color.Green));
        if ((state & MapElementState.Normal) == MapElementState.Normal)
            svgPalette.Colors.Add(new SvgColor("st0", Color.Blue));
        return svgPalette;

The example above uses the SVG image (arrow.svg) with the following markup:

<?xml version='1.0' encoding='UTF-8'?>
<svg viewBox="-4 -4 32 32" xmlns="" xmlns:xlink="">
  <g id="Layer_1" transform="translate(-4, -4)" style="enable-background:new 0 0 32 32">
    <g id="Arrow2Up">
       <style type="text/css">
      <polygon points="28,16 16,4 4,16 6.8,18.8 14,11.7 14,28 18,28 18,11.7 25.2,18.8" class="st0"/>
See Also