Créer du SVG, charger et lire du SVG en C#

Pour effectuer n’importe quelle tâche, vous devez créer ou charger un document. L’API Aspose.SVG pour .NET vous permet de créer un document SVG à partir de zéro ainsi que de charger un SVG existant à partir de différentes sources. L’API fournit la classe SVGDocument qui possède plusieurs constructeurs vous permettant de produire de nouvelles instances de classe. Le SVGDocument est la racine de la hiérarchie SVG DOM, contient l’intégralité du contenu et est entièrement basé sur les spécifications W3C SVG 2.0 et WHATWG DOM.

Les fichiers SVG peuvent être créés et chargés :

• à partir de zéro sous la forme d’un document vide avec une structure SVG,
• à partir d’une chaîne fournie par l’utilisateur,
• à partir d’un flux mémoire ou d’un fichier,
• du Web.

Cet article fournit quelques exemples de création et de chargement de fichiers SVG à l’aide d’Aspose.SVG pour l’API .NET. Le SVGDocument dispose d’un large ensemble de constructeurs surchargés vous permettant de créer un document vierge ou de le charger à partir d’un fichier, d’une URL, d’un flux, etc.

Créer un document SVG vide

Aspose.SVG pour l’API .NET fournit la classe SVGDocument qui peut être utilisée pour créer un document vide à l’aide de son constructeur par défaut. Une fois l’objet document créé, il peut être rempli ultérieurement avec des éléments SVG. L’extrait de code C# suivant montre l’utilisation du constructeur par défaut SVGDocument() pour créer un document SVG.

using Aspose.Svg;
...

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

Si vous souhaitez enregistrer le document SVG vide créé dans un fichier, utilisez l’extrait de code C# suivant :

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);
	}

Plus de détails sur l’enregistrement des fichiers SVG se trouvent dans la section Enregistrer un document SVG. Dans l’article Modifier le fichier SVG, vous apprendrez comment modifier SVG à l’aide de la bibliothèque Aspose.SVG pour .NET et trouverez des exemples détaillés sur la façon d’ajouter de nouveaux éléments aux documents SVG et d’appliquer des filtres SVG aux bitmaps.

Créer SVG à partir d’une chaîne mémoire

Vous pouvez créer du SVG à partir d’un contenu de chaîne en utilisant le constructeur SVGDocument (string, string). Si votre cas est de produire un document à partir d’une chaîne utilisateur directement dans votre code et que vous n’avez pas besoin de l’enregistrer dans un fichier, l’exemple suivant pourrait vous aider : nous produisons un document SVG qui contient un cercle de rayon 40 pixels.

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...
	}

Créer du SVG à partir d’un flux

Pour créer du SVG à partir d’un flux, utilisez l’un des constructeurs 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
	    }
	}

Créer des documents SVG personnalisés à l’aide de l’API SVG Builder

L’API SVG Builder offre un moyen puissant et flexible de construire des documents SVG par programmation. En tirant parti de la classe SVGSVGElementBuilder, les développeurs peuvent facilement créer des graphiques SVG complexes avec des options de personnalisation détaillées. Pour plus d’informations sur l’utilisation de l’API SVG Builder, reportez-vous à l’article de documentation API SVG Builder – Création et modification avancées de SVG.

Voici un exemple montrant comment créer un document SVG personnalisé comportant divers éléments graphiques:

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");
    }

Cet extrait de code crée un document SVG avec une conception complexe, démontrant la flexibilité et la puissance de l’API SVG Builder pour générer des graphiques SVG personnalisés par programme. L’image SVG résultante représente un visage souriant (smiley):

Charger SVG à partir d’un fichier

Pour charger SVG à partir d’un fichier bezier-curves.svg, utilisez le constructeur par défaut de la classe SVGDocument et transmettez-lui le chemin du fichier comme paramètre d’entrée.

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 
	}

Charger SVG depuis le Web

Les exemples suivants pourraient vous aider à créer un document à partir d’une URL faisant référence au fichier 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 vous définissez une mauvaise URL qui n’est pas accessible à ce moment-là, la bibliothèque lève l’exception DOMException avec le code spécialisé «NetworkError» pour vous informer que la ressource sélectionnée est introuvable.

Lire SVG avec des ressources asynchrones

Si SVG contient des ressources externes, le chargement complet de toutes les ressources peut prendre du temps, ce qui peut entraîner le blocage du thread principal de l’application. Dans un modèle asynchrone, les événements Load et ReadyStateChange peuvent être abonnés pour informer l’application de chargement du chargement complet du fichier SVG, comme indiqué dans l’exemple de code suivant. La méthode Navigate(Url) de la classe SVGDocument est utilisée pour le chargement du document à l’URL spécifiée dans l’instance actuelle.

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

Vous pouvez télécharger les exemples complets et les fichiers de données depuis GitHub. Vous découvrirez le téléchargement depuis GitHub et l’exécution d’exemples dans la section Comment exécuter les exemples.