Extract SVG Colors in C#

Quick Answer

To extract SVG colors in C#, load the file with SVGDocument, select elements with QuerySelectorAll(), read fill, stroke, stop-color, and style values with GetAttribute(), and collect unique color values. Use Color.FromString() when you need normalized HEX output.

This article shows how to extract colors from an SVG file using Aspose.SVG for .NET. It focuses on color audit workflows: finding all colors used in an SVG, building a unique color palette, detecting gradient colors, and preparing SVG assets for later recoloring or validation.

You will learn how to:

• Extract unique colors from fill, stroke, and stop-color attributes.
• Skip non-color paint values such as none, currentColor, and url(#gradient).
• Read color declarations from inline style attributes.
• Extract colors from SVG gradients.
• Normalize extracted color values to HEX for comparison.

Aspose.SVG APIs Used

The examples use the Aspose.SVG DOM API to inspect SVG markup and the drawing API to normalize color values:

API	Used for
SVGDocument	Loads the SVG file and gives access to the document tree
Element	Represents SVG elements returned by selectors
QuerySelectorAll()	Selects all SVG elements, elements with inline styles, or gradient stop elements
GetAttribute()	Reads fill, stroke, stop-color, and style attribute values
Color	Parses and converts extracted color strings
Color.FromString()	Creates a Color object from a named color, HEX, RGB, or another supported color value
ToRgbHexString()	Converts a parsed color to HEX output

When to Extract SVG Colors

Extracting colors is useful when you need to inspect SVG assets before changing or publishing them. Common scenarios include:

• Auditing user-uploaded SVG files.
• Building a color palette from an icon or illustration.
• Checking whether an SVG uses only approved brand colors.
• Finding gradient stop colors before editing gradients.
• Preparing a list of source colors for a recoloring workflow.

If you already know which colors to replace, see Replace SVG Colors in C#. This article focuses only on reading and listing colors.

Source SVG Used in Examples

The examples use replace-svg-colors.svg, a small SVG file that contains colors in presentation attributes, gradient stops, and inline style attributes.

SVG fragment	Where the color is stored	How the examples handle it
stroke="grey"	SVG presentation attribute	Extracted by the attribute example
stop-color="bisque"	Gradient stop attribute	Extracted by the attribute and gradient examples
stop-color="grey"	Gradient stop attribute	Extracted by the attribute and gradient examples
stop-color="silver"	Gradient stop attribute	Extracted by the attribute and gradient examples
style="stroke: grey; stroke-width:3"	Inline CSS declaration	Extracted by the inline style example
fill="none"	Paint keyword	Skipped because it is not a visible color
fill="url(#myRG)"	Paint server reference	Skipped as an element color; gradient stops are inspected instead

This distinction matters because SVG color extraction is not a single lookup. A visible SVG color may be stored directly on an element, inside a gradient definition, or inside a CSS declaration.

Extract Colors from SVG Attributes

The following example extracts unique color values from common SVG color attributes: fill, stroke, and stop-color. It uses QuerySelectorAll("*") to inspect every SVG element and GetAttribute() to read each candidate color attribute. It skips values that are not direct colors, such as none, currentColor, and url(#myRG).

Use this approach when you want a quick inventory of colors stored directly in SVG markup. It is a good first pass for generated SVG files and for simple graphics where colors are defined as presentation attributes.

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

// Extract unique SVG colors from fill, stroke, and stop-color attributes in C#

// Load the source SVG file
using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "replace-svg-colors.svg")))
{
    // Inspect attributes that commonly store visible SVG colors
    string[] colorAttributes = { "fill", "stroke", "stop-color" };

    // Use a case-insensitive set to keep only unique color values
    SortedSet<string> colors = new SortedSet<string>(StringComparer.OrdinalIgnoreCase);

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

            if (string.IsNullOrWhiteSpace(value))
            {
                continue;
            }

            string color = value.Trim();

            // Skip paint keywords and paint server references that are not direct colors
            if (color.Equals("none", StringComparison.OrdinalIgnoreCase) ||
                color.Equals("currentColor", StringComparison.OrdinalIgnoreCase) ||
                color.StartsWith("url(", StringComparison.OrdinalIgnoreCase))
            {
                continue;
            }

            colors.Add(color);
        }
    }

    // Print the unique SVG colors found in attributes
    foreach (string color in colors)
    {
        Console.WriteLine(color);
    }
}

For the sample file, this code finds colors such as grey, bisque, and silver. It does not treat fill="url(#myRG)" as a color because that value points to a gradient definition.

Expected console output:

bisque
grey
silver

Extract Colors from Inline Style Attributes

Some SVG files store colors inside inline CSS:

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

