Rule Builder – Create SVG CSS Rules in C#

SVG Style Rules in C#

SVG documents support CSS styling through the <style> element, allowing developers to apply reusable visual rules to SVG graphics. Using Aspose.SVG Builder API, you can configure SVG styles programmatically in C# without manually writing CSS strings.

This article explains how to create SVG style rules in C#, apply CSS selectors to SVG elements, configure custom fonts, and manage reusable SVG styles programmatically using Aspose.SVG for .NET.

What Is RuleBuilder?

RuleBuilder is part of the Aspose.SVG Builder API and is used to configure CSS declarations for SVG style rules programmatically. Together with SVGStyleElementBuilder, it allows developers to:

• create SVG <style> elements;
• define reusable CSS selectors;
• configure SVG fill and stroke styles;
• apply typography settings;
• create reusable visual themes for SVG graphics.

Using centralized CSS rules simplifies SVG maintenance and reduces duplicated styling code.

Create SVG Style Rules in C#

Aspose.SVG Builder API offers the SVGStyleElementBuilder class, which is an element builder for constructing an SVG <style> element. This class facilitates the creation and configuration of an SVG <style> element with CSS rules.

This example shows how to create an SVG <style> element, add a CSS rule @font-face to it, and use the AddRule() method to define font styles for text elements within an SVG document:

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;

// Configure an SVG document's style with external font-face rules in C# using Rule Builder

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an <svg> element and use Builder API to add other rules and elements to it
    SVGSVGElement svg = new SVGSVGElementBuilder()
        
       .AddDefs(def => def
            .AddStyle(st => st
                .Type("text/css")
                .AddRule("@font-face", r => r
                    .FontFamily("VeinlineRegular")
                    .Attribute("src", "url(https://assets.ithillel.ua/wiki/VeinlineRegular.ttf)")
                )
                .AddRule("text", t => t
                    .FontFamily("VeinlineRegular")
                    .FontSize(30, LengthType.Pt)
                )
            )
        )
            .AddText(t => t
            .X(20).Y(60).Fill(Color.DarkRed).FontWeight(FontWeight.Bold)
            .AddContent("Configure SVG Style")
            )
            .AddText(t => t
            .X(20).Y(150)
            .AddContent("Set your SVG style with Rule Builder!")
            )
        .Build(document.FirstChild as SVGSVGElement);

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

@font-face Rule

The @font-face CSS rule allows you to specify fonts that can be downloaded from a remote server or the user’s computer for displaying text within SVG graphics. This rule defines a custom font family name and specifies the source URL of the font file.

• The FontFamily() method sets the font-family CSS property in the generated style rule. It specifies the font name that will be used for matching text elements.
• The Attribute() method of the RuleBuilder class sets the src CSS descriptor inside the @font-face rule with the source URL of the font file.

In the example above, the @font-face rule defines a custom font family named "VeinlineRegular". This rule ensures that the font is loaded and available for use within the SVG document.

AddRule() Method

The AddRule() method is part of the Rule Builder, which allows you to create CSS rules in SVG documents. It takes two parameters: the name of the CSS selector and a lambda expression defining the properties of the style using RuleBuilder.

In the C# example above, two rules are added:

• The first rule defines the @font-face rule, which guarantees the availability of the VeinlineRegular font.
• The second rule applies the VeinlineRegular font family and sets the font size to 30 points for all text elements in the SVG.

Builders within Builders

SVG Builder API introduces syntactic sugar to further refine the process of SVG creation and manipulation. This includes nested builders for various SVG elements, providing a more intuitive and efficient way to define complex SVG structures. A “builder within a builder” pattern involves the use of multiple builder classes, where one builder is nested within another to facilitate the construction of complex objects or structures.

The following code snippet demonstrates how to use RuleBuilder, which is an example of a builder within a builder, to create and style SVG graphics programmatically:

• Inside the SVGSVGElementBuilder, a style block is added using the AddStyle() method.
• The AddRule() method of SVGStyleElementBuilder defines CSS rules by selector (e.g., “circle,” “text”). Inside each lambda expression, RuleBuilder configures declarations such as fill color, stroke color, and font family for matching SVG elements.

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;

// Create SVG with styled circle and text elements using C# Rule Builder API and fluent syntax

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an <svg> element and use Builder API to add other rules and elements to it
    SVGSVGElement svg = new SVGSVGElementBuilder()
       
        .AddStyle(st => st
            .AddRule("circle", r => r
                .Fill(paint: Paint.None)
                .Stroke(color: Color.DarkRed)
                .StrokeWidth(60)
            )
            .AddRule("text", t => t
                .Fill(color: Color.Red)
                .Stroke(color: Color.Teal)
                .StrokeWidth(1)
                .FontFamily("Arial")
                .FontSize(30, LengthType.Pt)
            )
        )
        .AddG(g => g
            .AddCircle(circle => circle.Cx(100).Cy(130).R(60).StrokeDashArray(2, 14))
            .AddText("Rule Builder", x: 230, y: 140)
        )
        .Build(document.FirstChild as SVGSVGElement);

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

How the Style Rules Work

The AddRule() method creates reusable CSS rules inside the SVG <style> element. In this example:

• the "circle" selector styles all SVG circle elements;
• the "text" selector configures typography for SVG text;
• style rules are automatically applied to matching SVG elements.

This approach separates styling logic from SVG structure and improves SVG readability.

Common Mistakes and Fixes

Problem	Possible Cause	Recommended Fix
SVG styles are not applied	Incorrect CSS selector	Ensure AddRule() targets the correct SVG element
Custom font is not displayed	Invalid font URL	Verify the font file path and accessibility
Text rendering differs between systems	The required font is unavailable	Use embedded or web-loaded fonts
SVG elements ignore style rules	Inline attributes override CSS	Remove conflicting inline styles
Stroke or fill styles are missing	Incorrect style property configuration	Verify Fill() and Stroke() rule settings

FAQ

1. Is RuleBuilder better than inline SVG styling?
For complex SVG graphics, reusable CSS rules are usually easier to maintain than repeated inline attributes. Rule Builder helps centralize SVG styling logic and reduce duplicated code.

2. Can I style SVG classes and IDs with RuleBuilder?
Yes. AddRule() supports standard CSS selectors, including element selectors, class selectors, and ID selectors.

3. Why use CSS rules inside SVG instead of external CSS files?
Embedded SVG styles make SVG graphics self-contained and easier to reuse across applications, exports, and standalone SVG files.

4. Can I reuse the same SVG style block for multiple elements?
Yes. A single SVG <style> block can apply reusable rules to multiple SVG elements using shared selectors.

Related Resources

• The Modify SVG Styles Programmatically in C# article explains how to programmatically modify and normalize SVG styles in C# using Aspose.SVG with DOM-based manipulation and attribute rewriting.
• The Element Builders article delves into the Element Builders used in SVG Builder API. You will learn about the SVGElementBuilder class, its specialized builders, and how they simplify SVG programming.
• Please see the Path Builder article to learn more about the PathBuilder class, designed to simplify the creation and manipulation of SVG paths. The article showcases how the Path Builder offers an intuitive syntax for defining SVG paths programmatically, enabling developers to streamline the process of creating intricate shapes and curves.
• The Paint Builder article is about PaintBuilder, a builder class for creating paint values for SVG elements. This class is used to specify the value of the stroke or fill attributes for various SVG shapes and elements when filling them with paint, pattern, or gradient.
• The SVG Builder API article explains how the SVG Builder API addresses the challenge of complexity, code clarity, and versatility when manipulating SVG.