Créer, charger et lire des fichiers SVG en C#

Ce guide explique comment créer, charger et lire des fichiers SVG en C# avec Aspose.SVG for .NET. Vous apprendrez à initialiser un SVGDocument à partir d’un document vide, d’un contenu de chaîne, d’un stream, d’un fichier local, d’une URL, et à charger des documents SVG avec des ressources externes de manière asynchrone.

La classe SVGDocument est le point d’entrée pour travailler avec du contenu SVG dans Aspose.SVG for .NET. Elle représente la racine de la hiérarchie DOM SVG, contient tout le contenu du document et suit 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 forme de document vide avec une structure SVG,
• à partir d’une chaîne fournie par l’utilisateur,
• à partir d’un stream mémoire ou d’un fichier,
• depuis le Web.

Les exemples C# suivants présentent les constructeurs SVGDocument et les scénarios de chargement les plus courants.

Démarrage rapide: créer un document SVG en C#

Le moyen le plus rapide de créer un document SVG consiste à transmettre le balisage SVG sous forme de chaîne au constructeur SVGDocument. C’est utile lorsque le contenu SVG est généré dynamiquement dans votre application:

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

Créer un document SVG vide

Aspose.SVG for .NET API fournit la classe SVGDocument, qui peut être utilisée pour créer un document vide avec son constructeur par défaut. Une fois l’objet document créé, il peut être complété plus tard 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 (SVGDocument 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;

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

Vous trouverez plus de détails sur l’enregistrement des fichiers SVG dans la section Enregistrer un document SVG. Dans l’article Modifier un fichier SVG, vous apprendrez à modifier SVG avec la bibliothèque Aspose.SVG for .NET et trouverez des exemples détaillés pour ajouter de nouveaux éléments aux documents SVG et appliquer des filtres SVG aux bitmaps.

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

Utilisez le constructeur SVGDocument(string, string) lorsque le balisage SVG existe déjà en mémoire, par exemple après avoir été généré par votre application ou reçu depuis une base de données, une API ou une saisie utilisateur.

Le second argument du constructeur est l’URI de base. Aspose.SVG l’utilise pour résoudre les chemins relatifs dans le SVG, comme les images liées, les fichiers CSS ou les polices. Si le balisage SVG ne référence aucune ressource externe, vous pouvez passer ".", comme dans l’exemple de démarrage rapide ci-dessus. Sinon, transmettez le dossier ou l’URL où se trouvent ces ressources:

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

Charger SVG depuis un stream

Pour charger SVG depuis un stream, utilisez l’un des constructeurs SVGDocument() qui accepte un objet Stream. Ce modèle est utile pour lire SVG depuis des fichiers téléversés, des ressources intégrées, des tampons mémoire ou d’autres sources qui ne sont pas des fichiers:

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

Créer des documents SVG personnalisés avec SVG Builder API

La SVG Builder API offre un moyen puissant et flexible de construire des documents SVG par programmation. Avec la classe SVGSVGElementBuilder, les développeurs peuvent créer des graphiques SVG complexes avec des options de personnalisation détaillées. Pour plus d’informations, consultez Création et modification avancées de SVG avec Aspose.SVG Builder API.

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

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

Cet extrait de code crée un document SVG avec une conception complexe et démontre la flexibilité et la puissance de SVG Builder API pour générer des graphiques SVG personnalisés par programmation. Dans le code C# ci-dessus, nous créons un document SVG avec des éléments tels que des cercles, des ellipses, des chemins et des dégradés. L’image SVG générée représente un visage souriant:

Charger SVG depuis un fichier local

Pour charger SVG depuis le 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 (SVGDocument document = new SVGDocument(documentPath))
	{
	    // Work with the document
	}

Charger SVG depuis le Web

Vous pouvez également charger SVG directement depuis une URL. Les exemples suivants montrent comment créer un SVGDocument depuis une adresse Web qui pointe vers un fichier 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 vous définissez une URL incorrecte qui ne peut pas être atteinte, la bibliothèque lève une DOMException avec le code spécialisé NetworkError pour vous informer que la ressource sélectionnée est introuvable.

Charger SVG avec des ressources externes de manière asynchrone

Si un document SVG référence des ressources externes comme des images, des polices, des fichiers CSS ou des scripts, le chargement peut prendre plus de temps et bloquer le thread principal de l’application. Dans un modèle de chargement asynchrone, vous pouvez vous abonner aux événements Load et ReadyStateChange et notifier votre application lorsque le document SVG et ses ressources sont prêts.

La méthode Navigate(Url) de la classe SVGDocument charge le document depuis l’URL spécifiée dans l’instance actuelle.

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

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

FAQ

1. Pourquoi les images, polices ou fichiers CSS ne se chargent-ils pas lorsque je crée SVG à partir d’une chaîne ou d’un stream?
Lorsque SVG est créé à partir d’une chaîne ou d’un stream, les chemins relatifs des ressources sont résolus par rapport à l’URI de base passé au constructeur SVGDocument. Si les images, polices ou fichiers CSS liés ne sont pas chargés, vérifiez que l’URI de base pointe vers le dossier ou l’URL où se trouvent ces ressources.

2. Que se passe-t-il si un fichier SVG contient un balisage non valide?
Aspose.SVG analyse SVG comme un contenu basé sur XML. Si le balisage est mal formé ou si les ressources requises ne peuvent pas être résolues, le chargement du document ou son traitement ultérieur peut échouer. Validez le balisage SVG généré et gérez les exceptions de chargement dans le code de production.

3. Puis-je modifier un SVGDocument après son chargement?
Oui. Après le chargement d’un fichier SVG, vous pouvez parcourir et modifier son DOM, ajouter ou supprimer des éléments, mettre à jour des attributs, appliquer des styles et enregistrer le résultat. Pour des exemples détaillés, consultez l’article Modifier un fichier SVG.

4. SVGDocument convient-il aux applications côté serveur?
Oui. Aspose.SVG for .NET peut être utilisé dans des services backend, des applications ASP.NET, des traitements par lots et des workflows d’automatisation documentaire sans dépendre de l’automatisation d’un navigateur.

5. Quelle est la différence entre SVG Builder API et la manipulation du DOM?
SVG Builder API est pratique pour créer de nouvelles structures SVG en C# étape par étape. La manipulation du DOM est préférable lorsque vous travaillez avec un document SVG déjà chargé et devez modifier ses éléments, attributs ou styles existants.

Étapes suivantes

• Enregistrer un document SVG – enregistrer des documents SVG dans des fichiers, streams, archives ZIP ou URL.
• Modifier un fichier SVG – ajouter, modifier et supprimer des éléments SVG par programmation.
• Inspecter et parcourir SVG – inspecter les éléments SVG et parcourir le DOM SVG avec des sélecteurs CSS ou XPath.
• Comment convertir des fichiers SVG – convertir SVG en PDF, XPS, PNG, JPEG et autres formats.
• Comment exécuter les exemples – configurer et exécuter les projets d’exemple Aspose.SVG.