Cómo cambiar el color de SVG – Ejemplos de C#

Aspose.SVG for .NET API le permite editar un documento SVG y realizar cambios en su contenido. Usar color es una parte esencial de la creación de SVG. Puede colorear formas, líneas, trazados y texto SVG. Usando ejemplos de C#, veremos formas de aplicar colores en archivos SVG. En este artículo, mostramos cómo trabajar con color SVG usando Aspose.SVG para la biblioteca .NET y consideramos cómo cambiar el color de los elementos SVG o el color de fondo en archivos SVG.

Cómo agregar nuevos elementos SVG y establecer sus propiedades de color, cubrimos en detalle ejemplos de C# en el artículo Editar archivos SVG.

El artículo Color SVG analiza cómo se pueden colorear el texto y las formas SVG. Encontrará una descripción general de cómo se define el color, incluidas las diversas formas en que puede controlar la transparencia del contenido SVG.

Cambiar color SVG

Rellenar y acariciar son operaciones para colorear elementos SVG. Todos los elementos gráficos, como formas, trazados y texto, se representan mediante relleno. El relleno pinta el interior del objeto y el trazo pinta a lo largo de su contorno. SVG stroke y SVG fill son algunas de las principales propiedades CSS que se pueden configurar para cualquier línea, texto y forma. Para obtener más información sobre las propiedades de los atributos de estilo, consulte el artículo Rellenos y trazos en SVG.

La API Aspose.SVG le permite cambiar el color de varios elementos SVG en un documento SVG. Primero, cargaría un documento SVG existente y luego puede cambiar el color del elemento SVG requerido:

1. Utilice uno de los constructores SVGDocument() de la clase SVGDocument para cargar un documento SVG existente.

2. Utilice QuerySelector(selector) para encontrar el elemento deseado en el documento SVG. El método QuerySelector(selector) de la clase Element le permite obtener el primer elemento dentro del documento que coincide con el selector especificado. Con los elementos resultantes, puedes realizar varias manipulaciones: cambiar sus atributos, estilos CSS, etc.

3. Utilice el método SetAttribute(name, value) de la clase Element para especificar los atributos del elemento fill o stroke.

Color del círculo

Para cambiar el color del círculo, debes seguir algunos pasos:

• Abra un archivo SVG de origen.
• Obtener el elemento svg raíz del documento.
• Obtener elemento circular para cambiar de color.
• Establezca un nuevo valor de atributo fill o stroke para el elemento circular.
• Guarde el documento SVG.

El siguiente fragmento de código muestra cómo cambiar el color del círculo para el primer elemento de círculo SVG en el archivo basic-shapes.svg que se muestra en la Figura (a) a continuación:

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

    // Prepare a path to a file loading
    string documentPath = Path.Combine(DataDir, "basic-shapes.svg");

    // Load an SVG document from the file
    var document = new SVGDocument(documentPath);
    
    // Get root svg element of the document
    var svgElement = document.RootElement;

    // Get circle element to change color
    var circleElement = svgElement.QuerySelector("circle") as SVGCircleElement;

    // Set a new "fill" attribute value for the circle element
    circleElement.SetAttribute("fill", "green"); 

	// Save the SVG document to a file
    document.Save(Path.Combine(OutputDir, "circle-color.svg"));

Color de línea

Para cambiar el color de la línea, debes seguir pasos similares. El siguiente ejemplo de C# muestra cómo cambiar el color de la línea para el primer elemento de línea SVG en el archivo basic-shapes.svg:

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

    // Set SVG Namespace Url
    string SvgNamespace = "http://www.w3.org/2000/svg";

	// Prepare a path to a file loading
    string documentPath = Path.Combine(DataDir, "basic-shapes.svg");

    // Load an SVG document from the file
    var document = new SVGDocument(documentPath);

    // Get root svg element of the document
    var svgElement = document.RootElement;

    // Get line element to change color
    var lineElement = svgElement.QuerySelector("line") as SVGLineElement;

    // Set a new "stroke" attribute value for the line element
    lineElement.SetAttribute("stroke", "green");

    // Save the SVG document
    document.Save(Path.Combine(OutputDir, "line-color.svg"));

