New to Telerik UI for WinForms? Download free 30-day trial

Customize the Color for SVG Images


Product Version Product Author
2021.3.119 SVG Images for WinForms Desislava Yordanova


Telerik UI for WinForms suite offers support for vector images. This article demonstrates a sample approach how you can change the color used in the vector image.



First, you need to open the svg file in Notepad and have a look of its definition and what elements are contained, e.g. paths, polygons, etc. Then, you can look for the respective elements in the RadSvgImage and customize the respective Stroke or Fill:

It is important to note that depending on the internal structure of the svg image you may need to customize more internal elements.

public partial class RadForm1 : Telerik.WinControls.UI.RadForm
    RadSvgImage miniSVG = null;
    RadPictureBox radPictureBox1 = new RadPictureBox() { Size = new Size(150,100), Location = new Point(10,10) };
    RadColorSelector radColorSelector1 = new RadColorSelector() { Location = new Point(200,10) }; 

    public RadForm1()
        radPictureBox1.Location = new Point(10,10);
        miniSVG = RadSvgImage.FromFile(@"..\..\mini.svg");
        this.radPictureBox1.SvgImage = miniSVG;
        radColorSelector1.ColorChanged += radColorSelector1_ColorChanged;

    private void radColorSelector1_ColorChanged(object sender, ColorChangedEventArgs args)
        IEnumerable<SvgPath> paths = miniSVG.Document.Children.FindSvgElementsOf<SvgPath>();
        IEnumerable<SvgPolygon> polygons = miniSVG.Document.Children.FindSvgElementsOf<SvgPolygon>();
        foreach (SvgPath path in paths)
            path.Stroke = new SvgColourServer(args.SelectedColor);
            path.Fill = new SvgColourServer(args.SelectedColor);

        foreach (SvgPolygon polygon in polygons)
            polygon.Stroke = new SvgColourServer(args.SelectedColor);
            polygon.Fill = new SvgColourServer(args.SelectedColor);

        // clear the cache of RadSvgImage
        this.radPictureBox1.SvgImage = null;
        this.radPictureBox1.SvgImage = miniSVG;

Private miniSVG As RadSvgImage = Nothing
Private radPictureBox1 As RadPictureBox = New RadPictureBox() With {
    .Size = New Size(150, 100),
    .Location = New Point(10, 10)
Private radColorSelector1 As RadColorSelector = New RadColorSelector() With {
    .Location = New Point(200, 10)

Public Sub New()
    radPictureBox1.Location = New Point(10, 10)
    miniSVG = RadSvgImage.FromFile("..\..\mini.svg")
    Me.radPictureBox1.SvgImage = miniSVG
    AddHandler radColorSelector1.ColorChanged, AddressOf radColorSelector1_ColorChanged
End Sub

Private Sub radColorSelector1_ColorChanged(ByVal sender As Object, ByVal args As ColorChangedEventArgs)
    Dim paths As IEnumerable(Of SvgPath) = miniSVG.Document.Children.FindSvgElementsOf(Of SvgPath)()
    Dim polygons As IEnumerable(Of SvgPolygon) = miniSVG.Document.Children.FindSvgElementsOf(Of SvgPolygon)()

    For Each path As SvgPath In paths
        path.Stroke = New SvgColourServer(args.SelectedColor)
        path.Fill = New SvgColourServer(args.SelectedColor)

    For Each polygon As SvgPolygon In polygons
        polygon.Stroke = New SvgColourServer(args.SelectedColor)
        polygon.Fill = New SvgColourServer(args.SelectedColor)

    Me.radPictureBox1.SvgImage = Nothing
    Me.radPictureBox1.SvgImage = miniSVG
End Sub

See Also

In this article