Element Builders – SVG-Elemente in C# mit der Fluent Builder API erstellen

Die Aspose.SVG Builder API ermöglicht Entwicklern, SVG-Elemente in C# mit einer Fluent-Builder-Syntax programmgesteuert zu erstellen und zu bearbeiten. Statt SVG-XML manuell zu erzeugen oder DOM-Attribute direkt zu ändern, bieten Element Builders einen saubereren und besser wartbaren Ansatz für die SVG-Erzeugung.

Die Builder API unterstützt gängige SVG-Elemente wie Rechtecke, Kreise, Pfade, Linien, Polygone, Text und Gruppen. Mit verschachtelten Buildern und verketteten Methoden können Entwickler komplexe SVG-Grafiken mit weniger Boilerplate-Code und besserer Lesbarkeit erzeugen.

In diesem Artikel erfahren Sie, wie Sie SVG-Elemente in C# erstellen, SVG-Grafiken programmgesteuert aufbauen und vorhandene SVG-Dokumente mit Aspose.SVG for .NET ändern. Sie lernen die Basisklasse SVGElementBuilder, die Klasse SVGSVGElementBuilder, spezialisierte Element-Builder und deren Nutzen für die SVG-Programmierung kennen.

Was sind SVG Element Builders?

Element Builders sind spezialisierte Builder-Klassen zum programmgesteuerten Erstellen von SVG-Elementen. Jeder Builder entspricht einem bestimmten SVG-Element und stellt stark typisierte Methoden zum Konfigurieren von SVG-Attributen und Stilen bereit.

Die Builder API unterstützt:

• SVG-Formen;
• Textelemente;
• Gruppen;
• Pfade;
• Styling;
• Transformationen;
• wiederverwendbare SVG-Strukturen.

Die Fluent-Syntax vereinfacht die SVG-Erzeugung und verbessert die Wartbarkeit von Code in .NET-Anwendungen.

Unterstützte SVG Element Builders

Builder	SVG-Element
SVGSVGElementBuilder	<svg>
SVGRectElementBuilder	<rect>
SVGCircleElementBuilder	<circle>
SVGLineElementBuilder	<line>
SVGPathElementBuilder	<path>
SVGTextElementBuilder	<text>
SVGGElementBuilder	<g>
SVGPolygonElementBuilder	<polygon>
SVGPolylineElementBuilder	<polyline>

Eine vollständige Liste der SVG Element Builders finden Sie auf der API-Referenzseite Aspose.Svg.Builder.

Neue Elemente erstellen

Die Aspose.SVG SVG Builder API verwendet das Fluent Builder Pattern, eine Entwurfsmethode, die gut zu den Anforderungen an Einfachheit, Klarheit und Vielseitigkeit bei der SVG-Manipulation passt.

Fluent Builder Pattern

In der SVG Builder API wird das Fluent Builder Pattern verwendet, um das Erstellen und Aktualisieren von SVG-Elementen intuitiver und weniger fehleranfällig zu machen. Der Kern dieses Musters sind Methoden, die ein SVG-Element konfigurieren und die Builder-Instanz für Method Chaining zurückgeben.

Lambda-Ausdrücke verbessern dabei die Klarheit und Kürze der Builder-Konfiguration. Sie ermöglichen es, Attribute und Stile von SVG-Elementen detailliert und dennoch kompakt zu definieren:

    using (SVGDocument document = new SVGDocument())
    {
        SVGSVGElement svgElement = new SVGSVGElementBuilder()
            .AddCircle(circle => circle
                .Cx(100).Cy(100).R(50)
                .Fill(Color.Red).Stroke(Paint.None)
                .StrokeWidth(2))
            .Build(document);
    }

Hier ist circle => circle.Cx(100).Cy(100).R(50).Fill(Color.Red).Stroke(Paint.None).StrokeWidth(2) eine kompakte Möglichkeit, Mittelpunkt, Radius, Füllung und Kontur des Kreises zu konfigurieren. Dieser Ansatz vereinfacht die Elementkonfiguration und verbessert die Lesbarkeit sowie Wartbarkeit des Codes.

