Element Builders – Créer des éléments SVG en C# avec Fluent Builder API

L’ Aspose.SVG Builder API permet aux développeurs de créer et de modifier des éléments SVG par programmation en C# avec une syntaxe fluent builder. Au lieu de construire manuellement du XML SVG ou de manipuler directement les attributs DOM, Element Builders offre une approche plus propre et plus maintenable pour générer du SVG.

La Builder API prend en charge les éléments SVG courants tels que les rectangles, cercles, chemins, lignes, polygones, textes et groupes. Grâce aux builders imbriqués et aux méthodes chaînées, les développeurs peuvent générer des graphiques SVG complexes avec moins de code répétitif et une meilleure lisibilité.

Cet article explique comment créer des éléments SVG en C#, construire des graphiques SVG par programmation et modifier des documents SVG existants avec Aspose.SVG for .NET. Vous découvrirez la classe de base SVGElementBuilder, la classe SVGSVGElementBuilder, les builders spécialisés et la manière dont ils simplifient la programmation SVG.

Que sont les SVG Element Builders?

Les Element Builders sont des classes spécialisées utilisées pour créer des éléments SVG par programmation. Chaque builder correspond à un élément SVG précis et fournit des méthodes fortement typées pour configurer les attributs et styles SVG.

La Builder API prend en charge:

• les formes SVG;
• les éléments de texte;
• les groupes;
• les chemins;
• le style;
• les transformations;
• les structures SVG réutilisables.

La syntaxe fluide simplifie la génération SVG et améliore la maintenabilité du code dans les applications .NET.

SVG Element Builders pris en charge

Builder	Élément SVG
SVGSVGElementBuilder	<svg>
SVGRectElementBuilder	<rect>
SVGCircleElementBuilder	<circle>
SVGLineElementBuilder	<line>
SVGPathElementBuilder	<path>
SVGTextElementBuilder	<text>
SVGGElementBuilder	<g>
SVGPolygonElementBuilder	<polygon>
SVGPolylineElementBuilder	<polyline>

Vous trouverez la liste complète des builders SVG sur la page de référence API Aspose.Svg.Builder.

Création de nouveaux éléments

L’API Aspose.SVG SVG Builder utilise le Fluent Builder Pattern, une approche de conception adaptée aux besoins de simplicité, de clarté et de polyvalence dans la manipulation SVG.

Fluent Builder Pattern

Dans SVG Builder API, le Fluent Builder Pattern simplifie la création et la mise à jour des éléments SVG, rendant le processus plus intuitif et moins sujet aux erreurs. Le principe consiste à utiliser des méthodes qui configurent un élément SVG et renvoient l’instance du builder pour le chaînage de méthodes.

Les expressions lambda améliorent la clarté et la concision des méthodes de configuration. Elles permettent de définir les attributs et styles des éléments SVG de manière détaillée mais compacte:

    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);
    }

Ici, circle => circle.Cx(100).Cy(100).R(50).Fill(Color.Red).Stroke(Paint.None).StrokeWidth(2) est une façon concise de configurer le centre, le rayon, le remplissage et le contour du cercle. Cette approche simplifie la configuration des éléments et améliore la lisibilité ainsi que la maintenabilité du code.

Créer du SVG à partir de zéro

Voici une approche concise pour créer des SVG à partir de zéro avec 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"));
}

L’exemple utilise le Fluent Builder Pattern dans SVGSVGElementBuilder pour construire les éléments SVG. Ce modèle offre une manière expressive et maintenable de générer des documents SVG par rapport à l’approche décrite dans l’article Modifier le fichier SVG, qui repose davantage sur la manipulation DOM de bas niveau et la définition explicite d’attributs. Cette approche:

• offre une manière plus fluide et plus lisible de créer des structures complexes;
• réduit le code répétitif, car des attributs comme cx, cy, r et fill sont définis directement avec des méthodes du builder.

Modification du SVG

Une technique puissante pour modifier des SVG par programmation consiste à utiliser Element Builders.

Ajout de nouveaux éléments

Modifier des SVG avec des Element Builders offre une approche puissante et flexible pour manipuler des graphiques vectoriels par programmation. Dans l’exemple suivant, un fichier SVG existant est chargé, enrichi, puis enregistré:

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"));
}

Dans cet exemple:

• Un nouvel élément <circle> est créé avec SVGCircleElementBuilder. Ses attributs cx, cy, r, fill, stroke et stroke-width sont configurés avec des appels de méthodes fluides.
• Un nouvel élément <polyline> est créé avec SVGPolylineElementBuilder, avec des points et des paramètres de contour définis par programmation.
• Une fois chaque élément configuré, la méthode Build(Document document) construit l’élément et le renvoie pour l’ajouter au document.
• Les nouveaux éléments <circle> et <polyline> sont ajoutés comme enfants à l’élément racine <svg> du document SVG.

