How to Modify SVG Styles Programmatically in C#

This article focuses exclusively on how to programmatically rewrite and normalize SVG styles at the DOM level using C#.

Why SVG Style Normalization Is Required

In real-world workflows, SVG files are rarely authored for programmatic processing. They are typically produced by design tools, third-party services, or user uploads and contain a mix of styling mechanisms:

• inline style attributes – highest priority
• embedded or external CSS rules – medium priority
• presentation attributes (fill, stroke) – lowest priority

These mechanisms do not have equal priority. If this is not taken into account, programmatic style changes may appear to not work even though the code executes correctly. Before changing anything, it is crucial to understand where styles come from and which ones take precedence. If you’re not familiar with SVG styling models, see SVG Styles in Aspose.SVG: CSS vs Inline vs Attributes.

This article focuses only on DOM-level style modification using C# and Aspose.SVG. We assume you already understand why SVG styling conflicts occur – that topic is covered in related articles:

• SVG Styles: CSS vs Inline vs Attributes,
• Common SVG Styling and Font Issues in C#.

Inspect SVG and Find Elements with Inline Styles

If an SVG element has an inline style attribute, changing CSS rules or presentation attributes will not affect rendering. Therefore, every style change process should begin by checking inline styles. Using Aspose, you can inspect your document and identify where inline styles are used to inform your future strategy for changing and applying styles.

Example: Detect Inline Style Attributes in an SVG Document

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

// Find and inspect SVG elements that use inline style attributes with Aspose.SVG for .NET

SVGDocument document = new SVGDocument(Path.Combine(DataDir, "shapes.svg"));

// Select all elements that have inline style attributes
var styledNodes = document.QuerySelectorAll("[style]");

Console.WriteLine($"Found {styledNodes.Length} element(s) with inline styles:\n");

foreach (var node in styledNodes)
{
    var element = (Element)node;

    // Get and display the style attribute value
    string styleValue = element.GetAttribute("style");
    Console.WriteLine($"Element: <{element.TagName}>");
    Console.WriteLine($"Style: {styleValue}\n");
}            

After running the example, you will gain information about all inline style attributes and decide how to modify a particular element’s style to avoid conflicts.

    Element: <line>
    Style: stroke:grey; stroke-width:5

    Element: <polygon>
    Style: fill:orange; stroke:purple; stroke-width:1; fill-opacity:1

    Element: <ellipse>
    Style: fill:orangered

Why this matters

• Inline style attributes override all other styling mechanisms.
• Design tools like Illustrator and Figma typically export SVGs with inline style attributes.
• Ignoring this step leads to “why didn’t my change apply?” bugs.

Strategy A: Rewrite Inline Styles Selectively

When to Preserve Inline Styles

Avoid removing all inline styles when:

• Visual fidelity is critical — Inline styles may contain unique positioning or effects not replicated elsewhere.
• No alternative styling exists — If the document lacks a <style> element or presentation attributes, removal will cause loss of formatting.
• Animation or interactivity depends on styles — CSS transitions, transforms, or hover effects may break.

Instead of deleting inline style attributes blindly, you can read, modify, and rewrite them. To modify inline styles safely, you must:

• Query elements with the style attribute using QuerySelectorAll.
• Extract the style value with GetAttribute.
• Parse and remove specific CSS declarations that block CSS rules or presentation attributes.
• Either update the style attribute with SetAttribute or remove it entirely.
• Apply consistent styling using presentation attributes (e.g., fill, font-family) or define global rules in a <style> element.

This approach ensures predictable rendering by eliminating style conflicts and centralizing visual properties.

Example: Remove Only Blocking Style Properties from Inline Styles

The following C# example shows how to normalize SVG styles. It finds all elements with inline styles using QuerySelectorAll, removes the fill property from their style attribute, and sets a consistent fill color using the fill presentation attribute instead.

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

// Safely remove specific inline CSS properties and replace them with SVG attributes using Aspose.SVG for .NET

SVGDocument document = new SVGDocument(Path.Combine(DataDir, "input.svg"));

// Select elements that contain inline styles
var nodes = document.QuerySelectorAll("[style]");
foreach (var node in nodes)
{
    var element = (Element)node;
    // Read inline style as plain text
    var style = element.GetAttribute("style");
    if (string.IsNullOrEmpty(style))
        continue;
    // Remove only fill-related declarations
    var cleanedStyle = RemoveStyleProperty(style, "fill");
    if (string.IsNullOrWhiteSpace(cleanedStyle))
    {
        // Remove empty style attribute
        element.RemoveAttribute("style");
    }
    else
    {
        element.SetAttribute("style", cleanedStyle);
    }
    // Apply deterministic presentation attribute
    element.SetAttribute("fill", "#FF7A00");
}
// Save the modified SVG document
document.Save(Path.Combine(OutputDir, "style-normalized.svg"));

