Common SVG Styling and Font Issues in C#

SVG styling and font issues are among the most frequent problems developers encounter when rendering or converting SVG files. An image may look correct in a browser but render differently when converted to PDF or PNG, or programmatic style changes may have no effect.

Most issues are not bugs, but consequences of how SVG handles style resolution, inheritance, and font lookup. Inline styles, presentation attributes, and nested <tspan> elements often override global CSS silently, and missing fonts fall back to defaults without errors.

This article explains the root causes of common SVG styling and font problems in Aspose.SVG for .NET and provides practical C# solutions.

Quick Fix: Identify Your Issue in Seconds

Your Problem	Go To Section
CSS rules have no effect	CSS and Inline Styles Conflicts
<tspan> ignores parent text styles	Mixed Styling Causes Unpredictable Rendering
Text always renders as Arial	Fonts Always Fall Back to Arial or Default
Works in browser, breaks in conversion	SVG Looks Correct in Browser but Breaks During Conversion

CSS and Inline Styles Conflicts – Why Styles Are Ignored

Short answer: SVG styles are ignored because inline style attributes and presentation attributes override CSS rules by design. This most often happens when SVGs contain inline styles on elements or nested nodes that take absolute priority over external or programmatic CSS.

SVG supports multiple ways to apply styles, but they have strict priority order (from highest to lowest):

• Inline styles (style="fill:red; font-family:Arial;") – highest priority
• CSS rules (inside <style> element or external/programmatic CSS) – medium priority
• Presentation attributes (fill="red", font-family="Arial") – lowest priority

When these methods are mixed (especially in SVGs exported from tools like Illustrator, Figma, Inkscape), CSS rules or programmatic changes often appear to be ignored. The most common reason is that inline style attributes on the element itself – or especially on nested child elements – override everything else.

Refer to the article SVG Styles: CSS vs Inline vs Attributes to learn more about CSS rules, inline styles, and presentation attributes.

Typical Problem Patterns

1. An element has both a style attribute and matching CSS rules → inline wins.
2. A parent <text> element has CSS or attributes applied, but nested <tspan> elements carry their own inline style → parent styles are completely ignored for that portion of text.

Typical real-world example:

<!-- Parent <text> style is IGNORED because <tspan> has inline style -->
<text x="20" y="60" style="fill: black; font-size: 24px;">
    <tspan style="fill: red; font-size: 40px;">This text is RED and 40px</tspan>
</text>

Even if you change font-family or fill on the <text> element programmatically, the <tspan> text will remain unchanged – because its inline styles take absolute precedence.

Solution: Normalize Styling Before Rendering or Conversion

To make CSS reliable and programmatic changes effective, normalize the SVG by removing or cleaning conflicting inline styles. Choose one primary styling method (ideally CSS) and eliminate overrides.

Recommended Approach 1: Remove or Clean Inline style Attributes Globally

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

// Remove specific inline CSS properties that override SVG and stylesheet rules using Aspose.SVG for .NET

SVGDocument document = new SVGDocument(Path.Combine(DataDir, "text.svg"));
var nodes = document.QuerySelectorAll("[style]");
foreach (var node in nodes)
{
    if (node is IElementCSSInlineStyle styledElement)
    {
        ICSSStyleDeclaration style = styledElement.Style;
        // Remove only properties that block CSS rules
        style.RemoveProperty("fill");
        style.RemoveProperty("stroke");
        style.RemoveProperty("font-family");
        style.RemoveProperty("font-size");

        // Optional cleanup: remove empty style=""
        if (style.Length == 0 && node is Element element)
        {
            element.RemoveAttribute("style");
        }
    }
}
document.Save(Path.Combine(OutputDir, "remove-inline-css-properties.svg"));

After this, CSS from <style> blocks or applied via DOM will apply correctly and consistently.

Note: Unlike browser DOM APIs, Aspose.SVG does not expose inline styles directly on Element. To modify inline CSS, elements must be accessed through the IElementCSSInlineStyle interface.

Recommended Approach 2: Target Nested <tspan> Specifically (Most Common Fix)

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

// Normalize inline styles in nested SVG <tspan> elements to avoid unexpected text rendering using Aspose.SVG for .NET

SVGDocument document = new SVGDocument(Path.Combine(DataDir, "text.svg"));
foreach (var node in document.QuerySelectorAll("tspan"))
{
    if (node is Element element && element.HasAttribute("style"))
    {
        var style = element.GetAttribute("style");

        // Remove only conflicting properties
        style = RemoveCssProperty(style, "fill");
        style = RemoveCssProperty(style, "font-family");
        style = RemoveCssProperty(style, "font-size");
        if (string.IsNullOrWhiteSpace(style))
            element.RemoveAttribute("style");
        else
            element.SetAttribute("style", style);
    }
}
// --- Helper method ---
static string RemoveCssProperty(string style, string property)
{
    if (string.IsNullOrWhiteSpace(style)) return string.Empty;
    return string.Join("; ",
        style.Split(';')
            .Select(s => s.Trim())
            .Where(s => !string.IsNullOrWhiteSpace(s) &&
                        !s.StartsWith(property + ":", StringComparison.OrdinalIgnoreCase))
    ).TrimEnd(';');
}
document.Save(Path.Combine(OutputDir, "css-normalized.svg"));

