Crear SVG, cargar y leer SVG en C#

Para realizar cualquier tarea, debe crear o cargar un documento. Aspose.SVG for .NET API le permite crear un documento SVG desde cero, así como cargar un SVG existente desde diferentes fuentes. La API proporciona la clase SVGDocument que tiene varios constructores que le permiten producir nuevas instancias de clase. El SVGDocument es la raíz de la jerarquía SVG DOM, contiene todo el contenido y se basa completamente en las especificaciones W3C SVG 2.0 y WHATWG DOM.

Los archivos SVG se pueden crear y cargar:

• desde cero como un documento vacío con estructura SVG,
• de una cadena proporcionada por el usuario,
• desde un flujo de memoria o un archivo,
• desde la web.

Este artículo proporciona algunos ejemplos de creación y carga de archivos SVG utilizando Aspose.SVG for .NET API. SVGDocument tiene un amplio conjunto de constructores sobrecargados que le permiten crear un documento en blanco o cargarlo desde un archivo, URL, secuencia, etc.

Crear un documento SVG vacío

Aspose.SVG for .NET API proporciona la clase SVGDocument que se puede utilizar para crear un documento vacío utilizando su constructor predeterminado. Una vez creado el objeto del documento, se puede rellenar más adelante con elementos SVG. El siguiente fragmento de código C# muestra el uso del constructor predeterminado SVGDocument() para crear un documento SVG.

using Aspose.Svg;
...

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

Si desea guardar el documento SVG vacío creado en un archivo, utilice el siguiente fragmento de código C#:

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

    // Prepare output path for a document saving
    string documentPath = Path.Combine(OutputDir, "empty.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(documentPath);
	}

Más detalles sobre cómo guardar archivos SVG se encuentran en la sección Guardar un documento SVG. En el artículo Editar archivo SVG, aprenderá cómo editar SVG usando Aspose.SVG para la biblioteca .NET y encontrará ejemplos detallados de cómo agregar nuevos elementos a documentos SVG y aplicar filtros SVG a mapas de bits.

Crear SVG a partir de una cadena de memoria

Puede crear SVG a partir de un contenido de cadena usando el constructor SVGDocument (string, string). Si su caso es producir un documento a partir de una cadena de usuario directamente en su código y no necesita guardarlo en un archivo, el siguiente ejemplo podría ayudarle: producimos un documento SVG que contiene un círculo con un radio de 40 píxeles.

using Aspose.Svg;
...

    // Prepare SVG code
    var documentContent = "<svg xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"50\" cy=\"50\" r=\"40\" /></svg>";	

	// Initialize an SVG document from a string content
	using (var document = new SVGDocument(documentContent, "."))
	{
	    // Work with the document here...
	}

Crear SVG a partir de una secuencia

Para crear SVG a partir de una secuencia, utilice uno de los constructores SVGDocument():

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

    //Prepare a path to a file required for a FileStream object creating
    string documentPath = Path.Combine(DataDir, "bezier-curves.svg");

	// Create a FileStream object
	using (var stream = new FileStream(documentPath, FileMode.Open, FileAccess.Read))
	{
	    // Initialize an SVG document from the stream
		using (var document = new SVGDocument(stream, "."))
	    {
	        // Work with the document
	    }
	}

Cree documentos SVG personalizados utilizando la API SVG Builder

La API SVG Builder ofrece una forma potente y flexible de construir documentos SVG mediante programación. Al aprovechar la clase SVGSVGElementBuilder, los desarrolladores pueden crear fácilmente gráficos SVG complejos con opciones de personalización detalladas. Para obtener más información sobre cómo utilizar la API SVG Builder, consulte el artículo de documentación Creación y modificación avanzada de SVG con Aspose.SVG Builder API.

A continuación se muestra un ejemplo que demuestra cómo crear un documento SVG personalizado con varios elementos gráficos:

