Element Builders – Crear elementos SVG en C# con Fluent Builder API

La Aspose.SVG Builder API permite crear y editar elementos SVG mediante programación en C# con sintaxis fluent builder. En lugar de construir XML SVG manualmente o manipular atributos DOM directamente, Element Builders ofrece un enfoque más limpio y mantenible para generar SVG.

La Builder API admite elementos SVG comunes como rectángulos, círculos, rutas, líneas, polígonos, texto y grupos. Con constructores anidados y métodos encadenados, los desarrolladores pueden generar gráficos SVG complejos con menos código repetitivo y mayor legibilidad.

Este artículo explica cómo crear elementos SVG en C#, construir gráficos SVG mediante programación y modificar documentos SVG existentes con Aspose.SVG for .NET. Aprenderá sobre la clase base SVGElementBuilder, la clase SVGSVGElementBuilder, los constructores especializados y cómo simplifican la programación SVG.

¿Qué son los SVG Element Builders?

Element Builders son clases constructoras especializadas que se usan para crear elementos SVG mediante programación. Cada constructor corresponde a un elemento SVG específico y proporciona métodos fuertemente tipados para configurar atributos y estilos SVG.

La Builder API admite:

• formas SVG;
• elementos de texto;
• grupos;
• rutas;
• estilos;
• transformaciones;
• estructuras SVG reutilizables.

La sintaxis fluida simplifica la generación de SVG y mejora la mantenibilidad del código en aplicaciones .NET.

SVG Element Builders compatibles

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

Encontrará la lista completa de constructores SVG en la página de referencia de API Aspose.Svg.Builder.

Crear nuevos elementos

Aspose.SVG SVG Builder API emplea Fluent Builder Pattern, una metodología de diseño adecuada para lograr simplicidad, claridad y versatilidad al manipular SVG.

Fluent Builder Pattern

En SVG Builder API, Fluent Builder Pattern se utiliza para simplificar la creación y actualización de elementos SVG, haciendo que el proceso sea intuitivo y menos propenso a errores. La esencia del patrón son métodos que configuran un elemento SVG y devuelven la instancia del constructor para encadenar métodos.

En este contexto, las expresiones lambda mejoran la claridad y concisión de los métodos de configuración. Permiten definir atributos y estilos de elementos SVG de forma detallada y compacta:

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

Aquí, circle => circle.Cx(100).Cy(100).R(50).Fill(Color.Red).Stroke(Paint.None).StrokeWidth(2) es una forma compacta de configurar el centro, radio, relleno y trazo del círculo. Este enfoque simplifica la configuración del elemento y mejora la legibilidad y mantenibilidad del código.

Crear SVG desde cero

Aquí veremos un enfoque conciso para crear SVG desde cero con 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"));
}

El ejemplo utiliza Fluent Builder Pattern dentro de SVGSVGElementBuilder para construir los elementos SVG. Este patrón proporciona una forma expresiva y fácil de mantener para generar documentos SVG en comparación con el enfoque descrito en el artículo Editar archivo SVG, que depende más de la manipulación del DOM de bajo nivel y de la configuración explícita de atributos. Este enfoque:

• proporciona una forma más fluida y legible de crear estructuras complejas;
• reduce el código repetitivo, ya que atributos como cx, cy, r y fill se establecen directamente mediante métodos del constructor.

Editar SVG

Una técnica eficaz para editar SVG mediante programación es el uso de Element Builders.

Agregar nuevos elementos

Editar SVG con constructores de elementos proporciona un enfoque potente y flexible para manipular gráficos vectoriales mediante programación. En el siguiente ejemplo, se toma un archivo SVG existente, se le agregan elementos y se guarda:

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

En este ejemplo:

• Se crea un nuevo elemento <circle> usando SVGCircleElementBuilder. Sus atributos cx, cy, r, fill, stroke y stroke-width se configuran con llamadas de métodos fluidas.
• Se crea un nuevo elemento <polyline> usando SVGPolylineElementBuilder, con puntos y configuración de trazo definidos mediante programación.
• Una vez configurado cada elemento, el método Build(Document document) construye el elemento y lo devuelve para agregarlo al documento.
• Los elementos <circle> y <polyline> recién creados se agregan como hijos al elemento raíz <svg> del documento SVG.