In this case, stroke is not an SVG attribute. It is a CSS declaration inside the style attribute. The following example uses QuerySelectorAll("[style]") to select only elements with inline styles, then reads the full style string with GetAttribute(“style”).

This second pass is important for SVG files exported by design tools, where colors are often written as CSS declarations rather than presentation attributes.

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

// Extract SVG colors from inline CSS style attributes in C#

// Load the source SVG file
using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "replace-svg-colors.svg")))
{
    // Inspect CSS properties that commonly store visible SVG colors
    HashSet<string> colorProperties = new HashSet<string>(StringComparer.OrdinalIgnoreCase)
    {
        "fill",
        "stroke",
        "color",
        "stop-color"
    };

    SortedSet<string> colors = new SortedSet<string>(StringComparer.OrdinalIgnoreCase);

    // Select only elements with inline style attributes
    foreach (Element element in document.QuerySelectorAll("[style]"))
    {
        string style = element.GetAttribute("style");

        // 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)
            {
                continue;
            }

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

            if (!colorProperties.Contains(property))
            {
                continue;
            }

            // Skip paint keywords and paint server references that are not direct colors
            if (value.Equals("none", StringComparison.OrdinalIgnoreCase) ||
                value.Equals("currentColor", StringComparison.OrdinalIgnoreCase) ||
                value.StartsWith("url(", StringComparison.OrdinalIgnoreCase))
            {
                continue;
            }

            colors.Add(value);
        }
    }

    // Print the unique SVG colors found in inline styles
    foreach (string color in colors)
    {
        Console.WriteLine(color);
    }
}

This example reads inline style colors without changing the SVG document. For editing style values after inspection, see Modify SVG Styles Programmatically in C#.

For the sample file, the inline style pass extracts grey from style="stroke: grey; stroke-width:3" and ignores stroke-width because it is not a color property.

Extract Gradient Colors

When an SVG element uses fill="url(#myRG)", the visible colors are stored inside the referenced gradient, not on the element itself. To extract gradient colors, select <stop> elements with QuerySelectorAll("stop[stop-color]") and read their stop-color attributes with GetAttribute().

This example is intentionally narrower than the first one: it looks only at gradient stops. Use it when you need to audit gradient palettes separately from flat fills and strokes.

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

// Extract colors from SVG linear and radial gradient stops in C#

// Load the source SVG file
using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "replace-svg-colors.svg")))
{
    SortedSet<string> gradientColors = new SortedSet<string>(StringComparer.OrdinalIgnoreCase);

    // Select gradient stop elements that define stop-color values
    foreach (Element stopElement in document.QuerySelectorAll("stop[stop-color]"))
    {
        string color = stopElement.GetAttribute("stop-color").Trim();

        if (!string.IsNullOrWhiteSpace(color))
        {
            gradientColors.Add(color);
        }
    }

    // Print the unique colors used in SVG gradient stops
    foreach (string color in gradientColors)
    {
        Console.WriteLine(color);
    }
}

Use this pattern when you need to audit gradients separately from flat fills and strokes.

Expected console output:

bisque
grey
silver

Normalize Extracted Colors to HEX

SVG colors can be written in different formats: named colors, HEX values, RGB values, HSL values, and more. If you need to compare colors reliably, normalize extracted color values with the Color class.

The Color.FromString() method parses a CSS color string into a Color object. Then ToRgbHexString() returns a consistent HEX representation that is easier to compare, store, or report.

using Aspose.Svg.Drawing;
using System;
using System.Collections.Generic;

// Normalize SVG color names, HEX values, and RGB values to HEX in C#

List<string> sourceColors = new List<string>
{
    "red",
    "#808080",
    "rgb(128, 128, 128)"
};

// Convert each color value to HEX for easier comparison
foreach (string sourceColor in sourceColors)
{
    Color color = Color.FromString(sourceColor);
    Console.WriteLine($"{sourceColor} -> {color.ToRgbHexString()}");
}

Normalization helps you detect duplicates when the same visual color is written in different formats. For more color conversion examples, see Convert Color Codes.

Use normalization as a second step after extraction. The extraction examples above keep the original text values so you can see exactly how colors are written in the SVG source.

Build a Unique SVG Color Palette

The final example combines attribute colors and inline style colors into one unique palette. It keeps paint server references out of the result and collects the direct color values used by the SVG.