using Aspose.Svg;
using Aspose.Svg.Builder;
using System.Drawing;
...

    // Initialize an SVG document
    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(100).Height(100)
            .ViewBox(-21, -21, 42, 42)
            .AddDefs(def => def
                .AddRadialGradient(id: "b", cx: .2, cy: .2, r: .5, fx: .2, fy: .2, extend: ev => ev
                    .AddStop(offset: 0, stopColor: Color.FromArgb(0xff, 0xff, 0xFF), stopOpacity: .7)
                    .AddStop(offset: 1, stopColor: Color.FromArgb(0xff, 0xff, 0xFF), stopOpacity: 0)
                )
                .AddRadialGradient(id: "a", cx: .5, cy: .5, r: .5, extend: ev => ev
                    .AddStop(offset: 0, stopColor: Color.FromArgb(0xff, 0xff, 0x00))
                    .AddStop(offset: .75, stopColor: Color.FromArgb(0xff, 0xff, 0x00))
                    .AddStop(offset: .95, stopColor: Color.FromArgb(0xee, 0xee, 0x00))
                    .AddStop(offset: 1, stopColor: Color.FromArgb(0xe8, 0xe8, 0x00))
                )
            )
            .AddCircle(r: 20, fill: "url( #a)", stroke: Color.FromArgb(0, 0, 0), extend: c => c.StrokeWidth(.15))
            .AddCircle(r: 20, fill: "b")
            .AddG(g => g.Id("c")
                .AddEllipse(cx: -6, cy: -7, rx: 2.5, ry: 4)
                .AddPath(fill: Paint.None, stroke: Color.FromArgb(0, 0, 0), d: "M10.6 2.7a4 4 0 0 0 4 3", extend: e => e.StrokeWidth(.5).StrokeLineCap(StrokeLineCap.Round))
            )
            .AddUse(href: "#c", extend: e => e.Transform(t => t.Scale(-1, 1)))
            .AddPath(d: "M-12 5a13.5 13.5 0 0 0 24 0 13 13 0 0 1-24 0", fill:Paint.None, stroke: Color.FromArgb(0,0,0), extend: e => e.StrokeWidth(.75))
            .Build(document.FirstChild as SVGSVGElement);

        // Save the SVG document
        document.Save(OutputFolder + "face.svg");
    }

Este fragmento de código crea un documento SVG con un diseño complejo, lo que demuestra la flexibilidad y el poder de la API SVG Builder para generar gráficos SVG personalizados mediante programación. En el código C# anterior, creamos un documento SVG con elementos como círculos, elipses, trazados y degradados. La imagen SVG generada representa una cara con una sonrisa (cara sonriente):

Cargar SVG desde un archivo

Para cargar SVG desde un archivo bezier-curves.svg, utilice el constructor predeterminado de la clase SVGDocument y pásele la ruta del archivo como parámetro de entrada.

using Aspose.Svg;
using System.IO;
...
    
    // Prepare a path to a file loading
    string documentPath = Path.Combine(DataDir, "bezier-curves.svg"); 
	
	// Load an SVG document from the file
	using (var document = new SVGDocument(documentPath))
	{
	    // Work with the document 
	}

Cargar SVG desde la Web

Los siguientes ejemplos podrían ayudarle a crear un documento a partir de una URL que haga referencia al archivo XML:

using Aspose.Svg;
...

    // Load SVG from the Web at its URL
    var documentUrl = new Url("https://docs.aspose.com/svg/files/owl.svg");
    using (var document = new SVGDocument(documentUrl))
    {
        // Work with the SVG document here...
    }

using Aspose.Svg;
...

    // Load SVG from the Web at its URL
    using (var document = new SVGDocument(new Url("https://docs.aspose.com/svg/files/basic-shapes.svg")))
    {
        // Work with the SVG document here...
    }

Si configura una URL incorrecta a la que no se puede acceder en este momento, la biblioteca genera DOMException con el código especializado ‘NetworkError’ para informarle que no se puede encontrar el recurso seleccionado.

Leer SVG con recursos asíncronos

Si SVG contiene recursos externos, puede llevar tiempo cargar todos los recursos por completo y, por lo tanto, provocar el bloqueo del subproceso principal de la aplicación. En un modelo asíncrono, los eventos Load y ReadyStateChange se pueden suscribir para notificar a la aplicación de carga la carga completa del archivo SVG, como se muestra en el siguiente ejemplo de código. El método Navigate(Url) de la clase SVGDocument se utiliza para cargar el documento en la URL especificada en la instancia actual.

using Aspose.Svg;
using System.Threading;
...

    var documentUrl = new Url("https://docs.aspose.com/svg/files/owl.svg");
	var document = new SVGDocument();
	var documentEvent = new ManualResetEvent(false);

	// Subscribe to the event 'OnReadyStateChange' that will be fired once the document is completely loaded
	document.OnReadyStateChange += (sender, ev) =>
	{
	    if (document.ReadyState == "complete")
	    {
	        // Sets the state of the event to signaled to unblock the main thread
	        documentEvent.Set();
	    }
	};
	// Load the SVG document Async
	document.Navigate(documentUrl);

	// Blocks the current thread while the document is loading
	documentEvent.WaitOne();

	// Work with the document

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