La figure (a) montre le fichier circles.svg original, et la figure (b) montre le fichier circles-edited.svg modifié avec un cercle et une polyligne ajoutés.

Modification d’éléments existants

Dans l’exemple C# suivant, nous mettons à jour un document SVG existant en changeant la couleur de remplissage et de contour du premier élément SVG <circle> du document:

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 fournit la méthode Build(T element) pour mettre à jour des éléments SVG existants et modifier leurs attributs ou styles. La figure (a) montre le fichier circles.svg original, et la figure (b) montre circles-modified.svg avec le premier cercle recoloré.

Exemple d’utilisation de Element Builders

L’extrait suivant montre comment utiliser Element Builders pour créer un document SVG contenant différents éléments de forme SVG.

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 fournit une syntaxe fluide et expressive pour construire des éléments SVG, ce qui améliore la lisibilité et la maintenabilité du code. Dans cet exemple, SVGSVGElementBuilder construit un élément SVG avec les attributs width, height et viewBox. Le Fluent Builder Pattern est ensuite utilisé pour créer des rectangles, cercles, ellipses, lignes, polylignes, polygones et chemins, chacun étant positionné et stylisé dans des éléments <g>.

Pourquoi utiliser Fluent SVG Builders?

Manipulation DOM	Builder API
Gestion manuelle des attributs	Méthodes fortement typées
Code plus verbeux	Syntaxe fluide chaînée
Plus difficile à maintenir	Plus facile à lire
Opérations XML répétées	Logique de builder réutilisable

FAQ

1. Pourquoi utiliser Builder APIs au lieu de générer directement du XML?
Builder APIs remplace la construction XML manuelle par des méthodes fluides typées, ce qui rend le code SVG plus lisible, maintenable et extensible.

2. Le SVG généré respecte-t-il les standards?
Oui. Aspose.SVG génère un balisage SVG basé sur les standards et compatible avec les moteurs de rendu SVG modernes.

3. Puis-je générer des graphiques SVG interactifs avec Element Builders?
Oui. Les éléments SVG générés peuvent ensuite être stylisés, animés ou manipulés avec CSS et JavaScript dans des applications web.

4. Les graphiques SVG générés peuvent-ils être intégrés directement dans des pages HTML?
Oui. Les documents SVG créés avec Aspose.SVG peuvent être intégrés en ligne dans HTML ou utilisés comme fichiers SVG autonomes.

Erreurs courantes et corrections

Problème	Cause possible	Correction recommandée
L’élément SVG n’est pas visible	Remplissage ou contour manquant	Appliquer Fill() ou Stroke()
Les changements SVG ne sont pas enregistrés	Le document n’a pas été enregistré après modification	Appeler document.Save() après les mises à jour
Les éléments apparaissent hors du canevas	Coordonnées ou viewBox incorrectes	Vérifier les dimensions et positions SVG
L’élément existant n’est pas mis à jour	Référence d’élément incorrecte	Vérifier que l’élément cible est bien récupéré
Les formes semblent déformées	Proportions viewBox invalides	Utiliser des systèmes de coordonnées SVG cohérents

Ressources connexes

• L’article SVG Builder API explique comment créer et manipuler des éléments SVG par programmation en C# avec Aspose.SVG Builder API. Découvrez comment les builders fluides simplifient la génération SVG et améliorent la lisibilité du code dans les applications .NET.
• Dans l’article Modifier le fichier SVG, vous pouvez apprendre à modifier le SVG à l’aide de la bibliothèque Aspose.SVG for .NET et consulter des exemples C# détaillés sur la manière d’ajouter des éléments à un document SVG et de les modifier.
• Consultez l’article Path Builder pour apprendre à utiliser Path Builder pour créer des chemins SVG par programmation, un groupe de commandes permettant de dessiner divers contours ou formes en combinant des lignes SVG, des arcs SVG et des courbes de Bézier.
• L’article Rule Builder présente la classe RuleBuilder, une classe de builder permettant de construire des règles de style CSS dans un document SVG.
• L’article Paint Builder présente PaintBuilder, une classe de builder permettant de créer des valeurs de peinture pour les éléments SVG. Cette classe est utilisée pour spécifier la valeur des attributs stroke ou fill pour diverses formes et éléments SVG lors du remplissage avec de la peinture, un motif ou un dégradé.