Alternative (Quick & Forceful): Apply styles directly as presentation attributes to both <text> and all <tspan>

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

// Apply consistent presentation attributes to both SVG <text> and <tspan> elements using Aspose.SVG for .NET

SVGDocument document = new SVGDocument(Path.Combine(DataDir, "text.svg"));
var nodes = document.QuerySelectorAll("text, tspan");
foreach (var node in nodes)
{
    if (node is Element element)
    {
        element.SetAttribute("fill", "blue");
        element.SetAttribute("font-family", "Arial");
        element.SetAttribute("font-size", "20px");
    }
}
document.Save(Path.Combine(OutputDir, "apply-presentation-attributes.svg"));

Key Takeaway

If your CSS rules or code changes have no visible effect:

• Always check for inline style attributes first (especially on <tspan>).
• Nested elements override parents – clean children explicitly.
• Normalize to one styling method (preferably CSS) before conversion/rendering.
• After cleanup, CSS becomes predictable and much easier to maintain.

Fonts Always Fall Back to Arial or Default

Short answer: SVG text falls back to Arial or a default font because the specified font-family cannot be resolved at render time. In Aspose.SVG, this usually means the font was not explicitly registered via FontsSettings, was registered after the SVG was loaded, or the font-family value does not match the font’s internal family name.

By default, Aspose.SVG attempts to resolve fonts using system-installed fonts on the machine where rendering/conversion occurs. However, this behavior is not reliable across different environments (especially servers, containers, CI/CD pipelines, or headless machines), because:

• Not all system fonts may be present or accessible.
• The exact fallback font (often Arial, sometimes others like Helvetica or generic sans-serif) depends on the platform and configuration.
• If the requested font-family cannot be matched exactly (by internal family name), rendering silently falls back to a default font without throwing errors.

To achieve consistent and predictable results on any machine (development, server, Docker, etc.), you should always explicitly register the required fonts using FontsSettings before loading the SVGDocument. This overrides unreliable system lookup and guarantees the same output everywhere.

Common reasons for fallback, even when you think the font is available:

• Custom fonts not registered via FontsSettings.
• Font folder set after the SVG is loaded (registration must happen first).
• font-family value does not match the internal font family name (check in font metadata, not filename).
• Reliance on system fonts that are missing in the target environment (e.g. cloud servers often have a minimal font set).

Correct Font Registration

using Aspose.Svg.Services;
using System.IO;

    var configuration = new Configuration();
    var userAgent = configuration.GetService<IUserAgentService>();

    // Register folder containing fonts
    userAgent.FontsSettings.SetFontsLookupFolder(Path.Combine(DataDir, "fonts"));

    var document = new SVGDocument(Path.Combine(DataDir, "input.svg"), configuration);
    document.Save(Path.Combine(OutputDir, "output.svg"));

    Console.WriteLine("SVG rendered with custom fonts successfully.");

Font Family Name vs File Name

Do not use the font file name (Montserrat-Bold.ttf) in font-family. Use the internal font family name:

font-family="Montserrat"

Or with safe fallback chain:

font-family="Montserrat, sans-serif"

Aspose.SVG resolves fonts by family name, not by file name or path.

SVG Looks Correct in Browser but Breaks During Conversion

Short answer: SVG looks correct in browser but breaks during conversion because browsers load system and web fonts automatically, while Aspose.SVG requires explicit font registration.

Browser rendering and Aspose.SVG conversion differ fundamentally:

Browser Rendering	Aspose.SVG Rendering
Uses system-installed fonts	Requires explicit font registration
Loads web fonts from URLs	Cannot access external URLs by default
Font fallback is automatic	Falls back to Arial if font not found
CSS from external files loads	External CSS may not resolve

Browser-Dependent Font Usage

<text x="20" y="60" style="font-family: 'Montserrat'; font-size: 32px;"> Browser-only font </text>

This works in a browser if Montserrat is installed locally or loaded via CSS. During conversion, Aspose.SVG can only render this correctly if the font is explicitly available.

Ensuring Consistent Conversion

using Aspose.Svg.Converters;
using Aspose.Svg.Saving;
using Aspose.Svg.Rendering.Image;
using Aspose.Svg.Services;
using System.IO;

// Convert SVG text with a custom font using FontsSettings

// Create an instance of the Configuration class 
using (Configuration configuration = new Configuration())
{
    // Configure custom fonts folder
    IUserAgentService userAgentService = configuration.GetService<IUserAgentService>();
    userAgentService.FontsSettings.SetFontsLookupFolder(Path.Combine(DataDir, "fonts"));

    // Create SVG document with configuration
    using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "input.svg"), configuration))
    { 
        // Convert SVG to JPG
        ImageSaveOptions saveOptions = new ImageSaveOptions(ImageFormat.Jpeg);

        Converter.ConvertSVG(document, saveOptions, Path.Combine(OutputDir, "ensuring-onversion-with-custom-font.jpg"));
    }
}

