Créer du SVG en C#

Comment créer du SVG en C#

Scalable Vector Graphics (SVG) est un langage XML permettant de créer des graphiques vectoriels bidimensionnels, et un document SVG est un fichier texte qui décrit les images comme des primitives géométriques: lignes, courbes, formes, texte, etc. Si vous développez des sites Web, créez des données. visualisations ou travaux sur des supports imprimés, SVG offre une solution polyvalente et efficace pour la création graphique. La bibliothèque Aspose.SVG for .NET fournit un ensemble de classes et de méthodes pour créer, éditer, convertir et autres manipulations avec des fichiers SVG. Alors, créons un nouveau document SVG !

Tout d’abord, assurez-vous que Aspose.SVG pour l’API .NET est installé dans votre projet. Le processus d’installation est assez simple. Vous pouvez l’installer via la console NuGet Package Manager à l’aide de la commande suivante:

Install-Package Aspose.SVG

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 SVG. Un SVGDocument est la racine de la hiérarchie SVG et contient l’intégralité du contenu. L’extrait de code C# suivant montre l’utilisation du constructeur par défaut SVGDocument() pour créer un document vide:

1. Créez un document SVG à partir de zéro à l’aide du constructeur SVGDocument() .
2. Enregistrez le fichier SVG en utilisant l’une des méthodes Save() .

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

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

Générer un SVG à partir d’une chaîne mémoire peut être utile si vous souhaitez générer des SVG à la volée. La création de SVG à partir d’une chaîne vous permet de mettre à jour et de représenter facilement des ensembles de données changeants dans vos visualisations. Vous pouvez créer du SVG à partir d’un contenu de chaîne en utilisant le constructeur SVGDocument(string, string) :

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

Comment ajouter des éléments à un fichier SVG

Aspose.SVG pour .NET vous permet d’éditer des fichiers SVG et de modifier leur contenu. Le modèle objet de document (DOM) de l’API offre un contrôle complet sur les nœuds SVG et leurs attributs et est entièrement conforme aux spécifications officielles SVG.

Une fois l’objet document créé, il peut être rempli d’éléments SVG. Vous pouvez personnaliser le document en ajoutant plus d’éléments tels que des formes SVG, des textes, des filtres, etc., en utilisant les classes appropriées fournies par l’espace de noms Aspose.Svg . Par exemple, voici comment ajouter un cercle décoré et du texte:

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

Examinons les étapes simples pour modifier un document SVG qui illustrent le code C# ci-dessus. Des éléments SVG <circle> et <text> sont ajoutés au document SVG créé:

1. Pour créer un document SVG par programme à partir de zéro, utilisez le constructeur SVGDocument() sans paramètres.
2. La propriété RootElement de la classe SVGDocument pointe vers l’élément racine <svg> du document.
3. Créez des éléments <text> et <circle> avec des attributs et ajoutez-les à l’élément <svg>:
   • Vous pouvez utiliser la méthode CreateElementNS() pour créer une instance des classes SVGTextElement et SVGCircleElement.
   • Appelez la méthode SetAttribute() pour définir les attributs spécifiant la position, la taille, le remplissage, etc.
   • Utilisez la méthode AppendChild() pour ajouter les éléments dans <svg>.
4. Enregistrez le fichier SVG modifié à l’aide de la méthode Save() .

Le fichier résultant que nous avons créé ci-dessus (svg-from-scratch.svg) ressemble à ceci:

Ressources utiles

• Pour en savoir plus sur Aspose.SVG pour l’API .NET, veuillez visiter notre documentation .
• Dans l’article Créer SVG, Charger et Lire SVG en C# , vous découvrez comment créer du SVG à partir d’un fichier, d’un flux ou d’une chaîne mémoire ; comment charger SVG depuis le Web et lire SVG avec Resources Async.
• L’article de documentation Modifier le fichier SVG - Exemples C# vous donne des informations de base sur la façon de lire ou de modifier le modèle objet de document à l’aide d’Aspose.SVG pour l’API .NET. Vous découvrirez comment créer des éléments SVG et comment travailler avec eux - modifier le document en insérant de nouveaux nœuds, en supprimant ou en modifiant le contenu des nœuds existants. Dans l’article, des exemples détaillés d’ajout et de modification de nouveaux éléments en SVG et d’application de filtres SVG aux bitmaps sont pris en compte.
• Nous vous recommandons de visiter notre guide Dessin SVG – Tutoriel de base si vous souhaitez en savoir plus sur les règles et la syntaxe SVG. Ici, nous expliquons les règles générales et les étapes standard pour créer du SVG à partir de zéro avec des exemples simples.

Autres fonctionnalités de l'API Aspose.SVG pour .NET prises en charge

Utilisez la bibliothèque Aspose.SVG C# pour convertir, fusionner, éditer des documents SVG, convertir des codes couleur, vectoriser des images et bien plus encore !