This is the most practical workflow when you need one palette for reporting, validation, or a later replacement step. It combines the attribute scan and the inline style scan, while still skipping none, currentColor, and url(#id).

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

// Build a unique SVG color palette from attributes and inline styles in C#

using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "replace-svg-colors.svg")))
{
    string[] colorAttributes = { "fill", "stroke", "stop-color" };
    HashSet<string> colorProperties = new HashSet<string>(StringComparer.OrdinalIgnoreCase)
    {
        "fill",
        "stroke",
        "color",
        "stop-color"
    };

    SortedSet<string> palette = new SortedSet<string>(StringComparer.OrdinalIgnoreCase);

    // Collect direct color values from SVG presentation attributes
    foreach (Element element in document.QuerySelectorAll("*"))
    {
        foreach (string attributeName in colorAttributes)
        {
            string value = element.GetAttribute(attributeName);

            if (string.IsNullOrWhiteSpace(value))
            {
                continue;
            }

            string color = value.Trim();

            if (!color.Equals("none", StringComparison.OrdinalIgnoreCase) &&
                !color.Equals("currentColor", StringComparison.OrdinalIgnoreCase) &&
                !color.StartsWith("url(", StringComparison.OrdinalIgnoreCase))
            {
                palette.Add(color);
            }
        }
    }

    // Collect direct color values from inline CSS declarations
    foreach (Element element in document.QuerySelectorAll("[style]"))
    {
        string style = element.GetAttribute("style");

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

            if (parts.Length != 2)
            {
                continue;
            }

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

            if (colorProperties.Contains(property) &&
                !value.Equals("none", StringComparison.OrdinalIgnoreCase) &&
                !value.Equals("currentColor", StringComparison.OrdinalIgnoreCase) &&
                !value.StartsWith("url(", StringComparison.OrdinalIgnoreCase))
            {
                palette.Add(value);
            }
        }
    }

    // Print the complete unique SVG color palette
    foreach (string color in palette)
    {
        Console.WriteLine(color);
    }
}

Use this combined workflow when you need a practical SVG color inventory before validation, reporting, or recoloring.

Expected console output for the sample file:

bisque
grey
silver

Common Mistakes and Fixes

Problem	Cause	Fix
The palette contains url(#id) values	The scan collected paint server references from fill or stroke	Skip url(...) values and inspect gradient <stop> elements separately
The palette contains values that are not visible colors	The scan included paint keywords such as none or inherited values such as currentColor	Filter these values unless you intentionally audit SVG paint semantics
Gradient colors are missing from the report	Only shape attributes were inspected, while the actual colors are stored in <stop> elements	Query stop[stop-color] and read the stop-color attribute
Duplicate colors appear	The same visual color is written as a name, HEX, or RGB	Normalize values with Color.FromString() before comparing
Inline style colors are missing	Only SVG presentation attributes were inspected	Parse elements with the [style] selector and read color-related CSS declarations
CSS rule colors are missing	Colors are stored inside a <style> element or external stylesheet	Inspect CSS rules separately when your SVG uses stylesheet-based styling

FAQ

How do I extract all colors from an SVG file in C#?
Use SVGDocument to load the file, QuerySelectorAll("*") to inspect SVG elements, and GetAttribute() to read fill, stroke, and stop-color. Parse inline style attributes separately and collect unique values in a HashSet or SortedSet.

How do I get a unique SVG color palette in C#?
Collect colors from SVG attributes and inline styles, skip none, currentColor, and url(#id), then store the results in a case-insensitive SortedSet<string>. Normalize with Color.FromString() if equivalent values such as grey and #808080 should be treated as the same color.

How do I extract gradient colors from SVG?
Select gradient stop elements with QuerySelectorAll("stop[stop-color]") and read each stop-color value with GetAttribute(). A shape with fill="url(#id)" references a gradient and does not store the actual gradient colors itself.

How do I extract colors from inline SVG styles?
Select elements with QuerySelectorAll("[style]"), split the style attribute into CSS declarations, and read color-related properties such as fill, stroke, color, and stop-color.

Should none, currentColor, and url(#id) be included in an SVG color palette?
Usually no. none means no paint, currentColor is inherited from CSS, and url(#id) references a paint server such as a gradient. Skip them for a direct color palette, or keep them only for a full paint audit.

How do I normalize extracted SVG colors to HEX?
Use Color.FromString() to parse each extracted color string, then call ToRgbHexString() to output a consistent HEX value. This helps deduplicate colors written as names, HEX, or RGB values.

Can I use extracted SVG colors for recoloring?
Yes. Use the extracted palette as the source list for a replacement map, then update matching fill, stroke, stop-color, or inline style values. See Replace SVG Colors in C# for the replacement workflow.

Related Resources

• Replace SVG Colors in C# – Replace colors after extracting or auditing an SVG palette.
• Convert Color Codes – Parse and convert SVG color values between formats.
• SVG CSS vs Inline Styles vs Presentation Attributes – Learn where SVG colors can be defined and which styling method wins.
• Modify SVG Styles Programmatically in C# – Inspect and edit inline style declarations and CSS rules.
• SVG Gradients – Learn how SVG gradients store colors in <stop> elements.