This Gist contains examples Aspose.SVG Working with SVG Colors

README.md

Aspose.SVG for .NET – Working with SVG Colors

This GitHub gist repository contains practical C# code snippets from the Working With SVG Colors in C# chapter of Aspose.SVG for .NET documentation. These practical snippets demonstrate how to programmatically manipulate background and element colors in SVG documents.

Topics Covered

• Add Background Color – Insert a <rect> element with a fill color behind existing SVG content.
• Apply Background Color with CSS – Use internal CSS <style> element with a CSS class to color the SVG background.
• Recolor Elements – Change colors for a background and for content elements.
• Change Background Color – Change the fill attribute value of existing <rect> element that serves as a background.
• Adjust Line and Circle Colors – Update colors for SVG elements like <line> or <circle> programmatically.
• Apply Script for Background Color – Append a <script> element to dynamically add a background rectangle via JavaScript.
• Convert HEX to RGB – Parse HEX color strings and convert them to RGB format.

How to Use These Examples

1. Create a C# project and add the Aspose.SVG for .NET package via NuGet.
2. Find the gist that corresponds to your specific task. Copy the C# code directly from the gist.
3. Adjust file paths, input, and output parameters as needed.
4. Run the code to review the output SVG files in your browser or image viewer to verify applied color changes.

You can download a free trial of Aspose.HTML for .NET and use a temporary license for unrestricted access.

About Aspose.SVG for .NET – SVG Color Manipulation Capabilities

Aspose.SVG for .NET is a cross-platform C# library for creating, editing, and rendering SVG files, ideal for applications on Windows, Linux, and macOS. It provides full support for vector graphics through the DOM API, allowing you to control background fills, element strokes, CSS-based styling, and even dynamic scripts. Built-in color analysis functions simplify workflows that require converting color codes, for example, from hex values ​​to RGB and etc.

Resources & Support

• Documentation – Aspose.SVG for .NET
• API Reference – Aspose.SVG for .NET
• Product page – Aspose.SVG for .NET
• Blog – Aspose.SVG Product Family
• Temporary License
• Free Online Color Converters – Aspose.SVG

Prerequisites

• .NET Platforms: .NET Framework 4.6.1+, .NET Core 2.0+, or .NET 5.
• Supported OS: Windows, Linux, macOS.
• Development environment such as Visual Studio or JetBrains Rider.
• Aspose.SVG for .NET installed via NuGet.

Aspose.SVG for .NET Working with SVG Colors

Aspose.SVG for .NET Working with SVG Colors

Example-AddBackgroundColorToExistingSvg.cs

// Add background color rectangle to existing SVG using C#
//Learn more: https://docs.aspose.com/svg/net/change-svg-background-color/

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

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

// Create a rectangle element and set attributes values
SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS("http://www.w3.org/2000/svg", "rect");
rectElement.X.BaseVal.Value = 3;
rectElement.Y.BaseVal.Value = 3;            
rectElement.SetAttribute("width", "100%");
rectElement.SetAttribute("height", "100%");
rectElement.SetAttribute("fill", "#ebf3f6");

// 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, "add-background-color.svg"));

Example-AddSvgBackgroundUsingCssStyleElement.cs

// Add SVG background color using CSS style element and rectangle with class in C#
//Learn more: https://docs.aspose.com/svg/net/change-svg-background-color/

// 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, "tulips.svg"));

// Get the root <svg> element of the document
SVGSVGElement svgElement = document.RootElement;

// Create a <style> element
SVGStyleElement styleElement = (SVGStyleElement)document.CreateElementNS(SvgNamespace, "style");

// Set the CSS content to define a background color class
styleElement.TextContent = @".background {fill: grey;}";

// Insert the <style> element at the beginning of the <svg> element
svgElement.InsertBefore(styleElement, svgElement.FirstChild);

// Create a rectangle element and set the class to "background"
SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
rectElement.X.BaseVal.Value = -120;
rectElement.Y.BaseVal.Value = 0;
rectElement.SetAttribute("width", "100%");
rectElement.SetAttribute("height", "100%");
rectElement.SetAttribute("class", "background");

// Add the rectangle element as the first child to the <svg> element, after the <style> element
svgElement.InsertBefore(rectElement, svgElement.ChildNodes[1]);

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