SVG von Grund auf erstellen

Hier sehen Sie einen kompakten Ansatz zum Erstellen von SVGs von Grund auf mit C#.

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

    // Create SVG from scratch in C# using Builder API

    // Create an <svg> element with specified width, height and viewBox, and add into it other required elements
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(700).Height(300)
        .ViewBox(0, 0, 700, 300)

        .AddG(g => g
        .AddCircle(circle => circle.Cx(130).Cy(130).R(60).Fill(Paint.None).Stroke(Color.FromArgb(200, 0, 0)).StrokeWidth(70).StrokeDashArray(2, 14))
        .AddText("I can create SVG from scratch!", x: 270, y: 140, fontSize: 30, fill: Color.Teal)
        )
        .Build(document.FirstChild as SVGSVGElement);

    // Save the document
    document.Save(Path.Combine(OutputDir, "svg-from-scratch.svg"));
}

Das Beispiel nutzt das Fluent Builder Pattern in SVGSVGElementBuilder, um SVG-Elemente zu erstellen. Dieses Muster bietet eine ausdrucksstarke und wartbare Möglichkeit, SVG-Dokumente zu generieren, im Vergleich zu dem im Artikel SVG-Datei bearbeiten beschriebenen Ansatz, der stärker auf Low-Level-DOM-Manipulation und explizite Attributsetzung setzt. Dieser Ansatz:

• Er bietet eine flüssigere und besser lesbare Möglichkeit, komplexe Strukturen zu erstellen.
• Er reduziert Boilerplate-Code, da Attribute wie cx, cy, r und fill direkt über Builder-Methoden gesetzt werden.

SVG bearbeiten

Eine leistungsfähige Technik zum programmgesteuerten Bearbeiten von SVGs ist die Verwendung von Element Builders.

Neue Elemente hinzufügen

Das Bearbeiten von SVGs mit Element Builders bietet einen flexiblen Ansatz zur programmgesteuerten Manipulation von Vektorgrafiken. Im folgenden Beispiel wird eine vorhandene SVG-Datei geladen, erweitert und gespeichert:

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

// Add multiple shapes (circle and polyline) to an existing SVG document using SVG Builder

string documentPath = Path.Combine(DataDir, "circles.svg");

// Initialize an SVG document
using (SVGDocument document = new SVGDocument(documentPath))
{
    // Create a <circle> element with attributes
    SVGCircleElement circle = new SVGCircleElementBuilder()
     .Cx(350).Cy(70).R(50).Fill(Paint.None).Stroke(Color.FromArgb(80, 132, 132)).StrokeWidth(10)
     .Build(document);

    // Append the newly created <circle> element to the root <svg> element
    document.RootElement.AppendChild(circle);

    // Create a <polyline> element with attributes
    SVGPolylineElement polyline = new SVGPolylineElementBuilder()
    .Points(new double[] { 125, 130, 275, 180, 425, 130 }).Stroke(Color.FromArgb(80, 132, 132)).Fill(Paint.None).StrokeWidth(10)
    .Build(document);

    // Append the newly created <polyline> element to the root <svg> element
    document.RootElement.AppendChild(polyline);

    // Save the document
    document.Save(Path.Combine(OutputDir, "circles-edited.svg"));
}

In diesem Beispiel:

• Ein neues <circle>-Element wird mit SVGCircleElementBuilder erstellt. Die Attribute cx, cy, r, fill, stroke und stroke-width werden über Fluent-Methoden konfiguriert.
• Ein neues <polyline>-Element wird mit SVGPolylineElementBuilder erstellt. Punkte und Kontureinstellungen werden programmgesteuert definiert.
• Sobald jedes Element konfiguriert ist, erstellt die Methode Build(Document document) das Element und gibt es zum Einfügen in das Dokument zurück.
• Die neu erstellten <circle>- und <polyline>-Elemente werden als Kinder an das SVG-Stammelement angehängt.

