Crear, cargar y leer archivos SVG en C#

Esta guía muestra cómo crear, cargar y leer archivos SVG en C# con Aspose.SVG for .NET. Aprenderá a inicializar un SVGDocument desde un documento vacío, contenido de cadena, stream, archivo local, URL, y a cargar documentos SVG con recursos externos de forma asíncrona.

La clase SVGDocument es el punto de entrada para trabajar con contenido SVG en Aspose.SVG for .NET. Representa la raíz de la jerarquía DOM de SVG, contiene todo el contenido del documento y sigue 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,
• desde una cadena proporcionada por el usuario,
• desde un stream de memoria o un archivo,
• desde la web.

Los siguientes ejemplos de C# muestran los constructores de SVGDocument y escenarios de carga más comunes.

Inicio rápido: crear un documento SVG en C#

La forma más rápida de crear un documento SVG es pasar el marcado SVG como una cadena al constructor SVGDocument. Esto resulta útil cuando el contenido SVG se genera dinámicamente en la aplicación:

using Aspose.Svg;
...

    string svgContent = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\"><circle cx=\"50\" cy=\"50\" r=\"40\" /></svg>";

    using (SVGDocument document = new SVGDocument(svgContent, "."))
    {
        document.Save("circle.svg");
    }

Crear un documento SVG vacío

Aspose.SVG for .NET API proporciona la clase SVGDocument, que se puede usar para crear un documento vacío mediante su constructor predeterminado. Una vez creado el objeto de documento, puede rellenarse 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 (SVGDocument 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;

// Create an empty SVG document using C#

// Prepare an output path to save a document
string documentPath = Path.Combine(OutputDir, "empty.svg");

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

    // Save the document to a file
    document.Save(documentPath);
}

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

Crear SVG desde una cadena en memoria

Use el constructor SVGDocument(string, string) cuando el marcado SVG ya exista en memoria, por ejemplo después de generarse en la aplicación o recibirse desde una base de datos, API o entrada del usuario.

El segundo argumento del constructor es el URI base. Aspose.SVG lo usa para resolver rutas relativas dentro del SVG, como imágenes vinculadas, archivos CSS o fuentes. Si el marcado SVG no hace referencia a recursos externos, puede pasar ".", como en el ejemplo de inicio rápido anterior. Si los referencia, pase la carpeta o URL donde se encuentran esos recursos:

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

    // SVG markup contains a relative reference to an external image
    string documentContent = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"200\" height=\"120\"><image href=\"images/logo.png\" width=\"200\" height=\"120\" /></svg>";

    // Relative paths in the SVG are resolved against this base URI
    string baseUri = Path.Combine(DataDir, "assets") + Path.DirectorySeparatorChar;

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

Cargar SVG desde un stream

Para cargar SVG desde un stream, use uno de los constructores SVGDocument() que acepta un objeto Stream. Este patrón es útil para leer SVG desde archivos cargados por usuarios, recursos incrustados, búferes de memoria u otros orígenes que no son archivos:

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 (FileStream stream = new FileStream(documentPath, FileMode.Open, FileAccess.Read))
	{
	    // Initialize an SVG document from the stream
		using (SVGDocument document = new SVGDocument(stream, "."))
	    {
	        // Work with the document
	    }
	}

Crear documentos SVG personalizados con SVG Builder API

La SVG Builder API ofrece una forma potente y flexible de construir documentos SVG mediante programación. Con la clase SVGSVGElementBuilder, los desarrolladores pueden crear gráficos SVG complejos con opciones de personalización detalladas. Para obtener más información, consulte Creación y modificación avanzada de SVG con Aspose.SVG Builder API.

Este ejemplo demuestra cómo crear un documento SVG personalizado con varios elementos gráficos:

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

// Create SVG using Builder API

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an <svg> element with specified width, height and viewBox, and add into it other required elements
    SVGSVGElement 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(Path.Combine(OutputDir, "face.svg"));
}

Este fragmento de código crea un documento SVG con un diseño complejo y demuestra la flexibilidad y potencia de la SVG Builder API 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 sonriente:

Cargar SVG desde un archivo local

Para cargar SVG desde un archivo bezier-curves.svg, use 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 (SVGDocument document = new SVGDocument(documentPath))
	{
	    // Work with the document 
	}

Cargar SVG desde la web

También puede cargar SVG directamente desde una URL. Los siguientes ejemplos muestran cómo crear un SVGDocument desde una dirección web que apunta a un archivo SVG:

using Aspose.Svg;
...

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

using Aspose.Svg;
...

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

Si establece una URL incorrecta a la que no se puede acceder, la biblioteca genera una DOMException con el código especializado NetworkError para informar de que no se puede encontrar el recurso seleccionado.

Cargar SVG con recursos externos de forma asíncrona

Si un documento SVG hace referencia a recursos externos como imágenes, fuentes, archivos CSS o scripts, la carga puede requerir más tiempo y bloquear el hilo principal de la aplicación. En un modelo de carga asíncrona, puede suscribirse a los eventos Load y ReadyStateChange y notificar a la aplicación cuando el documento SVG y sus recursos estén listos.

El método Navigate(Url) de la clase SVGDocument carga el documento desde la URL especificada en la instancia actual.

using Aspose.Svg;
using System.Threading;

// Load SVG asynchronously using C#

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

SVGDocument document = new SVGDocument();

// 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 an 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 los ejemplos en la sección Cómo ejecutar los ejemplos.

FAQ

1. ¿Por qué no se cargan imágenes, fuentes o archivos CSS cuando creo SVG desde una cadena o stream?
Cuando se crea SVG desde una cadena o stream, las rutas relativas de recursos se resuelven respecto al URI base pasado al constructor SVGDocument. Si no se cargan imágenes, fuentes o archivos CSS vinculados, compruebe que el URI base apunta a la carpeta o URL donde se encuentran esos recursos.

2. ¿Qué ocurre si un archivo SVG contiene marcado no válido?
Aspose.SVG analiza SVG como contenido basado en XML. Si el marcado está mal formado o no se pueden resolver recursos necesarios, la carga del documento o su procesamiento posterior pueden fallar. Valide el marcado SVG generado y controle las excepciones de carga en código de producción.

3. ¿Puedo modificar un SVGDocument después de cargarlo?
Sí. Después de cargar un archivo SVG, puede navegar y modificar su DOM, agregar o quitar elementos, actualizar atributos, aplicar estilos y guardar el resultado. Para ejemplos detallados de edición, consulte el artículo Editar archivo SVG.

4. ¿SVGDocument es adecuado para aplicaciones del lado del servidor?
Sí. Aspose.SVG for .NET puede usarse en servicios backend, aplicaciones ASP.NET, procesadores por lotes y flujos de automatización documental sin depender de automatización del navegador.

5. ¿Cuál es la diferencia entre SVG Builder API y la manipulación DOM?
SVG Builder API es conveniente para crear nuevas estructuras SVG en C# paso a paso. La manipulación DOM es mejor cuando trabaja con un documento SVG ya cargado y necesita cambiar sus elementos, atributos o estilos existentes.

Próximos pasos

• Guardar un documento SVG – guardar documentos SVG en archivos, streams, archivos ZIP o URL.
• Editar archivo SVG – agregar, modificar y eliminar elementos SVG mediante programación.
• Inspeccionar y navegar por SVG – inspeccionar elementos SVG y navegar por el DOM de SVG con selectores CSS o XPath.
• Cómo convertir archivos SVG – convertir SVG a PDF, XPS, PNG, JPEG y otros formatos.
• Cómo ejecutar los ejemplos – configurar y ejecutar proyectos de ejemplo de Aspose.SVG.