Paint Builder – Create SVG Patterns – C#

SVG Pattern

SVG patterns offer a versatile way to fill shapes and elements in SVG documents. Patterns allow you to create complex textures, backgrounds, and repeating patterns, enhancing the visual appeal of SVG graphics.

SVG patterns are reusable graphic elements that can be applied to fill shapes, text, and paths in an SVG document. They define a graphic pattern that can be repeated or placed throughout an area, providing flexibility in creating different visual effects. SVG patterns are defined using the <pattern> element, which contains the graphical elements (shapes, images, or gradients) and attributes that define the pattern.

Aspose.SVG Builder API offers the SVGPatternElementBuilder, which is a builder class for constructing an SVG <pattern> element. This class provides methods to set various attributes specific to the <pattern> element and to build its content. Also, the 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.

This article concerns the 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 any paint, pattern, or gradient.

Paint Builder

The PaintBuilder is used to specify the value of the stroke or fill that are used for various SVG shapes and elements when filling them with a pattern, gradient, or any paint. In the following example, the PaintServerId() method of the PaintBuilder class sets the color fill for the paint server by Id.

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...
    using (var document = new SVGDocument())
    {
        var svg = new SVGSVGElementBuilder()
            .Width(100, LengthType.Percentage).Height(100, LengthType.Percentage)
            .ViewBox(0, 0, 400, 400)
            .AddG(g => g
                .AddPattern(p => p.Id("stars")
                    .ViewBox(0, 0, 20, 20)
                    .Width(5, LengthType.Percentage)
                    .Height(5, LengthType.Percentage)
                    .PatternUnits(CoordinateUnits.UserSpaceOnUse)
                    .AddPolygon(points: new double[] { 5, 0, 7, 3, 10, 5, 7, 7, 5, 10, 3, 7, 0, 5, 3, 3 }, fill: Color.Teal)
                    .AddPolygon(points: new double[] { 15, 0, 17, 3, 20, 5, 17, 7, 15, 10, 13, 7, 10, 5, 13, 3 }, fill: Color.DarkRed)
                    .AddPolygon(points: new double[] { 15, 10, 17, 13, 20, 15, 17, 17, 15, 20, 13, 17, 10, 15, 13, 13 },  fill: Color.DarkBlue)
                )
                .AddRect(r => r.Rect(20, 40, 440, 80).Fill(pt => pt.PaintServerId("stars")))
                )
            .Build(document.FirstChild as SVGSVGElement);
        document.Save(Path.Combine(OutputDir, "pattern-stars.svg"));
    }

In this example, a pattern is first defined using AddPattern(), where various colored polygons are combined to create a complex fill pattern. The AddPattern() method adds a <pattern> element configuration to the builder. The pattern is given an identifier stars. Subsequently, this pattern is applied to a rectangle element using the Fill() method with PaintServerId("stars"), which references the previously defined pattern.

Create SVG Patterns

The following C# code example demonstrates how to create SVG patterns and apply them to shapes within the document. The code showcases the “builder within a builder” approach, which uses multiple builder classes, where one builder is nested within another to facilitate the construction of complex objects or structures and provide a modular and structured approach to SVG document creation:

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...
    using (var document = new SVGDocument())
    {
        var svg = new SVGSVGElementBuilder()
            .Width(100, LengthType.Percentage).Height(100, LengthType.Percentage)
            .ViewBox(0, 0, 600, 600)
            .AddG(g => g
                .FontFamily("Arial")
                .FontSize(10)
                .AddPattern(p => p.Id("Pat3a")
                    .Rect(0, 0, 20, 20)
                    .PatternUnits(CoordinateUnits.UserSpaceOnUse)
                    .AddRect(r => r.Rect(0, 0, 10, 10).Fill(Color.LightSlateGray))
                    .AddRect(r => r.Rect(10, 0, 10, 10).Fill(Color.Teal))
                    .AddRect(r => r.Rect(0, 10, 10, 10).Fill(Color.DarkRed))
                    .AddRect(r => r.Rect(10, 10, 10, 10).Fill(Color.Gold))
                )
                .AddPattern(p => p.Id("Pat3b")
                    .Href("#Pat3a")
                    .Width(23).Height(23)
                )
                .AddPattern(p => p.Id("Pat3c")
                    .Href("#Pat3a")
                    .Width(15).Height(15)
                )
                .AddCircle(circle => circle.Cx(90).Cy(130).R(70).Fill(pt => pt.PaintServerId("Pat3a")))
                .AddText(t => t.X(55).Y(50)
                    .AddContent("Pattern #Pat3a")
                )
                .AddCircle(circle => circle.Cx(240).Cy(130).R(70).Fill(pt => pt.PaintServerId("Pat3b")))
                .AddText(t => t.X(205).Y(50)
                    .AddContent("Pattern #Pat3b")
                )
                .AddCircle(circle => circle.Cx(390).Cy(130).R(70).Fill(pt => pt.PaintServerId("Pat3c")))
                .AddText(t => t.X(355).Y(50)
                    .AddContent("Pattern #Pat3c")
                )
            )
            .Build(document.FirstChild as SVGSVGElement);
        document.Save(Path.Combine(OutputDir, "patterns.svg"));
    }

In the example, three different patterns, named Pat3a, Pat3b, and Pat3c, are added to the SVG document.

• For Pat3a, a pattern is defined using the AddPattern() method within the AddG() method. Within this pattern, four rectangles are added to define the different sections of the pattern in different colors. Rectangles are positioned within a 20x20 unit space - a tile.
• Pat3b and Pat3c are defined as references to Pat3a, with different tile sizes specified using the Width() and Height() methods.

The height and width of a tile in a pattern element define the size of the repeated pattern unit in the SVG document. This size determines how the pattern will look when applied to shapes or elements in the document. In pattern Pat3b, increasing the height and width of the tile enlarges the pattern unit, resulting in unfilled (transparent) areas. In the pattern Pat3c, reducing the height and width of the tile makes the pattern appear denser, creating a different visual effect.

So, adjusting the height and width of the tile in an SVG <pattern> element allows you to control the density and repetition of the pattern within the SVG document and enables the creation of diverse visual effects.

See also

• The Element Builders article delves into the Element Builders used in Aspose.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 Rule Builder article is about the RuleBuilder class, which is a builder class for constructing CSS style rules in an SVG document.