// --- Helper method ---
static string RemoveStyleProperty(string style, string property)
{
    var declarations = style.Split(';');
    var result = new List<string>();
    foreach (var decl in declarations)
    {
        if (!decl.TrimStart().StartsWith(property + ":", StringComparison.OrdinalIgnoreCase))
        {
            result.Add(decl.Trim());
        }
    }
    return string.Join("; ", result);
}

Strategy B: Remove Inline Style Attributes Completely

Complete removal of inline styles is appropriate in specific scenarios, but should be used with caution.

When to Remove All Inline Styles

• Cleaning design tool exports — SVGs from Illustrator, Figma, or similar tools often contain excessive inline styles.
• Applying global styling — When you plan to replace inline styles with a centralized <style> element or presentation attributes.
• User-generated content sanitization — To normalize unpredictable styling from uploads.

However, complete style removal carries significant risks. Elements may revert to their default appearance with black fill and default fonts; layouts can break due to lost positioning, transforms, or opacity settings; and these changes are irreversible. Therefore, always inspect the document structure and ensure alternative styling is in place before proceeding.

Best practice: Always inspect the document structure before bulk style removal, and ensure alternative styling is in place.

Example: Remove All Inline style Attributes from SVG Elements

The following C# example shows how to remove all inline style attributes in SVG document:

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

// Remove all inline style attributes from an SVG to prevent CSS conflicts

// Load an existing SVG document
SVGDocument document = new SVGDocument(Path.Combine(DataDir, "text.svg"));

// Select all elements that have inline style attributes
var nodes = document.QuerySelectorAll("[style]");

// Iterate through all styled elements
foreach (var node in nodes)
{
    // Cast node to Element and remove the style attribute
    if (node is Element element)
    {
        element.RemoveAttribute("style");
    }
}

// Save the modified SVG document without inline styles
document.Save(Path.Combine(OutputDir, "inline-styles-removed.svg"));

This creates a clean baseline for CSS rules, presentation attributes, and external styling logic.

Strategy C: Replace Inline Styles with Global <style> Element

This example demonstrates a common SVG normalization workflow: removing scattered inline styles and replacing them with centralized CSS rules. This approach improves maintainability, reduces file size, and ensures consistent styling across all text elements.

Example: Apply Global CSS Rules After Normalization

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

// Apply global CSS styles to SVG text elements after removing conflicting inline styles using Aspose.SVG for .NET

// Load SVG document
using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "text.svg")))
{
    // Select all text-related elements
    var textNodes = document.QuerySelectorAll("text, tspan");

    // Remove inline style attributes
    for (int i = 0; i < textNodes.Length; i++)
    {
        Element element = textNodes[i] as Element;
        if (element != null && element.HasAttribute("style"))
        {
            element.RemoveAttribute("style");
        }
    }

    // Create global <style> element
    SVGStyleElement style = (SVGStyleElement)document.CreateElementNS("http://www.w3.org/2000/svg", "style");
    style.SetAttribute("type", "text/css");
    style.TextContent =
        "text { " +
        "font-family: 'DejaVu Sans', sans-serif; " +
        "font-size: 16px; " +
        "fill: #2c3e50; " +
        "}";

    // Insert style at the top of SVG
    SVGSVGElement root = document.RootElement;
    root.InsertBefore(style, root.FirstChild);

    // Save result
    document.Save(Path.Combine(OutputDir, "styled-text.svg"));
}

The example uses QuerySelectorAll to target all text-related elements, removes their inline styles, and inserts a global style rule at the beginning of the document using InsertBefore.

Choose the appropriate strategy based on your workflow:

• Use Strategy A if you need to preserve most existing styling.
• Use Strategy B when cleaning uncontrolled or generated SVG files.
• Use Strategy C when enforcing consistent, centralized styling.

Final Workflow Summary

A reliable SVG style modification pipeline always follows this order:

1. Inspect inline styles
2. Normalize or remove blocking declarations
3. Apply presentation attributes or CSS rules
4. Export with predictable results

Skipping these steps causes unpredictable rendering results and debugging dead ends.

Related Resources

• SVG Styles: CSS vs Inline vs Attributes – Learn how SVG styles work, compare CSS rules, inline styles, and presentation attributes, and understand styling priority when working with SVG.
• Working with Fonts and Text in SVG – Learn how to create, style, and render SVG text using custom fonts, font fallback, and @font-face with Aspose.SVG for .NET.
• Common SVG Styling and Font Issues – Learn how to diagnose and fix SVG styling and font issues, including CSS priority conflicts, font fallback problems, and inconsistent rendering when converting SVG.
• Edit SVG File – You will learn how to edit SVG using Aspose.SVG for .NET library. Detailed examples of adding and editing new elements in SVG and applying SVG filters to bitmaps are considered.
• Environment Configuration – You will learn how to create various configurations and adapt them to the different environments where the application runs. This can be a custom theme, a runtime service or a web request network service.