La siguiente figura muestra la imagen original (a) y las imágenes con cambios de color SVG para el círculo (b) y la línea (c).

El atributo fill establece el color del círculo SVG (Figura b). En el archivo círculo-color.svg resultante, el color del círculo cambia de rojo (en el original) a verde. El atributo stroke establece el color de la línea SVG. En el archivo line-color.svg resultante (Figura c), el color de la línea cambia de gris a verde. De manera similar, puedes cambiar el color de varios elementos gráficos SVG, como formas, trazados y texto, usando el atributo fill o stroke.

Cambiar color de fondo

Para establecer el color de fondo de una imagen SVG, debe agregar un nuevo elemento SVG, como un círculo o un rectángulo, como primer elemento secundario en un documento SVG. Porque la regla sobre el orden en que se muestran los elementos SVG es: los elementos posteriores en el código se muestran encima de los anteriores.

El siguiente fragmento de código muestra cómo crear un nuevo rectángulo SVG como fondo para una imagen SVG y colorearlo:

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

    // Set SVG Namespace Url
    string SvgNamespace = "http://www.w3.org/2000/svg";

    string documentPath = Path.Combine(DataDir, "basic-shapes.svg");

    // Load an SVG document from the file
    var document = new SVGDocument(documentPath);

    // Get root svg element of the document
    var svgElement = document.RootElement;

    // Create a rectangle element and set the "fill" attribute value to change background color
    var rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
    rectElement.X.BaseVal.Value = 3;
    rectElement.Y.BaseVal.Value = 3;
    rectElement.Width.BaseVal.Value = 400;
    rectElement.Height.BaseVal.Value = 400;
    rectElement.SetAttribute("fill", "Salmon");

    // Add the rectangle element as the first child to svg element
    svgElement.InsertBefore(rectElement, svgElement.FirstChild);

    // Save the SVG document
    document.Save(Path.Combine(OutputDir, "change-background-color.svg"));

La figura muestra la visualización del archivo SVG original basic-shapes.svg y el mismo archivo con el color de fondo agregado.

Puede descargar los ejemplos completos y los archivos de datos desde GitHub. Encontrará información sobre la descarga desde GitHub y la ejecución de ejemplos en la sección Cómo ejecutar los ejemplos.

Recolorear SVG

¡Dibujemos un copo de nieve! El siguiente ejemplo de C# muestra cómo dibujar un copo de nieve SVG y cambiarle el color. Puede utilizar este enfoque para cualquier imagen SVG: cambie el color del elemento SVG requerido y cambie el color de fondo:

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

    // Set SVG Namespace Url
    string SvgNamespace = "http://www.w3.org/2000/svg";

    string documentPath = Path.Combine(DataDir, "snowflake-blue.svg");

    // Load an SVG document from the file
    var document = new SVGDocument(documentPath);

    // Get root svg element of the document
    var svgElement = document.RootElement;

    // Create a circle element and set the "fill" attribute value to change background color
    var circleElement = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle");
    circleElement.Cx.BaseVal.Value = 150F;
    circleElement.Cy.BaseVal.Value = 100F;
    circleElement.R.BaseVal.Value = 150F;
    circleElement.SetAttribute("fill", "#03b6fd");

    // Add the circle element (background) as the first child to svg element
    svgElement.InsertBefore(circleElement, svgElement.FirstChild);

    // Get the first path element to change color
    var snowflakePath = svgElement.QuerySelector("path") as SVGPathElement;

    // Set a new "stroke" attribute value for the path element
    snowflakePath.SetAttribute("stroke", "white");

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

La figura muestra la visualización del archivo SVG original snowflake-blue.svg y el archivo recoloreado.

Conversor de color es una aplicación en línea gratuita para transformar colores entre formatos de color. ¡Simplemente ingrese el código de color y obtenga el resultado de inmediato! No necesitas ningún software adicional. ¡Pruebe nuestro contundente convertidor de colores ahora mismo!