Crear SVG en C#

Aprenda a crear SVG desde cero y a editar su contenido.

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 para .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 para .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:

Instalar Aspose.SVG para .NET

Install-Package Aspose.SVG

Crear un documento SVG vacío

Aspose.SVG para .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:

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

Código C# para crear un documento SVG vacío

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) :

Código C# para crear un SVG a partir de una cadena

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 para .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:

Código C# para editar 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:

Para crear un documento SVG mediante programación desde cero, utilice el constructor SVGDocument() sin parámetros.
La propiedad RootElement de la clase SVGDocument apunta al elemento raíz <svg> del documento.
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>.
Guarde el archivo SVG editado usando el método Save() .

El archivo resultante que creamos arriba (svg-from-scratch.svg) se ve así:

Texto “Imagen SVG con círculo y texto”

Recursos útiles

Para obtener más información sobre Aspose.SVG para .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 para .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.