How to Change SVG Color – C# Examples with Aspose.SVG

Aspose.SVG for .NET API allows you to programmatically edit SVG documents. Coloring is a key part of SVG design: you can colorize SVG shapes, lines, paths, and text, as well as set the fill color of interior areas, the stroke color of outlines, and even add background shapes. This guide provides C# examples that demonstrate:

• How to change the fill or stroke of circles, lines, and other shapes.
• How to add a background rectangle to an SVG file.
• How to recolor an entire SVG image, such as a snowflake.

All examples use the Aspose.SVG for .NET library and follow best practices for clean, maintainable code.

How to add new SVG elements and set their color properties, we covered in detail C# examples in the article Edit SVG Files.

The article SVG Color looks at how SVG text and shapes can be colorized. You’ll find an overview of how color is defined, including the various ways you can control the transparency of SVG content.

Change SVG Color

Filling and stroking are the two primary ways to apply color to SVG elements. All graphical elements such as shapes, paths and text – are rendered by being filled. The SVG stroke and SVG fill are some of the main CSS properties that can be set for any lines, text and shapes. For more information on style attributes’ properties, please see the article Fills and Strokes in SVG.

Aspose.SVG API allows you to change color of various SVG elements in an SVG document. First, you would load an existing SVG document and then, you can change color of required element:

1. Use one of the SVGDocument() constructors of the SVGDocument class to load an existing SVG document.

2. Use the QuerySelector(selector) to find the desired element in the SVG document. The QuerySelector(selector) method of the Element class allows you to get the first element within the document that matches the specified selector. With the resulting elements, you can make various manipulations: change its attributes, CSS styles, and so on.

3. Use the SetAttribute(name, value) method of the Element class to specify element attributes fill or stroke.

Change Circle Color

To change circle color, you should follow a few steps:

• Open a source SVG file.
• Get the root <svg> element of the document.
• Get circle element to change color.
• Set a new fill or stroke attribute value for the circle element.
• Save the SVG document.

The following code snippet shows how to change the circle color for the first SVG circle element in the basic-shapes.svg file shown in Figure (a) below:

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

// Change the fill color of an SVG circle in C#

// Prepare a path to a file loading
string documentPath = Path.Combine(DataDir, "basic-shapes.svg");

// Load an SVG document from the file
SVGDocument document = new SVGDocument(documentPath);

// Get the root SVG element of the document
SVGSVGElement svgElement = document.RootElement;

// Get a <circle> element to change a color
SVGCircleElement circleElement = svgElement.QuerySelector("circle") as SVGCircleElement;

// Set a new "fill" attribute value for the circle element
circleElement.SetAttribute("fill", "green");

// Save the SVG document to a file
document.Save(Path.Combine(OutputDir, "circle-color.svg"));

Change Line Color

To change line color, you should follow similar steps. The C# example below shows how to change line color for the first SVG line element in basic-shapes.svg file:

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

// Change the stroke color of an SVG line using QuerySelector and SetAttribute in C#

// Prepare a path to a file loading
string documentPath = Path.Combine(DataDir, "basic-shapes.svg");

// Load an SVG document from the file
SVGDocument document = new SVGDocument(documentPath);

// Get the root SVG element of the document
SVGSVGElement svgElement = document.RootElement;

// Get a <line> element to change color
SVGLineElement lineElement = svgElement.QuerySelector("line") as SVGLineElement;

// Set a new "stroke" attribute value for the <line> element
lineElement.SetAttribute("stroke", "green");

// Save the SVG document
document.Save(Path.Combine(OutputDir, "line-color.svg"));

The following Figure shows the original image (a) and images with SVG color changes for the circle (b) and the line (c).

The fill attribute sets the color of the SVG circle (Figure b). In the resulting circle-color.svg file, the circle color changes from red (in the original) to green. The stroke attribute sets the color of the SVG line. In the resulting line-color.svg file (Figure c), the line color changes from grey to green. Similarly, you can change color for various SVG graphic elements such as shapes, paths, and text using the fill or stroke attribute.

Change Background Color

To set the background color to SVG image, you should add a new SVG element such as circle or rectangle as the first child in an SVG document. Because the rule about the order of SVG elements showing is: later elements in the code are displayed on top of the previous ones.

The following code snippet shows how to create a new SVG rectangle as a background for SVG image and colorize it:

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

// Change the background color of an SVG image by adding a rectangle in C#

// Load an SVG document from a file
SVGDocument document = new SVGDocument(Path.Combine(DataDir, "basic-shapes.svg"));

// Get the root SVG element of the document
SVGSVGElement svgElement = document.RootElement;

// Create a rectangle element and set the "fill" attribute value to change background color
SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS("http://www.w3.org/2000/svg", "rect");
rectElement.X.BaseVal.Value = 3;
rectElement.Y.BaseVal.Value = 3;
rectElement.Width.BaseVal.Value = 400;
rectElement.Height.BaseVal.Value = 400;
rectElement.SetAttribute("fill", "Salmon");

