Path Builder – Crear SVG Paths en C#

Crear SVG Path con Aspose.SVG

Los SVG paths son una de las funciones SVG más potentes para crear gráficos vectoriales personalizados, curvas, contornos y formas complejas. Con Aspose.SVG Builder API, puede crear SVG path elements en C# con sintaxis fluida, sin escribir manualmente cadenas SVG path data.

Este artículo explica cómo crear SVG paths en C#, construir gráficos vectoriales complejos mediante programación y usar SVG text paths con Aspose.SVG for .NET.

Path Builder

La clase PathBuilder simplifica la creación de SVG paths mediante métodos para comandos comunes como M, L, C, Q, A y Z.

Aspose.SVG Builder API proporciona SVGPathElementBuilder para construir elementos SVG <path> mediante programación. Con PathBuilder, los comandos SVG path se definen mediante métodos encadenados.

Los SVG paths se usan para:

• ilustraciones vectoriales;
• formas personalizadas;
• iconos;
• gráficos y diagramas;
• curvas y contornos;
• efectos text path.

Builders within Builders

SVG Builder API usa builders anidados para definir estructuras SVG complejas. En el siguiente ejemplo, PathBuilder es un builder dentro de otro builder: SVGSVGElementBuilder crea el elemento <svg> y PathBuilder construye el elemento <path> interno.

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

// Create an SVG path element with line commands programmatically in C# using SVG Path Builder

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an <svg> element with specified width, height and viewBox, and add a <path> element to it
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(200).Height(200)
        .ViewBox(0, 0, 150, 150)

        .AddPath(p => p
        // 'D' method defines the 'd' attribute, which contains the path data
        .D(d => d
        // 'M' sets the starting point of the path (Move to x=50, y=50)
        .M(50, 50)
        // 'L' draws a line from the current point to the new point (Line to x=100, y=50)
        .L(100, 50)
        // Another 'L' to draw a line to a new point (Line to x=100, y=100)
        .L(100, 100)
        // 'Z' closes the path by drawing a line to the starting point
        .Z())
        // Sets the fill color of the path to teal 
        .Fill(Color.Teal))
        .Build(document.FirstChild as SVGSVGElement);

    // Save the SVG document
    document.Save(Path.Combine(OutputDir, "path.svg"));
}

Cómo funciona el Path

En este ejemplo, AddPath() define un elemento <path>. El método D() define SVG path data con comandos SVG path:

• M(50, 50) mueve el cursor al punto inicial;
• L(100, 50) crea un segmento de línea;
• Z() cierra el path.

La sintaxis fluida facilita leer y mantener definiciones SVG path.

SVG Path Commands compatibles con PathBuilder

PathBuilder admite comandos SVG path absolutos y relativos para crear líneas, curvas, arcos y gráficos vectoriales complejos.

Command	Relative Command	Descripción
M	m	Mover el punto actual
L	l	Dibujar una línea recta
H	h	Dibujar una línea horizontal
V	v	Dibujar una línea vertical
C	c	Dibujar una curva Bézier cúbica
S	s	Dibujar una curva cúbica suave
Q	q	Dibujar una curva Bézier cuadrática
T	t	Dibujar una curva cuadrática suave
A	a	Dibujar un arco elíptico
Z	z	Cerrar el path actual

Agregar SVG Path Data personalizada

Path data también puede agregarse directamente como cadena con AddPathSegment().

.D(d => d.AddPathSegment(
    "M199 89 C206 66 235 25 270 30 286 38 298 59 310 73"
))

Este enfoque es útil al importar SVG path data existente o trabajar con gráficos SVG generados externamente.

Crear SVG Curves y Bézier Paths

Los SVG paths admiten curvas Bézier cuadráticas y cúbicas para gráficos vectoriales suaves y contornos complejos.

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

using (SVGDocument document = new SVGDocument())
{
    // Create an <svg> element with specified width, height and viewBox, and add a <path> element to it
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(500).Height(500)
        .ViewBox(0, 0, 400, 400)

        .AddPath(p => p
            .D(d => d
            .M(80, 210)
            .Q(95, 110, 200, 200)
            .T(350, 200)
        )
        // Sets the fill color of the path to red
        .Fill(Color.Red))
        .Build(document.FirstChild as SVGSVGElement);

    // Save the SVG document
    document.Save(Path.Combine(OutputDir, "curve-path.svg"));
}

En este ejemplo:

• Q() crea una curva Bézier cuadrática;
• T() continúa automáticamente la curva suave.

Los comandos de curva se usan en ilustraciones, gráficos, firmas y SVG decorativos.

SVG TextPath

SVG puede colocar texto a lo largo de un path definido por <path>. Esto se realiza con un elemento <textPath> y el atributo href.

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

