Rellenar y Trazar en SVG usando C#

SVG (Gráficos vectoriales escalables) es un formato de archivo vectorial compatible con la Web basado en XML. Se utiliza para mostrar información visual en una página web. Las imágenes SVG son escalables sin cambiar la calidad de la imagen. En este artículo, aprenderemos cómo trabajar con relleno y trazo en SVG usando C#.

En este artículo se tratarán los siguientes temas:

1. API de C# para rellenar y trazar en SVG
2. Qué es el relleno SVG
3. Qué es trazo SVG
4. Trazos y rellenos en SVG
5. Rellenar y trazar círculo en SVG
6. Trazado de relleno y trazado en SVG
7. Aplicar relleno y trazo usando estilo

API de C# para rellenar y trazar en SVG

Para trabajar con los atributos de relleno y trazo de SVG en C#, utilizaremos la API Aspose.SVG para .NET. Permite cargar, analizar, renderizar, crear y convertir archivos SVG a formatos populares sin dependencias de software.

La clase SVGDocument de la API representa la raíz de la jerarquía SVG y contiene todo el contenido. El método Save() de esta clase permite guardar SVG en la ruta de archivo especificada. El método QuerySelector() devuelve el primer elemento del documento que coincide con el selector. La API admite el trabajo con formas populares como rectángulos, círculos, elipses, líneas, polilíneas, etc. La API proporciona clases separadas para representar estas formas compatibles, como SVGCircleElement para círculo, SVGPolygonElement para polígono, etc.

Descargue la DLL de la API o instálela usando NuGet.

PM> Install-Package Aspose.SVG

¿Qué es el relleno SVG?

La propiedad de relleno es uno de los atributos de presentación SVG básicos que se utilizan para establecer el color de la forma dentro de su contorno.

Podemos definir los siguientes atributos de relleno:

• relleno: Establece el color para rellenar. Especifique ninguno o transparente si no hay relleno.
• fill-opacity: Establece el valor de opacidad entre 0 y 1.
• regla de relleno: define cómo se determina el área interior de una forma, como distinto de cero, par impar.

¿Qué es trazo SVG?

La propiedad de trazo define el contorno o un borde de las formas SVG. El atributo de presentación del trazo establece el color del contorno de la forma.

Podemos establecer los siguientes atributos de trazo:

• trazo: establece el valor del color.
• stroke-dasharray: especifica los tipos de líneas discontinuas.
• desplazamiento de trazo
• stroke-linecap: controla la forma de los extremos de las líneas, como tope, cuadrado y redondo.
• stroke-linejoin: especifica cómo se unen dos líneas, como inglete, bisel y redondeo.
• stroke-miterlimit: Debe ser mayor o igual a 1 si se usa.
• stroke-opacity: Establece el valor de opacidad entre 0 y 1.
• ancho de trazo: establece el ancho.

Rellenos y Trazos en SVG

Tanto el relleno como el trazo se utilizan para agregar color, degradados o patrones a los gráficos en SVG. El relleno pinta el interior del elemento SVG, mientras que el trazo pinta su contorno. Podemos especificar tanto el relleno como el trazo en el atributo de estilo o usarlos como atributos de presentación.

Podemos establecer rellenos SVG y trazos SVG en el atributo de estilo como se muestra a continuación:

style="stroke:#00ff00; stroke-width:2; fill:#ff0000"

También podemos usar las mismas propiedades de estilo en los atributos de presentación como se muestra a continuación:

stroke="green" stroke-width="2" fill="#ff0000"

Para especificar el color SVG, podemos usar nombres de color como rojo, azul, etc. También podemos usar valores RGB o valores HEX para los colores.

Círculo de relleno y trazo en C#

Podemos establecer las propiedades de relleno SVG y trazo SVG para un círculo siguiendo los pasos que se detallan a continuación:

1. En primer lugar, cargue un SVG existente utilizando la clase SVGDocument.
2. A continuación, obtenga el elemento raíz del documento.
3. Luego, encuentre todos los elementos del círculo usando el método QuerySelectorAll().
4. Después de eso, configure los atributos de relleno para el SVGCircleElement seleccionado.
5. Opcionalmente, establezca los atributos de trazo para el SVGCircleElement seleccionado.
6. Finalmente, guarde la imagen SVG de salida usando el método Save().

El siguiente ejemplo de código muestra cómo configurar el relleno y el trazo para un elemento circular de SVG en C#.

// Este ejemplo de código demuestra cómo establecer atributos de relleno y trazo para un elemento circular de SVG en C#.
// Cargue una imagen SVG existente
var document = new SVGDocument(@"C:\Files\SVG\Circle.svg");

// Obtenga el elemento raíz SVG del documento
var svgElement = document.RootElement;

// Encuentra todos los elementos del círculo en el elemento g
NodeList circleNodes = svgElement.QuerySelectorAll("circle");

// Obtener el primer elemento del círculo.
SVGCircleElement circleElement = circleNodes[0] as SVGCircleElement;

// Establecer atributos de relleno
circleElement.SetAttribute("fill", "#0F0");
circleElement.SetAttribute("fill-opacity", "0.3");

// Establecer atributos de trazo
circleElement.SetAttribute("stroke", "#508484");
circleElement.SetAttribute("stroke-width", "10");