In this example:

• The fonts directory must contain the required font files.
• Aspose.SVG resolves fonts by font family name, not by file name.
• The conversion result will be identical on any machine.

Solution: Make SVG Self-Contained Before Conversion

This code registers custom fonts, optionally embeds them via @font-face in the SVG, and converts the document to PDF. It ensures that the output respects the intended font-family regardless of system-installed fonts or browser behavior.

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

// Embed fonts and make an SVG self-contained before converting it to PDF using Aspose.SVG for .NET

// Register fonts
var config = new Configuration();
var userAgent = config.GetService<IUserAgentService>();
userAgent.FontsSettings.SetFontsLookupFolder(Path.Combine(DataDir, "fonts"));

// Load an SVG document
var document = new SVGDocument(Path.Combine(DataDir, "input.svg"), config);

// Embed font via @font-face (optional but recommended)
var style = (SVGStyleElement)document.CreateElementNS("http://www.w3.org/2000/svg", "style");
style.TextContent = @"
    @font-face {
        font-family: 'Montserrat';
        src: url('fonts/Montserrat-Italic.ttf') format('truetype');
    }
    text {
        font-family: 'Montserrat', sans-serif;
    }
";
document.RootElement.AppendChild(style);

// Convert SVG to PDF
var options = new PdfSaveOptions();
Converter.ConvertSVG(document, options, Path.Combine(OutputDir, "output.pdf"));

Key takeaway: Always register fonts explicitly and normalize styles for deterministic conversion.

Alternative: Convert Text to Paths

As an alternative to embedding or registering fonts, you can convert text elements to vector paths. This approach ensures that text appearance is preserved exactly, regardless of font availability, making the SVG fully self-contained and safe for conversion to PDF, PNG, or other formats.

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

// Vectorize text elements in an SVG document using C#

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

// Set text elements vectorization 
SVGSaveOptions saveOptions = new SVGSaveOptions
{
    VectorizeText = true
};

// Save the SVG document with specified saveOptions
document.Save(Path.Combine(OutputDir, "text_vectorized.svg"), saveOptions);

SVG Pre-Conversion & Debugging Checklist

Before converting SVG to PDF, PNG, or other formats, verify these key points to ensure consistent rendering:

1. Font Registration – All custom fonts must be registered via FontsSettings before creating the SVGDocument.
2. Font Family Names – Use the internal font family name defined in the font file, not the filename. Ensure any fallback fonts are included.
3. Inline Styles – Check and remove or normalize inline style attributes on <text> or nested <tspan> elements that may override global styles.
4. Nested <tspan> Elements – Inspect child text elements for conflicting fill, font-family, or font-size styles; inline styles here always take priority over parent styles.
5. Base URI and Resource Paths – Confirm that all relative paths for fonts, images, and CSS resolve correctly. Missing or incorrect base paths often break rendering.
6. Self-Contained SVG – Embed all fonts, CSS, and critical resources directly in the SVG whenever possible to avoid reliance on external files or browser behavior.
7. Offline Testing – Always verify SVG renders correctly without internet access, ensuring all dependencies are properly included.

Tip: Following this checklist guarantees predictable, deterministic rendering across different machines and formats when using Aspose.SVG for .NET.

FAQ

1. Why does my SVG always fall back to Arial even when font-family is set?
Font fallback occurs when the specified font family cannot be resolved. This usually means the font was not registered via FontsSettings, was registered after loading the SVG, or the font-family value does not match the internal font family name.

2. Can I use Google Fonts or other web fonts with Aspose.SVG?
Aspose.SVG does not load fonts from external URLs at render time. To use web fonts, download the .ttf or .otf files locally and register them with FontsSettings before creating the SVGDocument.

3. Why does removing all style attributes break my SVG?
Some inline styles control positioning, transforms, or non-visual properties. Instead of removing the entire style attribute, remove only conflicting properties such as fill, stroke, or font-family.

4. Can I force CSS to override inline styles?
Yes, but only if inline styles are removed or if CSS rules use !important. However, relying on !important is less predictable than normalizing or cleaning inline styles before rendering.

5. When should I convert SVG text to paths?
Convert text to paths when exact visual fidelity is required and font availability cannot be guaranteed. This approach removes all font dependencies but makes the text non-editable and increases SVG complexity.

Quick Issues & Fixes

Symptom	Root Cause	Solution
Text renders as Arial	Font not registered	Register fonts BEFORE document load
CSS has no effect	Inline style attribute present	Remove conflicting properties from style
<tspan> ignores parent	<tspan> has its own style	Remove styles from nested <tspan> elements
Works in Chrome, breaks in PDF	Relies on system/web fonts	Embed fonts via @font-face or register locally
Programmatic changes ignored	Style priority conflict	Use !important or remove inline styles

Related SVG Topics

• 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.
• 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.
• 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.
• Modify SVG Styles Programmatically in C# – Learn how to programmatically modify SVG styles in C# using Aspose.SVG. This guide focuses on DOM-based style manipulation, attribute rewriting, and preparing SVG files for reliable export.