La figura (a) muestra el archivo circles.svg original, y la figura (b) muestra el archivo circles-edited.svg editado con un círculo y una polilínea agregados.

Modificar elementos existentes

En el siguiente ejemplo de C#, actualizamos un documento SVG existente cambiando el color de relleno y trazo del primer elemento SVG <circle> del documento:

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 ofrece el método Build(T element) para actualizar elementos SVG existentes, permitiendo modificar sus atributos o estilos. La figura (a) muestra el archivo circles.svg original, y la figura (b) muestra circles-modified.svg con el primer círculo recoloreado.

Ejemplo de uso de Element Builders

El siguiente fragmento de código muestra cómo usar Element Builders para crear un documento SVG con varios elementos de forma 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 proporciona una sintaxis fluida y expresiva para construir elementos SVG, mejorando la legibilidad y mantenibilidad del código. En este ejemplo, SVGSVGElementBuilder construye un elemento SVG con atributos width, height y viewBox. Luego, Fluent Builder Pattern se usa para crear rectángulos, círculos, elipses, líneas, polilíneas, polígonos y rutas, posicionados y estilizados dentro de elementos <g>.

¿Por qué usar Fluent SVG Builders?

Manipulación DOM	Builder API
Manejo manual de atributos	Métodos fuertemente tipados
Código más verboso	Sintaxis fluida encadenada
Más difícil de mantener	Más fácil de leer
Operaciones XML repetidas	Lógica de constructor reutilizable

FAQ

1. ¿Por qué los desarrolladores usan Builder APIs en lugar de generar XML directamente?
Builder APIs reemplaza la construcción manual de XML por métodos fluidos tipados, haciendo que el código SVG sea más fácil de leer, mantener y extender.

2. ¿El SVG generado cumple los estándares?
Sí. Aspose.SVG genera marcado SVG basado en estándares y compatible con motores modernos de renderizado SVG.

3. ¿Puedo generar gráficos SVG interactivos con Element Builders?
Sí. Los elementos SVG generados pueden diseñarse, animarse o manipularse posteriormente con CSS y JavaScript en aplicaciones web.

4. ¿Los gráficos SVG generados pueden incrustarse directamente en páginas HTML?
Sí. Los documentos SVG creados con Aspose.SVG pueden incrustarse en HTML o usarse como archivos SVG independientes.

Errores comunes y soluciones

Problema	Posible causa	Solución recomendada
El elemento SVG no es visible	Falta relleno o trazo	Aplique Fill() o Stroke()
Los cambios SVG no se guardan	El documento no se guardó tras modificar	Llame a document.Save() después de actualizar
Los elementos aparecen fuera del lienzo	Coordenadas o viewBox incorrectos	Verifique dimensiones y posiciones SVG
El elemento existente no se actualiza	Referencia de elemento incorrecta	Asegúrese de recuperar correctamente el elemento objetivo
Las formas aparecen distorsionadas	Proporciones de viewBox no válidas	Use sistemas de coordenadas SVG coherentes

Recursos relacionados

• El artículo SVG Builder API explica cómo crear y manipular elementos SVG mediante programación en C# usando Aspose.SVG Builder API. Aprenda cómo los builders fluentes simplifican la generación de SVG y mejoran la legibilidad del código en las aplicaciones .NET.
• En el artículo Editar archivo SVG, puede aprender a editar SVG con la biblioteca Aspose.SVG for .NET y ver ejemplos detallados de C# sobre cómo agregar elementos a un documento SVG y editarlos.
• Visite el artículo Path Builder para aprender a usar Path Builder para crear rutas SVG mediante programación, un grupo de comandos para dibujar varios contornos o formas combinando líneas SVG, arcos SVG y curvas Bezier.
• El artículo Rule Builder trata sobre la clase RuleBuilder, que es una clase constructora para construir reglas de estilo CSS en un documento SVG.
• El artículo Paint Builder trata sobre PaintBuilder, una clase constructora para crear valores de pintura para elementos SVG. Esta clase se utiliza para especificar el valor de los atributos stroke o fill para diversas formas y elementos SVG al rellenarlos con pintura, patrón o degradado.