Change Gradient Colors in SVG in C#

Quick Answer

To change SVG gradient colors in C#, load the file with SVGDocument, select a <linearGradient> or <radialGradient> with QuerySelector(), update its <stop> elements with SetAttribute(), and save the edited SVG. If a shape should use another gradient, set fill or stroke to url(#gradientId). To export the result, pass the edited document to Converter.ConvertSVG().

This article shows how to edit gradient colors in an existing SVG file using Aspose.SVG for .NET. It focuses on applied recoloring workflows: finding <linearGradient> and <radialGradient> definitions, changing stop-color values, replacing fill="url(#id)" references, saving the updated SVG, and rendering the result to PNG.

This page is about changing gradients that already exist in an SVG document. If you need to create gradients from scratch, see SVG Gradients – SVG Code and C# Examples.

You will learn how to:

• Find linear and radial gradients by ID.
• Update gradient <stop> colors by offset or position.
• Replace stop-color values stored in a style attribute.
• Point SVG shapes to another gradient with fill="url(#id)" or stroke="url(#id)".
• Save the edited SVG and export it to PNG.

Aspose.SVG APIs Used

The examples use the Aspose.SVG DOM API to edit SVG markup and the converter API to render the edited result:

API	Used for
SVGDocument	Loads and saves the SVG document
Element	Represents selected gradients, stops, and painted shapes
QuerySelector()	Selects one gradient or shape by CSS selector
QuerySelectorAll()	Selects all gradient stops or all elements that reference a gradient
GetAttribute()	Reads id, offset, stop-color, fill, stroke, or style values
SetAttribute()	Updates gradient stops and paint server references
ImageSaveOptions	Configures PNG, JPG, WebP, BMP, TIFF, or GIF output
Converter.ConvertSVG()	Exports the edited SVG document to an image file

How SVG Gradient Colors Work

SVG gradients are reusable paint servers. A <linearGradient> or <radialGradient> element usually lives inside <defs>, has an id, and contains child <stop> elements:

<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="10%" stop-color="lightsalmon" />
    <stop offset="50%" stop-color="teal" />
    <stop offset="90%" stop-color="lightpink" />
</linearGradient>

A visible shape does not store the actual gradient colors. It references the gradient by ID:

<ellipse fill="url(#grad1)" />

This means that a gradient recoloring workflow usually has two separate tasks:

