Editar SVG en C#

Cómo editar SVG en C#

La biblioteca Aspose.SVG for .NET proporciona un conjunto de clases y métodos para crear, editar, convertir y realizar otras manipulaciones con archivos SVG. Una vez creado el objeto documento, se puede rellenar con elementos SVG. Puede personalizar el documento añadiendo más elementos como formas SVG, textos, filtros, etc. En este artículo, exploraremos dos ejemplos de C# que demuestran diferentes enfoques para crear y editar SVG: uno utilizando la Aspose.SVG Builder API , y el otro utilizando la manipulación manual del DOM con la configuración directa de elementos y atributos.

En primer lugar, asegúrese de tener Aspose.SVG for .NET API instalado en su proyecto. El proceso de instalación es bastante sencillo. Puede instalarlo a través de NuGet Package Manager Console utilizando el siguiente comando:

Install-Package Aspose.SVG

Añadir elementos a un archivo SVG con Element Builders

Los constructores de elementos son clases especializadas de la API Aspose.SVG Builder que facilitan la creación y modificación de elementos SVG en código. Suelen utilizar patrones como el patrón constructor fluido para proporcionar una sintaxis limpia y legible para establecer atributos y estructurar el contenido SVG mediante programación. El siguiente código muestra un enfoque conciso y elegante para crear SVG desde cero utilizando C#. El ejemplo utiliza un Fluent Builder Pattern dentro de SVGSVGElementBuilder para construir y añadir nuevos elementos al SVG: un círculo decorado y texto.

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...
    using (var document = new SVGDocument())
    {
        // Create an <svg> element with specified width, height and viewBox, and add into it other required elements
        var 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.Salmon).StrokeWidth(70).StrokeDashArray(2,14))
            .AddText("I can add elements to SVG!", x: 270, y: 140, fontSize: 30, fill: Color.DarkRed)
            )
            .Build(document.FirstChild as SVGSVGElement);
        
        // Save the document
        document.Save(Path.Combine(OutputDir, "svg-from-scratch.svg"));
    }

Añadir elementos a un archivo SVG

La API del Modelo de Objetos del Documento (DOM) proporciona un control total sobre los nodos SVG y sus atributos y es totalmente compatible con las especificaciones oficiales de SVG. Puede modificar el documento añadiendo nuevos nodos, eliminando los existentes o editando su contenido. Por ejemplo, aquí se explica cómo añadir un círculo decorado y texto a un SVG:

using System.IO;
using Aspose.Html;
...

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

    using (var document = new SVGDocument())
    {
        var svgElement = document.RootElement;

        // Create a text element and set its attributes
        var textElement = (SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
        textElement.Style.FontSize = "2.0em";
        textElement.SetAttribute("x", "270px");
        textElement.SetAttribute("fill", "darkred");
        textElement.SetAttribute("y", "140px");
        textElement.TextContent = "I can add elements to SVG!";

        // Create a circle element and set its attributes
        var circleElement = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle");
        circleElement.Cx.BaseVal.Value = 130;
        circleElement.Cy.BaseVal.Value = 130;
        circleElement.R.BaseVal.Value = 60;
        circleElement.SetAttribute("stroke", "salmon");
        circleElement.SetAttribute("stroke-width", "70");
        circleElement.SetAttribute("fill", "none");
        circleElement.SetAttribute("stroke-dasharray", "2,14");

        // Add the text and circle elements into svgElement
        svgElement.AppendChild(textElement);
        svgElement.AppendChild(circleElement);

        // Save the document
        document.Save(Path.Combine(OutputDir, "svg-from-scratch.svg"));
    }

Veamos los pasos simples para editar un documento SVG que ilustran el código С# anterior. Se agregan elementos SVG <circle> y <text> al documento SVG creado:

1. Para crear un documento SVG mediante programación desde cero, utilice el constructor SVGDocument() sin parámetros.
2. La propiedad RootElement de la clase SVGDocument apunta al elemento raíz <svg> del documento.
3. Cree elementos <text> y <circle> con atributos y agréguelos al elemento <svg>:
   • Puede utilizar el método CreateElementNS() para crear instancias de las clases SVGTextElement y SVGCircleElement.
   • Llame al método SetAttribute() para establecer atributos que especifiquen la posición, el tamaño, el relleno, etc.
   • Utilice el método AppendChild() para agregar los elementos a <svg>.
4. Guarde el archivo SVG editado usando el método Save() .

El archivo resultante que hemos creado arriba es el mismo para ambos ejemplos de código (svg-from-scratch.svg), y tiene el siguiente aspecto:

Recursos útiles

• El artículo de documentación Editar archivo SVG – Ejemplos C# le ofrece información básica sobre cómo leer o editar el Modelo de objetos de documento utilizando la API Aspose.SVG for .NET. Explorará cómo crear elementos SVG y cómo trabajar con ellos: modificar el documento insertando nuevos nodos, eliminando o editando el contenido de los nodos existentes.
• En el capítulo SVG Builder – Creación y modificación avanzada de SVG , encontrará una guía para manipular SVG de forma eficaz mediante la API Aspose.SVG Builder, que abarca aspectos desde la creación de elementos básicos hasta técnicas avanzadas como mixins y azúcar sintáctico.
• El artículo Element Builders – Constructores de elementos SVG profundiza en los constructores de elementos utilizados en la API Aspose.SVG Builder. Aprenderá sobre la clase SVGElementBuilder, sus constructores especializados y cómo simplifican la programación SVG.

Otras funciones compatibles

Utilice la biblioteca Aspose.SVG C# para convertir, combinar y editar documentos SVG, convertir códigos de color, vectorizar imágenes y mucho más.