Replace SVG Colors in C# – Bulk Recolor SVG Files

Quick Answer

To replace SVG colors in C#, load the file with SVGDocument, find color-bearing attributes such as fill, stroke, and stop-color, compare their values with the source color, update matching values with SetAttribute(), and save the SVG. For imported files, also inspect inline style attributes because they can override presentation attributes.

This article shows how to replace colors throughout an SVG file using Aspose.SVG for .NET. It focuses on practical bulk recoloring tasks: changing brand colors, recoloring icons, replacing gradient stop colors, and preparing SVG files for consistent rendering or conversion.

If you need to inspect an SVG palette before changing it, see Extract SVG Colors in C#. It shows how to list colors from attributes, inline styles, and gradient stops.

You will learn how to:

• Replace fill, stroke, and stop-color values.
• Update inline style attributes that contain color declarations.
• Avoid changing none, currentColor, and url(#id) paint references.
• Save the modified SVG document.

Where SVG Colors Can Be Stored

SVG colors are not always stored in one place. A simple file may use presentation attributes such as fill="#ff0000", while SVG files exported from design tools often use inline styles or CSS rules.

Location	Example	Replace directly?	Notes
Presentation attribute	fill="#d32f2f"	Yes	Common for generated SVG and simple icons
Stroke attribute	stroke="rgb(211, 47, 47)"	Yes	Used for outlines, lines, paths, and icon strokes
Gradient stop	stop-color="#d32f2f"	Yes	Used inside <linearGradient> and <radialGradient>
Inline style	style="fill:#d32f2f; stroke:black"	Yes, but parse carefully	Inline styles override presentation attributes
Paint server reference	fill="url(#gradient1)"	No	Replace colors inside the referenced gradient instead
Special keyword	fill="none" or currentColor	Usually no	Preserve semantic paint values unless your workflow requires otherwise

For a detailed explanation of SVG style priority, see SVG CSS vs Inline Styles vs Presentation Attributes.

Replace Fill, Stroke, and Gradient Attribute Colors

The examples in this article use replace-svg-colors.svg, a small SVG file that contains color values in three common places: presentation attributes, gradient stops, and inline style attributes.

<svg height="300" width="600" xmlns="http://www.w3.org/2000/svg">
    <path d="M 85 135 Q 25 -20 180 100 T 170 250 T 220 150 T 290 50" stroke="grey" stroke-width="3" fill="none" />
    <defs>
        <radialGradient id="myRG" cx="0.5" cy="0.5" r="0.8" fx="0.5" fy="0.5" spreadMethod="pad">
            <stop offset="0%" stop-color="bisque" />
            <stop offset="40%" stop-color="grey" />
            <stop offset="60%" stop-color="silver" />
        </radialGradient>
    </defs>
    <path d="M 120,120 A 70,40 0 0 0 150,180 A 70,50 0 1 1 120,120" style="stroke: grey; stroke-width:3" fill="url(#myRG)" />
    <circle cx="260" cy="60" r="40" style="stroke: grey; stroke-width:3" fill="url(#myRG)" />
</svg>

The following example replaces a specific color wherever it appears in common SVG color attributes. The source color can be a color name, HEX value, RGB value, or another CSS color value, but this example compares the literal attribute text. The example handles fill, stroke, and stop-color, so it works for shapes, paths, text outlines, and gradient stops.

In this example, only colors equal to grey are replaced. Other colors, such as bisque or silver, remain unchanged. Color declarations inside the style attribute are handled separately in the next example.

1. Load the SVG file using the SVGDocument class.
2. Select all SVG elements with QuerySelectorAll("*").
3. Check color-bearing attributes with GetAttribute().
4. Compare the attribute value with the source color name.
5. Replace matching values using SetAttribute().
6. Save the updated SVG.

using Aspose.Svg;
using Aspose.Svg.Dom;
using System;
using System.IO;

// Load the source SVG file that contains color attributes and gradient stops.
using var document = new SVGDocument(Path.Combine(DataDir, "replace-svg-colors.svg"));

// Define the SVG color to find and the replacement color to apply.
string sourceColor = "grey";
string newColor = "#1976d2";

// Limit replacement to SVG attributes that commonly store visible colors.
string[] colorAttributes = { "fill", "stroke", "stop-color" };

// Find all SVG elements and inspect their color-related attributes.
foreach (Element element in document.QuerySelectorAll("*"))
{
    foreach (string attributeName in colorAttributes)
    {
        string value = element.GetAttribute(attributeName);

        if (!string.IsNullOrWhiteSpace(value) &&
            value.Trim().Equals(sourceColor, StringComparison.OrdinalIgnoreCase))
        {
            // Replace only attributes whose value matches the source color.
            element.SetAttribute(attributeName, newColor);
        }
    }
}

// Save the SVG file with replaced attribute colors.
document.Save(Path.Combine(OutputDir, "replace-svg-colors-attributes.svg"));

This approach is intentionally strict: it replaces only attribute values equal to grey, ignoring case. For example, it replaces stroke="grey" and stop-color="grey", but it does not replace stop-color="bisque", stop-color="silver", or style="stroke: grey" (see color replacement result (b)).

If you need to treat equivalent color formats as the same color, for example grey, #808080, and rgb(128, 128, 128), normalize values with the Color class before comparison.

Replace Colors in Inline Style Attributes

Many SVG files contain styles like this:

<path style="stroke: grey; stroke-width:3" fill="url(#myRG)" />

If you only set fill or stroke presentation attributes, the inline style value may still win in the SVG cascade. For bulk recoloring, inspect and update the style attribute as well.

using Aspose.Svg;
using Aspose.Svg.Dom;
using System;
using System.Collections.Generic;
using System.IO;

// Load the source SVG file that contains inline style declarations.
using var document = new SVGDocument(Path.Combine(DataDir, "replace-svg-colors.svg"));

// Define the inline CSS color value to find and the new color value.
string sourceColor = "grey";
string newColor = "#1976d2";

// Select only SVG elements that have a style attribute.
foreach (Element element in document.QuerySelectorAll("[style]"))
{
    string style = element.GetAttribute("style");
    var updatedDeclarations = new List<string>();

    // Split the inline style into individual CSS declarations.
    foreach (string declaration in style.Split(';', StringSplitOptions.RemoveEmptyEntries))
    {
        string[] parts = declaration.Split(':', 2);

        if (parts.Length != 2)
        {
            // Keep malformed or nonstandard declarations unchanged.
            updatedDeclarations.Add(declaration.Trim());
            continue;
        }

        string property = parts[0].Trim();
        string value = parts[1].Trim();

        // Replace only the CSS declaration value that matches the source color.
        if (value.Equals(sourceColor, StringComparison.OrdinalIgnoreCase))
        {
            value = newColor;
        }

        updatedDeclarations.Add($"{property}: {value}");
    }

    // Write the updated inline style back to the SVG element.
    element.SetAttribute("style", string.Join("; ", updatedDeclarations));
}

// Save the SVG file with replaced inline style colors.
document.Save(Path.Combine(OutputDir, "replace-svg-colors-inline-style.svg"));

This example preserves unrelated style declarations such as stroke-width, opacity, font-family, or transform. See color replacement result (c).

If your SVG file contains complex CSS rules inside a <style> element, update the CSS rules intentionally instead of doing broad string replacement. For general style normalization workflows, see Modify SVG Styles Programmatically in C#.

Replace a Color Palette

Branding workflows often require replacing several colors at once. In that case, use a dictionary with the source colors and replacement colors.

using Aspose.Svg;
using Aspose.Svg.Dom;
using System;
using System.Collections.Generic;
using System.IO;

// Load the source SVG file whose colors will be replaced as a palette.
using var document = new SVGDocument(Path.Combine(DataDir, "replace-svg-colors.svg"));

// Map each source SVG color to its replacement color.
var palette = new Dictionary<string, string>(StringComparer.OrdinalIgnoreCase)
{
    ["grey"] = "#a02601",
    ["bisque"] = "#ffd1cf",
    ["silver"] = "#fa90a7"
};

// Search only SVG attributes that store visible paint colors.
string[] colorAttributes = { "fill", "stroke", "stop-color" };

// Replace several known SVG colors with a new palette.
foreach (Element element in document.QuerySelectorAll("*"))
{
    foreach (string attributeName in colorAttributes)
    {
        string value = element.GetAttribute(attributeName);

        if (!string.IsNullOrWhiteSpace(value) &&
            palette.TryGetValue(value.Trim(), out string replacement))
        {
            // Apply the matching palette color to the current SVG attribute.
            element.SetAttribute(attributeName, replacement);
        }
    }
}

// Save the SVG file with the new color palette.
document.Save(Path.Combine(OutputDir, "replace-svg-colors-palette.svg"));

Use this pattern for SVG templates, generated reports, white-label graphics, icon sets, and theme switching.

Color Replacement Results

The figure shows the source SVG file (a), the result of replacing attribute colors (b), the result of replacing inline style colors (c), and the result of replacing a color palette (d).

Common Mistakes and Fixes

Problem	Cause	Fix
Colors other than the source color are replaced	The code replaces every replaceable color instead of checking the current value against sourceColor	Keep the color match check when you want one-color replacement
The color does not change	Inline style overrides the fill or stroke attribute	Update the style attribute or remove the conflicting declaration
Some shapes remain unchanged	They use stroke, stop-color, or CSS rules instead of fill	Check all color-bearing locations before saving
Gradient colors remain unchanged	The element uses fill="url(#id)"	Update the <stop> elements inside the referenced gradient
The icon becomes filled unexpectedly	The code replaced fill="none"	Preserve none unless you intentionally want to fill open shapes
Theme-based SVG stops working	The code replaced currentColor	Keep currentColor when the SVG should inherit color from CSS
A color comparison fails	The same color is written in different formats, such as grey, #808080, and rgb(128, 128, 128)	Normalize values with Color.FromString() before comparing, or use one consistent color format in your SVG

FAQ

Can I replace all SVG colors with one color?
Yes. Iterate through fill, stroke, stop-color, and inline style declarations, skip none, currentColor, and url(#id), then set every replaceable color to the target value.

Should I use string replacement on the SVG file?
Use DOM-based replacement when possible. It is safer because it targets attributes and elements instead of changing unrelated text, IDs, URLs, or metadata.

How do I replace colors in gradients?
Find <stop> elements and update their stop-color attributes. If a shape uses fill="url(#gradient)", the visible colors are defined in the gradient stops, not on the shape itself.

Why does SetAttribute("fill", "...") not affect my SVG?
The element may have an inline style attribute, a CSS rule, fill="none", or a gradient reference. Inspect the SVG source and follow the style priority rules before applying a replacement.

Related Resources

• How to Change SVG Color – Learn the basic workflow for changing fill and stroke on individual SVG elements.
• Extract SVG Colors in C# – Extract a unique SVG color palette before replacing colors.
• Change SVG Background Color – Add or modify SVG background color using a rectangle, CSS, Builder API, or JavaScript.
• Convert Color Codes – Parse and convert color formats with the Color class.
• SVG CSS vs Inline Styles vs Presentation Attributes – Understand why a color update may be overridden.
• Modify SVG Styles Programmatically in C# – Update inline styles and CSS rules safely.