Task	What to edit
Change the colors inside a gradient	Update <stop> elements inside <linearGradient> or <radialGradient>
Make a shape use another gradient	Update the shape’s fill or stroke attribute to url(#newGradientId)

Source SVG Used in Examples

The examples use linear-gradient.svg and radial-gradient.svg. The linear sample stores stop colors in the style attribute:

<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="10%" style="stop-color:LIGHTSALMON" />
    <stop offset="50%" style="stop-color:TEAL" />
    <stop offset="90%" style="stop-color:LIGHTPINK" />
</linearGradient>

The radial sample stores stop colors as stop-color attributes:

<radialGradient id="myRG" cx="0.5" cy="0.5" r="0.9" fx="0.5" fy="0.5" spreadMethod="pad">
    <stop offset="0%" stop-color="BISQUE" />
    <stop offset="60%" stop-color="CADETBLUE" />
</radialGradient>

Both forms are valid SVG. The examples below show how to handle each one.

Change Linear Gradient Stop Colors

The following example loads an SVG file, finds a <linearGradient> by ID, and assigns new colors to its stops. It uses the stop order because the sample has three fixed stops. For generated or design-tool SVG files, you can also match stops by their offset values.

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

// Load an SVG file that contains a linear gradient
using var document = new SVGDocument(Path.Combine(DataDir, "linear-gradient.svg"));

// Find the linearGradient element by ID
Element gradient = document.QuerySelector("linearGradient#grad1");

if (gradient == null)
{
    throw new InvalidOperationException("Gradient 'grad1' was not found.");
}

string[] newColors =
{
    "#1565c0",
    "#00acc1",
    "#f9a825"
};

int index = 0;

// Update each stop in the selected linear gradient
foreach (Element stop in gradient.QuerySelectorAll("stop"))
{
    if (index >= newColors.Length)
    {
        break;
    }

    // Write stop-color as a presentation attribute
    stop.SetAttribute("stop-color", newColors[index]);

    // Remove a conflicting inline stop-color declaration if the source SVG used style
    string style = stop.GetAttribute("style");
    if (!string.IsNullOrWhiteSpace(style) &&
        style.IndexOf("stop-color", StringComparison.OrdinalIgnoreCase) >= 0)
    {
        stop.RemoveAttribute("style");
    }

    index++;
}

// Save the SVG file with changed linear gradient colors
document.Save(Path.Combine(OutputDir, "linear-gradient-recolored.svg"));

This approach keeps the gradient geometry unchanged. Only the colors of the transition are changed.

The figure shows the original linear gradient (a) and the same SVG after changing the <linearGradient> stop colors (b).

Change Radial Gradient Stop Colors

Radial gradients use the same stop structure as linear gradients. The difference is in the gradient geometry: a radial gradient transitions from a center or focal point outward. To recolor it, find the <radialGradient> and update its child <stop> elements.

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

// Load an SVG file that contains a radial gradient
using var document = new SVGDocument(Path.Combine(DataDir, "radial-gradient.svg"));

// Find the radialGradient element by ID
Element gradient = document.QuerySelector("radialGradient#myRG");

if (gradient == null)
{
    throw new InvalidOperationException("Gradient 'myRG' was not found.");
}

// Map gradient offsets to new stop colors
var colorsByOffset = new Dictionary<string, string>(StringComparer.OrdinalIgnoreCase)
{
    ["0%"] = "#fce1ff",
    ["60%"] = "#690058"
};

foreach (Element stop in gradient.QuerySelectorAll("stop"))
{
    string offset = stop.GetAttribute("offset")?.Trim();

    if (!string.IsNullOrWhiteSpace(offset) &&
        colorsByOffset.TryGetValue(offset, out string newColor))
    {
        stop.SetAttribute("stop-color", newColor);
    }
}

// Save the SVG file with changed radial gradient colors
document.Save(Path.Combine(OutputDir, "radial-gradient-recolored.svg"));

Matching by offset is useful when the number of stops can change or when you only want to recolor specific positions in the gradient.

The figure shows the original radial gradient (a) and the same SVG after changing radial gradient stop colors by offset (b).

Replace Stop Colors in All Gradients

For bulk editing, scan all gradient stops and replace only the stop colors that match a source value. This is useful for brand refreshes, template processing, or recoloring assets exported from design tools.

Replace stop-color Attributes

Some SVG files store gradient colors directly on <stop> elements, for example stop-color="BISQUE". In this case, read the stop-color attribute, compare it with the source palette, and write the replacement value back with SetAttribute().

Replace stop-color in Inline Styles

Other SVG files store the same value inside the style attribute, for example style="stop-color:TEAL". In this case, parse the inline CSS declarations and update only the stop-color declaration, leaving other style properties unchanged.

The following complete example handles both forms: stop-color attributes and inline style declarations.

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

using var document = new SVGDocument(Path.Combine(DataDir, "linear-gradient.svg"));

var palette = new Dictionary<string, string>(StringComparer.OrdinalIgnoreCase)
{
    ["LIGHTSALMON"] = "#ff7043",
    ["TEAL"] = "#0277bd",
    ["LIGHTPINK"] = "#f06292"
};

// Select stops inside both linear and radial gradients
foreach (Element stop in document.QuerySelectorAll("linearGradient stop, radialGradient stop"))
{
    string stopColor = stop.GetAttribute("stop-color");

    // Replace stop-color written as an SVG attribute
    if (!string.IsNullOrWhiteSpace(stopColor) &&
        palette.TryGetValue(stopColor.Trim(), out string replacement))
    {
        stop.SetAttribute("stop-color", replacement);
    }

    string style = stop.GetAttribute("style");
    if (string.IsNullOrWhiteSpace(style))
    {
        continue;
    }

    var updatedDeclarations = new List<string>();

    foreach (string declaration in style.Split(';', StringSplitOptions.RemoveEmptyEntries))
    {
        string[] parts = declaration.Split(':', 2);

        if (parts.Length != 2)
        {
            updatedDeclarations.Add(declaration.Trim());
            continue;
        }

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

        if (property.Equals("stop-color", StringComparison.OrdinalIgnoreCase) &&
            palette.TryGetValue(value, out replacement))
        {
            value = replacement;
        }

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

    stop.SetAttribute("style", string.Join("; ", updatedDeclarations));
}

document.Save(Path.Combine(OutputDir, "gradient-stops-replaced.svg"));

Use this pattern when you know the old colors and want to replace them wherever they appear in gradient stops. If you need to inspect the palette first, see Extract SVG Colors in C#.

Replace fill=“url(#id)” with Another Gradient

Sometimes the gradient colors are correct, but a shape references the wrong gradient. In that case, change the paint server reference on the shape instead of editing the stops.

Create a New Gradient Definition

First, create a new <linearGradient> element, assign it a unique id, add <stop> elements, and append the gradient to <defs>. The new gradient becomes available as a reusable paint server.

Update Fill References

Then find shapes that use the old paint server reference and set their fill attribute to the new url(#id) value. The following complete example changes every element that uses fill="url(#grad1)" so it uses fill="url(#newBrandGradient)" instead:

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

using var document = new SVGDocument(Path.Combine(DataDir, "linear-gradient.svg"));

string oldGradientRef = "url(#grad1)";
string newGradientRef = "url(#newBrandGradient)";

// Create a new gradient definition.
const string SvgNamespace = "http://www.w3.org/2000/svg";

Element defs = document.QuerySelector("defs");
Element newGradient = document.CreateElementNS(SvgNamespace, "linearGradient");
newGradient.SetAttribute("id", "newBrandGradient");
newGradient.SetAttribute("x1", "0%");
newGradient.SetAttribute("y1", "0%");
newGradient.SetAttribute("x2", "100%");
newGradient.SetAttribute("y2", "0%");

Element firstStop = document.CreateElementNS(SvgNamespace, "stop");
firstStop.SetAttribute("offset", "0%");
firstStop.SetAttribute("stop-color", "#1a237e");

Element secondStop = document.CreateElementNS(SvgNamespace, "stop");
secondStop.SetAttribute("offset", "100%");
secondStop.SetAttribute("stop-color", "#26c6da");

newGradient.AppendChild(firstStop);
newGradient.AppendChild(secondStop);
defs.AppendChild(newGradient);

// Repoint shapes from the old gradient to the new gradient.
foreach (Element element in document.QuerySelectorAll("[fill]"))
{
    string fill = element.GetAttribute("fill");

    if (!string.IsNullOrWhiteSpace(fill) &&
        fill.Trim() == oldGradientRef)
    {
        element.SetAttribute("fill", newGradientRef);
    }
}

document.Save(Path.Combine(OutputDir, "gradient-fill-reference-updated.svg"));

The same idea works for gradient strokes. Search [stroke] and set stroke="url(#newGradientId)".

The figure shows the original SVG using a three-stop gradient fill="url(#grad1)" (a) and the result after repointing the same shapes to a newly created two-stop gradient fill (b).

Save and Export the Edited SVG to PNG

After editing the SVG document, you can save it as SVG and export the same in-memory document to PNG. The PNG output reflects the new gradient colors and updated paint references.

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

using var document = new SVGDocument(Path.Combine(DataDir, "radial-gradient.svg"));

Element gradient = document.QuerySelector("radialGradient#myRG");

foreach (Element stop in gradient.QuerySelectorAll("stop"))
{
    string offset = stop.GetAttribute("offset")?.Trim();

    if (offset == "0%")
    {
        stop.SetAttribute("stop-color", "#fffde7");
    }
    else if (offset == "60%")
    {
        stop.SetAttribute("stop-color", "#283593");
    }
}

string svgOutputPath = Path.Combine(OutputDir, "radial-gradient-edited.svg");
string pngOutputPath = Path.Combine(OutputDir, "radial-gradient-edited.png");

// Save the editable SVG result
document.Save(svgOutputPath);

// Export the edited SVG document to PNG
var options = new ImageSaveOptions();
Converter.ConvertSVG(document, options, pngOutputPath);

Use this workflow when your application needs both an editable vector output and a raster preview or thumbnail.

Common Mistakes and Fixes

Problem	Cause	Fix
The visible shape did not change	The code changed fill on a shape that uses fill="url(#id)"	Edit the referenced gradient stops, or replace the url(#id) reference
The stop color still looks unchanged	A style="stop-color:..." declaration overrides or duplicates the stop-color attribute	Update the style declaration or remove it after setting stop-color
Only one shape changed unexpectedly	Several shapes share the same gradient definition	Duplicate or create a new gradient and point only selected shapes to the new url(#id)
The new gradient is not applied	The id in url(#id) does not match the gradient’s id	Keep the reference and gradient ID exactly aligned
A gradient is not found by selector	The SVG uses a different ID or generated IDs from a design tool	Inspect the SVG first or query all linearGradient, radialGradient elements
Exported PNG does not show the latest colors	The file was converted before edits were applied or a different document instance was converted	Save or convert the edited SVGDocument instance after all updates

FAQ

How do I change SVG gradient colors in C#?
Load the SVG with SVGDocument, find the <linearGradient> or <radialGradient> element, select its child <stop> elements, and update their stop-color values with SetAttribute().

How do I edit linearGradient stops?
Select the gradient with a selector such as linearGradient#grad1, then iterate through gradient.QuerySelectorAll("stop"). You can update stops by order, by offset, or by matching the current color.

How do I replace stop-color in SVG?
For stop-color attributes, call stop.SetAttribute("stop-color", newColor). If the SVG stores the value in style="stop-color:...", parse the style attribute and update that declaration as well.

Why does changing fill not change the gradient colors?
When fill is url(#id), it points to a gradient definition. The actual colors are stored in the gradient’s <stop> elements, not in the shape’s fill attribute.

Can several shapes use the same gradient?
Yes. If you edit the shared gradient definition, every shape that references it changes. To recolor only one shape, create a new gradient or duplicate the existing one, then update that shape’s fill or stroke reference.

Can I export the edited gradient SVG to PNG?
Yes. After changing the SVGDocument, create ImageSaveOptions and call Converter.ConvertSVG(document, options, outputPath).

Related Resources

• SVG Gradients – SVG Code and C# Examples – Learn how to create linear and radial gradients in SVG and C#.
• Extract SVG Colors in C# – Find gradient stop colors before editing.
• Replace SVG Colors in C# – Replace colors across fills, strokes, inline styles, and gradient stops.
• How to Change SVG Color – Change fill and stroke colors on individual SVG elements.
• Convert SVG to Image in C# – Export edited SVG documents to PNG, JPG, WebP, BMP, TIFF, or GIF.