// Add the rectangle element as the first child to <svg> element
svgElement.InsertBefore(rectElement, svgElement.FirstChild);

// Save the SVG document
document.Save(Path.Combine(OutputDir, "change-background-color.svg"));

The figure shows the visualization of the original SVG file basic-shapes.svg and the same file with the added background color.

Recolor SVG

Let’s draw a snowflake! The following C# example shows how to draw SVG snowflake and recolor it. You can use this approach for any SVG image: change the color of the required SVG element and change the background color:

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

// Add a colored background and recolor SVG path strokes using C# DOM methods

// Set SVG Namespace Url
string SvgNamespace = "http://www.w3.org/2000/svg";

// Load an SVG document from a file
SVGDocument document = new SVGDocument(Path.Combine(DataDir, "snowflake-blue.svg"));

// Get the root SVG element of the document
SVGSVGElement svgElement = document.RootElement;

// Create a <circle> element and set attributes values
SVGCircleElement circleElement = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle");
circleElement.Cx.BaseVal.Value = 150F;
circleElement.Cy.BaseVal.Value = 100F;
circleElement.R.BaseVal.Value = 150F;
circleElement.SetAttribute("fill", "#03b6fd");

// Add the <circle> element (background) as the first child to <svg> element
svgElement.InsertBefore(circleElement, svgElement.FirstChild);

// Get the first <path> element to change color
SVGPathElement snowflakePath = svgElement.QuerySelector("path") as SVGPathElement;

// Set a new "stroke" attribute value for the <path> element
snowflakePath.SetAttribute("stroke", "white");

// Save the SVG document
document.Save(Path.Combine(OutputDir, "recolor-svg.svg"));

The figure shows the visualization of the original SVG file snowflake-blue.svg and the recolored file.

Common Mistakes and Fixes

Problem	Cause	Solution
Color does not change after update	The selected SVG element does not exist or the CSS selector is incorrect	Verify that the selector used in QuerySelector() matches the SVG markup and that the element exists before modifying attributes
Background color is not visible	The background rectangle is added after other SVG elements	Insert the background <rect> as the first child of the <svg> element so it renders behind other shapes
Fill or stroke color is ignored	Inline style attributes override fill or stroke values	Remove or update the style attribute before setting new fill or stroke values
SVG renders incorrectly after modification	New elements were created without the correct SVG namespace	Always create elements using the SVG namespace (http://www.w3.org/2000/svg)
Only part of the SVG changes color	Some elements use stroke instead of fill (or vice versa)	Check whether the element uses fill, stroke, or both, and update the correct attribute
Changes apply only to one element	Multiple SVG elements require recoloring	Use QuerySelectorAll() and iterate over all matching elements to apply color changes consistently
Color values are ignored in browsers	Color string is not in a recognized format (e.g., missing #).	Use proper hex (#RRGGBB) or named color strings.

Quick Recipes

Task	Description	Example
Change fill color of an SVG shape	Updates the fill attribute of a specific SVG element such as <circle>, <rect>, or <path>	circleElement.SetAttribute("fill", "green");
Change stroke color of an element	Modifies the stroke attribute to change line or outline color	lineElement.SetAttribute("stroke", "#FF0000");
Change background color of an SVG	Adds a <rect> element that covers the SVG canvas and acts as a background	rectElement.SetAttribute("fill", "Salmon");
Recolor multiple SVG elements	Applies the same color to several elements using a CSS selector	QuerySelectorAll("circle")
Remove inline styles before recoloring	Ensures fill and stroke attributes are not overridden by inline styles, for example for <rect>	rectElement.RemoveAttribute("style");
Apply color using hexadecimal values	Sets precise colors using hex notation instead of named colors	rectElement.SetAttribute("fill", "#03b6fd");

Conclusion

Changing colors in SVG files with Aspose.SVG for .NET is straightforward. By manipulating the fill and stroke attributes – or by inserting background shapes – you can fully customize the visual appearance of any SVG graphic. The provided C# snippets cover the most common scenarios, from simple shape recoloring to complete image redesign.

Related Resources

• Edit SVG Files – Detailed guide on adding, removing, and modifying SVG elements.
• Change SVG Background Color – Learn how to change SVG background color in C# – by modifying the SVG directly, using inline and internal CSS, and using JavaScript.
• Convert Color Codes – Study of color codes and learn how to programmatically convert color formats – RGB, HEX, HSL, HSV, CMYK, LAB, XYZ, etc.
• You can download the complete examples and data files from GitHub.

Color Converter is a free online application for transforming colors between color formats. Just enter color code and get the result at once! You don’t need any additional software. Try our forceful Color Converter just now!