Rule Builder – Configure SVG Style – C#

SVG Style

The SVG <style> element is used to define internal styles within an SVG document. It allows developers to apply CSS rules directly to SVG elements, providing a convenient way to control the appearance of SVG graphics.

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 article is about the RuleBuilder class, which is a builder class for constructing CSS style rules. This class is used to dynamically build a string of CSS styles by setting various attributes and their values.

Rule Builder - RuleBuilder Class

The Rule Builder enables developers to apply CSS rules for SVG documents programmatically within C# code, offering flexibility and control over the visual appearance of SVG elements. 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;
...

    using (var document = new SVGDocument())
    {
        var 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);
        document.Save(Path.Combine(OutputDir, "font-face.svg"));
    }

@font-face Rule

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

• The FontFamily() method sets the font-family attribute for an SVG element. It specifies the font name that will be used to set font properties.
• The Attribute() method of the RuleBuilder class sets a scr attribute for the <style> element 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 syntax 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.
• Within the RuleBuilder, CSS rules are defined using the AddRule() method, specifying selectors (e.g., “circle,” “text”) and applying properties (e.g., fill color, stroke color, font family) to target SVG elements.

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...
    // Initialize an SVG document
    using (var document = new SVGDocument())
    {
        // Create an <svg> element
        var 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"));
    }

Conclusion

Aspose.SVG for .NET provides a Rule Builder feature that allows developers to programmatically define CSS rules for SVG elements using the SVG Builder API.

• Using the RuleBuilder class simplifies the process of creating and applying styles to SVG elements, making it easy to customize the appearance of SVG graphics in C# code.
• RuleBuilder provides flexibility and control over the visual appearance of SVG elements.
• RuleBuilder works as a builder within a builder, which makes it easier to create complex objects or structures and improves code readability, making it easier to understand.

See also

• 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.