Crear SVG en C#

Cómo crear SVG en C#

Scalable Vector Graphics (SVG) es un lenguaje XML para crear gráficos vectoriales bidimensionales, y un documento SVG es un archivo de texto que describe imágenes como primitivas geométricas: líneas, curvas, formas, texto, etc. Si desarrolla sitios web, cree datos visualizaciones o trabajos en materiales impresos, SVG proporciona una solución versátil y eficiente para la creación de gráficos. La biblioteca Aspose.SVG for .NET proporciona un conjunto de clases y métodos para crear, editar, convertir y otras manipulaciones con archivos SVG. Entonces, ¡creemos un nuevo documento SVG!

Primero, 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 la consola del Administrador de paquetes NuGet usando el siguiente comando:

Install-Package Aspose.SVG

Crear un documento SVG vacío

Aspose.SVG for .NET API proporciona la clase SVGDocument que se puede utilizar para crear un documento SVG. Un SVGDocument es la raíz de la jerarquía SVG y contiene todo el contenido. El siguiente fragmento de código C# muestra el uso del constructor predeterminado SVGDocument() para crear un documento vacío:

1. Cree un documento SVG desde cero utilizando el constructor SVGDocument() .
2. Guarde el archivo SVG usando uno de los métodos Save() .

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

    // Initialize an empty SVG document
    using (var document = new SVGDocument())
    {
        // Work with the SVG document here...

        // Save the document to a file
        document.Save(Path.Combine(OutputDir, "empty.svg"));
    }

Crear SVG a partir de una cadena de memoria

Generar un SVG a partir de una cadena de memoria puede resultar útil si desea generar SVG sobre la marcha. Crear SVG a partir de una cadena le permite actualizar y representar fácilmente conjuntos de datos cambiantes en sus visualizaciones. Puede crear SVG a partir de un contenido de cadena usando el constructor SVGDocument(string, string) :

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

    var documentContent = "<svg xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"70\" cy=\"70\" r=\"60\" fill=\"#ff0000\" /> <polygon points=\"160,10 350,140 210,350 50,199\" style=\"fill: orange\" /></svg>";

    using (var document = new SVGDocument(documentContent, "."))
    {
        // Work with the document here...

        // Save the document to a file
        document.Save(Path.Combine(OutputDir, "from-string.svg"));
    }

Cómo agregar elementos a un archivo SVG

Aspose.SVG for .NET te permite editar archivos SVG y cambiar su contenido. El modelo de objetos de documento (DOM) de la API proporciona control completo sobre los nodos SVG y sus atributos y cumple totalmente con las especificaciones oficiales de SVG.

Una vez creado el objeto del documento, se puede completar con elementos SVG. Puede personalizar el documento agregando más elementos como formas SVG, textos, filtros, etc., utilizando las clases apropiadas proporcionadas por el espacio de nombres Aspose.Svg . Por ejemplo, aquí se explica cómo agregar un círculo decorado y texto:

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 creamos arriba (svg-from-scratch.svg) se ve así:

Recursos útiles

• Para obtener más información sobre Aspose.SVG for .NET API, visite nuestra documentación .
• En el artículo Create SVG, Load and Read SVG in C# , descubrirá cómo crear SVG a partir de un archivo, secuencia o cadena de memoria; cómo cargar SVG desde la Web y leer SVG con Resources Async.
• El artículo de documentación Edit SVG File – C# Examples le brinda información básica sobre cómo leer o editar el modelo de objetos de documento usando Aspose.SVG for .NET API. 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 artículo se consideran ejemplos detallados de cómo agregar y editar nuevos elementos en SVG y aplicar filtros SVG a mapas de bits.
• Le recomendamos visitar nuestra guía SVG Drawing – Basics Tutorial si desea obtener más información sobre las reglas y la sintaxis de SVG. Aquí explicamos las reglas generales y los pasos estándar para crear SVG desde cero con ejemplos simples.

Otras características compatibles de Aspose.SVG for .NET API

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