// Guardar el SVG
document.Save(@"C:\Files\SVG\Fill-Circle.svg");

A continuación encontrará el contenido de la imagen Circle.svg.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<g stroke="black">
		<circle r="30" cx="50" cy="35" fill="none"/>
    </g>
</svg>

Aquí va el contenido de la imagen Fill-Circle.svg.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<g stroke="black">
		<circle r="30" cx="50" cy="35" fill="#0F0" fill-opacity="0.3" stroke="#508484" stroke-width="10"/>
    </g>
</svg>

Trazado de relleno y trazo en C#

Podemos establecer las propiedades de relleno SVG y trazo SVG para un elemento de ruta en SVG siguiendo los pasos que se indican a continuación:

1. En primer lugar, cargue un SVG existente utilizando la clase SVGDocument.
2. A continuación, obtenga el elemento raíz del documento.
3. Luego, obtenga el elemento de ruta usando el método QuerySelector().
4. Después de eso, configure los atributos de relleno para el SVGPathElement seleccionado.
5. Opcionalmente, establezca los atributos de trazo para el SVGPathElement seleccionado.
6. Finalmente, guarde la imagen SVG de salida usando el método Save().

El siguiente ejemplo de código muestra cómo configurar el relleno y el trazo para un elemento de ruta de SVG en C#.

// Este ejemplo de código demuestra cómo establecer atributos de relleno y trazo para un elemento de ruta de SVG en C#.
// Cargue una imagen SVG existente
var document = new SVGDocument(@"C:\Files\SVG\Sample-Path.svg");

// Obtenga el elemento raíz SVG del documento
var svgElement = document.RootElement;

// Obtener el primer elemento de ruta
SVGPathElement lineElement = svgElement.QuerySelector("path:nth-child(1)") as SVGPathElement;

// Establecer atributos de relleno
lineElement.SetAttribute("fill", "orange");
lineElement.SetAttribute("fill-opacity", "0.6");

// Establecer atributos de trazo
lineElement.SetAttribute("stroke", "#508484");
lineElement.SetAttribute("stroke-width", "10");

// Guardar el SVG
document.Save(@"C:\Files\SVG\Fill-Path.svg");

A continuación encontrará el contenido de la imagen Sample-Path.svg.

<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
	<g stroke="black">
		<path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="red" stroke-width="3" fill="none" />
    </g>
</svg>

A continuación encontrará el contenido de la imagen Fill-Path.svg.

<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
	<g stroke="black">
		<path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="#508484" stroke-width="10" fill="orange" fill-opacity="0.6"/>
    </g>
</svg>

Aplicar Relleno y Trazo usando Estilo en C#

También podemos aplicar las propiedades de relleno SVG y trazo SVG utilizando el atributo de estilo CSS siguiendo los pasos que se indican a continuación:

1. En primer lugar, cree una instancia de la clase SVGDocument.
2. A continuación, obtenga el elemento raíz del documento.
3. Luego, cree un elemento de círculo utilizando el método CreateElementNS().
4. A continuación, establezca las propiedades básicas del círculo, como Cx, Cy y R.
5. Luego, aplique el atributo de estilo utilizando el método SetAttribute().
6. Después de eso, agregue el elemento secundario utilizando el método AppendChild().
7. Finalmente, guarde la imagen SVG de salida usando el método Save().

El siguiente ejemplo de código muestra cómo aplicar el relleno y el trazo con el estilo CSS en C#.

// Este ejemplo de código muestra cómo aplicar los atributos de relleno y trazo mediante el estilo CSS en C#.
// Crear un nuevo SVG
using (var document = new SVGDocument())
{
    // Obtenga el elemento raíz SVG del documento
    var svgElement = document.RootElement;

    const string @namespace = "http://www.w3.org/2000/svg";
    
    // Añadir círculo
    var circle = (SVGCircleElement)document.CreateElementNS(@namespace, "circle");
    circle.Cx.BaseVal.Value = 50;
    circle.Cy.BaseVal.Value = 50;
    circle.R.BaseVal.Value = 40;
    
    // Establecer atributo de estilo
    circle.SetAttribute("style", "fill:blue; stroke:#fb6796; stroke-width:5");
    
    // Agregar círculo al elemento raíz
    svgElement.AppendChild(circle);
    
    // Guardar el SVG
    document.Save(@"C:\Files\SVG\ApplyStyle.svg");
}

<svg xmlns="http://www.w3.org/2000/svg">
	<g>
		<circle cx="50" cy="50" r="40" style="fill: blue; stroke: rgb(251, 103, 150); stroke-width: 5;"/>
	</g>
</svg>

Obtenga una licencia temporal gratuita

Puede obtener una licencia temporal gratuita para probar Aspose.SVG para .NET sin limitaciones de evaluación.

Conclusión

En este artículo, hemos aprendido a:

• crear una nueva imagen SVG;
• cargar una imagen SVG existente;
• editar una imagen SVG;
• establecer atributos de relleno y trazo para formas de SVG;
• establecer atributos de estilo para las formas en C#.

Además, puede obtener más información sobre Aspose.SVG para .NET en la documentación y explorar las diferentes funciones compatibles con la API. En caso de cualquier ambigüedad, no dude en contactarnos en nuestro foro.

Ver también

• Cambiar el color o el fondo de SVG mediante programación en C#