Abbildung (a) zeigt die ursprüngliche Datei circles.svg, und Abbildung (b) zeigt die bearbeitete Datei circles-edited.svg mit hinzugefügtem Kreis und Polyline.

Vorhandene Elemente ändern

Im folgenden C#-Beispiel aktualisieren wir ein vorhandenes SVG-Dokument, indem wir Füll- und Konturfarbe des ersten SVG-Elements <circle> im Dokument ändern:

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

// Modify an existing SVG element in C# using SVG Builder

string documentPath = Path.Combine(DataDir, "circles.svg");

// Initialize an SVG document
using (SVGDocument document = new SVGDocument(documentPath))
{
    // Assume an existing SVG element is part of the document
    SVGCircleElement circle = document.GetElementsByTagName("circle").First() as SVGCircleElement;

    // Modify the first <circle> element using SVGCircleElementBuilder
    new SVGCircleElementBuilder()
        .Stroke(Color.DarkRed).Fill(Color.LightGray)

        // The first <circle> element is now updated with new configurations
        .Build(circle);

    // Save the document
    document.Save(Path.Combine(OutputDir, "circles-modified.svg"));
}

Element Builders bieten die Methode Build(T element), um vorhandene SVG-Elemente zu aktualisieren und deren Attribute oder Stile zu ändern. Abbildung (a) zeigt die ursprüngliche Datei circles.svg, und Abbildung (b) zeigt circles-modified.svg mit dem neu eingefärbten ersten Kreiselement.

Beispiel für die Verwendung von Element Builders

Der folgende Codeausschnitt zeigt, wie Sie mit Element Builders ein SVG-Dokument mit verschiedenen SVG-Formelementen erstellen.

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

// Create all basic SVG shapes programmatically in C# using SVG Builder

string svgContent = "<svg xmlns=\"http://www.w3.org/2000/svg\"></svg>";
using (SVGDocument document = new SVGDocument(svgContent, "."))
{
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(100, LengthType.Percentage).Height(100, LengthType.Percentage)
        .ViewBox(0, 0, 800, 800)

            .AddG(g => g.FontSize(20).TextAnchor(TextAnchor.End)
                .AddText("<rect>", y: 30)
                .AddText("<circle>", y: 70)
                .AddText("<ellipse>", y: 110)
                .AddText("<line>", y: 150)
                .AddText("<polyline>", x: 300, y: 30)
                .AddText("<polygon>", x: 300, y: 70)
                .AddText("<path>", x: 300, y: 110)
                )

            .AddG(gg => gg.Fill(Color.Teal).StrokeWidth(3)
                .AddRect(r => r.X(35).Y(5).Width(30).Height(30))
                .AddCircle(c => c.Cx(50).Cy(60).R(17))
                .AddEllipse(e => e.Cx(50).Cy(100).Rx(25).Ry(12))
                .AddLine(l => l.X1(30).X2(70).Y1(140).Y2(140).Stroke(Color.Teal))
                )
            .AddG(ggg => ggg.Fill(Paint.None).StrokeWidth(3).Stroke(Color.Teal).Transform(t => t.Translate(300, -160))
                .AddPolygon(points: new double[] { 30, 215, 90, 215, 120, 230, 70, 240, 30, 215 }, fill: Color.Teal)
                .AddPolyline(points: new double[] { 30, 200, 65, 170, 90, 190, 120, 180 })
                .AddPath(d: path => path.M(30, 275).Q(55, 250, 70, 250).T(80, 275).T(120, 260))
                )

        .Build(document.FirstChild as SVGSVGElement);
    document.Save(Path.Combine(OutputDir, "svg-elements.svg"));
}