Example-ChangeBackgroundAndRecolorSvgElements.cs

// Add circle background and change path stroke color in existing SVG using C# DOM methods
//Learn more: https://docs.aspose.com/svg/net/how-to-change-svg-color/

// 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"));

Example-ChangeBackgroundColor.cs

// Change background color for SVG image using C#
//Learn more: https://docs.aspose.com/svg/net/how-to-change-svg-color/

// 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"));

Example-ChangeBackgroundColorInSvg.cs

// Change background rectangle fill color in SVG using C#
//Learn more: https://docs.aspose.com/svg/net/change-svg-background-color/

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

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

// Get the first <rect> element to change color
SVGRectElement rectElement = svgElement.QuerySelector("rect") as SVGRectElement;

// Set a new "fill" attribute value for the <rect> element
rectElement.SetAttribute("fill", "#fef4fd");

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

Example-ChangeBackgroundColorUsingStyleAttribute.cs

// Set SVG background color using style attribute on root element in C#
//Learn more: https://docs.aspose.com/svg/net/change-svg-background-color/

// Prepare a path to a source SVG file
string documentPath = Path.Combine(DataDir, "tulips.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;

// Create a style attribute for the <svg> element
svgElement.SetAttribute("style", "background: grey");

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

Example-ChangeSvgBackgroundColorUsingBuilder.cs

// Change a background color for an SVG document using SVG Builder
//Learn more: https://docs.aspose.com/svg/net/change-svg-background-color/

//  Initialize an SVG document
using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "tulips.svg")))
{
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(100, LengthType.Percentage)
        .Height(100, LengthType.Percentage)
        .Build(document.FirstChild as SVGSVGElement);

    // Create a new <g> element using SVGGElementBuilder and add <style> and <rect> elements to it
    SVGElement g = new SVGGElementBuilder()
        .Id("backgound")
        .AddStyle(style => style
            .Type("text/css")
            .AddRule(".background", r => r.Fill(Color.Gray)
        )
        .AddRect(rect => rect
            .X(-120).Y(0).Width(100, LengthType.Percentage).Height(100, LengthType.Percentage)
            .Class("background")
        ).BuildElement(document));
    svg.InsertBefore(g, svg.FirstElementChild);

    // Save the document
    document.Save(Path.Combine(OutputDir, "add-background-color-with-builder.svg"));
}

Example-ChangeSvgBackgroundColorUsingJavaScriptElement.cs

// Add SVG background color using embedded JavaScript <script> element in C#
//Learn more: https://docs.aspose.com/svg/net/change-svg-background-color/

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

// Get the root <svg> element of the document
SVGSVGElement svgElement = document.RootElement;

// Create a new <script> element
Element scriptElement = document.CreateElementNS("http://www.w3.org/2000/svg", "script");

// Define JavaScript code to add a <rect> element as the background
scriptElement.TextContent = @"
    var svgElement = document.getElementsByTagName('svg')[0];
    if (svgElement) {
        var rectElement = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
        rectElement.setAttribute('x', '0');
        rectElement.setAttribute('y', '0');
        rectElement.setAttribute('width', '100%');
        rectElement.setAttribute('height', '100%');
        rectElement.setAttribute('fill', '#fef4fd');
        svgElement.insertBefore(rectElement, svgElement.firstChild);
    };
";

// Append the <script> element to the SVG document
svgElement.AppendChild(scriptElement);

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

Example-ChangeSvgCircleColor.cs

// Change circle fill color in existing SVG file using C#
//Learn more: https://docs.aspose.com/svg/net/how-to-change-svg-color/

// 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"));

Example-ChangeSvgLineStrokeColor.cs

// Change line stroke color in SVG file using C# QuerySelector and SetAttribute
//Learn more: https://docs.aspose.com/svg/net/how-to-change-svg-color/

// 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"));

Example-ConvertHexToRgb.cs

// Convert HEX to RGB using C#
//Learn more: https://docs.aspose.com/svg/net/convert-color-codes/

// Parse HEX color from a string
Color color = Color.FromString("#ff31ca");

// Convert HEX to RGB 
string rgbColor = color.ToRgbString();

// Print result to console
Console.WriteLine(rgbColor);
//result should be: rgb(255, 49, 202)