// Create SVG text path in C# using SVG Builder

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an <svg> element with specified width, height, and viewBox, and add into it <path> elements
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(1200).Height(300)
        .ViewBox(0, 0, 1200, 300)

        .AddPath(p => p.Id("Path1")
            .Fill(f => f.None()).Stroke(Color.IndianRed).Transform(t => t.Translate(-100, 40))
            .D(d => d.AddPathSegment("M 199 89 C 206 66 235 25 270 30 286 38 298 59 310 73 321 87 338 99 356 103 387 111 396 90 410 85"))
         )

        .AddPath(p => p.Id("Path2")
            .Fill(f => f.None()).Stroke(Paint.None).Transform(t => t.Translate(400, -100))
            .D(d => d.M(80, 210).Q(95, 110, 200, 200).T(400, 200)))


         .AddText(t => t.FontSize(30).Fill(Color.Teal)
             .AddTextPath(tp => tp
                 .Href("#Path1")
                 .AddContent("SVG textPath element")
              )
             .AddTextPath(tp => tp
                  .Href("#Path2")
                  .AddContent("SVG can place text along a path")
              )
         )

        .Build(document.FirstChild as SVGSVGElement);

    // Save the SVG document
    document.Save(Path.Combine(OutputDir, "text-path.svg"));
}

En el ejemplo se crean dos paths con distintos atributos id. El primero usa AddPathSegment(), y el segundo usa M(), Q() y T(). El elemento SVG <textPath> referencia el id del <path> y muestra texto a lo largo de ese path:

También se usan builders within builders: SVGSVGElementBuilder crea <svg>, mientras builders anidados agregan <path>, <text> y <textPath>.

Errores comunes y soluciones

Problema	Posible causa	Solución recomendada
El SVG path no es visible	Faltan estilos fill o stroke	Aplique Fill() o Stroke()
La forma del path parece incompleta	El path no está cerrado	Use Z()
El texto no sigue la curva	Referencia de path incorrecta	Asegure que Href() coincida con Id()
Las curvas aparecen distorsionadas	Puntos de control incorrectos	Ajuste los puntos de control Bézier
Path data importada no se renderiza bien	Sintaxis SVG path no válida	Valide la cadena SVG path antes de importar

Quick Recipes

1. Crear un triángulo simple

using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(200).Height(200)
        .ViewBox(0, 0, 150, 150)
        .AddPath(p => p
            .D(d => d
            .M(50, 150)
            .L(150, 150)
            .L(100, 50)
            .Z())
        .Fill(Color.Teal))
        .Build(document.FirstChild as SVGSVGElement);
    document.Save("triangle.svg");
}

2. Agregar un path segment

    .AddPath(p => p
        .Fill(Color.IndianRed)
        .D(d => d.AddPathSegment("M10 75 Q150 0 290 75"))
        )

3. Combinar varios segmentos

    .AddPath(p => p
    .Fill(Color.CadetBlue)
    .Stroke(Color.Red)
    .StrokeWidth(2)
    .D(d => d
        .AddPathSegment("M40 120")
        .AddPathSegment("C70 20 140 20 170 120")
        .AddPathSegment("S270 220 300 120")
        .AddPathSegment("Q250 180 170 170")
        .AddPathSegment("Q90 160 40 120")
        )
    )

Note: La primera receta es un ejemplo completo si se usa con las directivas using mostradas antes. Las demás recetas son fragmentos para integrar en un flujo completo de creación SVG.

FAQ

1. ¿PathBuilder es mejor que escribir SVG path strings manualmente?
Para gráficos SVG complejos, PathBuilder suele ser más fácil de mantener y depurar que concatenar cadenas path manualmente.

2. ¿Por qué usar SVG paths en lugar de shapes básicas?
SVG paths son más flexibles que <rect> o <circle> y pueden representar gráficos vectoriales complejos, curvas y formas compuestas.

3. ¿Puedo convertir SVG path data existente a comandos PathBuilder?
Sí. Los valores existentes del atributo d pueden traducirse a comandos PathBuilder o insertarse con AddPathSegment().

4. ¿Los SVG paths son independientes de la resolución?
Sí. Son vectoriales y escalan sin pérdida de calidad.

5. ¿Puede un SVG path contener varias formas desconectadas?
Sí. Un path puede contener varios subpaths usando varios comandos M.

6. ¿Cuál es la diferencia entre comandos relativos y absolutos?
Los comandos absolutos usan coordenadas fijas; los relativos calculan posiciones respecto al punto actual.

Recursos relacionados

• Consulte SVG Path Data para aprender sobre SVG paths y path commands.
• En Editar archivo SVG puede aprender a editar SVG paths con Aspose.SVG for .NET.
• El artículo Element Builders trata sobre Element Builders en SVG Builder API.
• El artículo Rule Builder explica cómo crear reglas CSS en SVG.
• El artículo Paint Builder trata sobre PaintBuilder para valores stroke y fill.