Element Builders bieten eine flüssige und ausdrucksstarke Syntax zum Erstellen von SVG-Elementen und verbessern die Lesbarkeit und Wartbarkeit des Codes. In diesem Beispiel erstellt SVGSVGElementBuilder ein SVG-Element mit den Attributen width, height und viewBox. Anschließend werden Rechtecke, Kreise, Ellipsen, Linien, Polylinien, Polygone und Pfade erzeugt und innerhalb von <g>-Elementen positioniert und gestaltet.

Warum Fluent SVG Builders verwenden?

DOM-Manipulation	Builder API
Manuelle Attributverwaltung	Stark typisierte Methoden
Ausführlicherer Code	Fluent Method Chaining
Schwerer zu warten	Besser lesbar
Wiederholte XML-Operationen	Wiederverwendbare Builder-Logik

FAQ

1. Warum verwenden Entwickler Builder APIs statt direkter XML-Erzeugung?
Builder APIs ersetzen manuelle XML-Erzeugung durch typisierte Fluent-Methoden und machen SVG-Code leichter lesbar, wartbar und erweiterbar.

2. Ist das generierte SVG standardkonform?
Ja. Aspose.SVG erzeugt standardbasiertes SVG-Markup, das mit modernen SVG-Rendering-Engines kompatibel ist.

3. Kann ich mit Element Builders interaktive SVG-Grafiken erzeugen?
Ja. Erzeugte SVG-Elemente können später in Webanwendungen mit CSS und JavaScript gestaltet, animiert oder manipuliert werden.

4. Können generierte SVG-Grafiken direkt in HTML-Seiten eingebettet werden?
Ja. Mit Aspose.SVG erstellte SVG-Dokumente können inline in HTML eingebettet oder als eigenständige SVG-Dateien verwendet werden.

Häufige Fehler und Lösungen

Problem	Mögliche Ursache	Empfohlene Lösung
SVG-Element ist nicht sichtbar	Fehlende Füllung oder Kontur	Fill() oder Stroke() anwenden
SVG-Änderungen werden nicht gespeichert	Dokument wurde nach der Änderung nicht gespeichert	Nach Updates document.Save() aufrufen
Elemente liegen außerhalb der Zeichenfläche	Falsche Koordinaten oder falsche viewBox	SVG-Abmessungen und Positionen prüfen
Vorhandenes Element wird nicht aktualisiert	Falsche Elementreferenz	Sicherstellen, dass das Zielelement korrekt abgerufen wurde
Formen erscheinen verzerrt	Ungültige viewBox-Proportionen	Konsistente SVG-Koordinatensysteme verwenden

Verwandte Ressourcen

• Der Artikel SVG Builder API erklärt, wie Sie SVG-Elemente in C# mit der Aspose.SVG Builder API programmgesteuert erstellen und bearbeiten. Erfahren Sie, wie Fluent Builder die SVG-Erzeugung vereinfachen und die Lesbarkeit des Codes in .NET-Anwendungen verbessern.
• Im Artikel SVG-Datei bearbeiten erfahren Sie, wie Sie SVG mit der Bibliothek Aspose.SVG for .NET bearbeiten, und finden detaillierte C#-Beispiele zum Hinzufügen und Bearbeiten von Elementen in einem SVG-Dokument.
• Besuchen Sie den Artikel Path Builder, um zu lernen, wie Sie den Path Builder verwenden, um SVG-Pfade programmgesteuert zu erstellen – eine Gruppe von Befehlen zum Zeichnen verschiedener Umrisse oder Formen durch Kombinieren von SVG-Linien, SVG-Bögen und Bezier-Kurven.
• Der Artikel Rule Builder behandelt die RuleBuilder-Klasse, eine Builder-Klasse zum Erstellen von CSS-Stilregeln in einem SVG-Dokument.
• Der Artikel Paint Builder behandelt PaintBuilder, eine Builder-Klasse zum Erstellen von Farbwerten (Paint) für SVG-Elemente. Diese Klasse wird verwendet, um den Wert der Attribute stroke oder fill für verschiedene SVG-Formen und -Elemente beim Füllen mit Farbe, Mustern oder Gradienten anzugeben.