Modifier un SVG en C#

Édition de SVG en C#

La bibliothèque Aspose.SVG for .NET propose un ensemble de classes et de méthodes pour créer, éditer, convertir et effectuer d’autres manipulations avec des fichiers SVG. Une fois que l’objet document est créé, il peut être rempli avec des éléments SVG. Vous pouvez personnaliser le document en ajoutant d’autres éléments tels que des formes SVG, du texte, des filtres, etc. Dans cet article, nous allons examiner deux exemples C# qui démontrent différentes approches de création et de modification de SVG : l’un en utilisant l’API Aspose.SVG Builder et l’autre en utilisant la manipulation manuelle du DOM avec un réglage direct des éléments et des attributs.

Assurez-vous d’abord que vous avez installé Aspose.SVG for .NET API dans votre projet. Le processus d’installation est assez simple. Vous pouvez l’installer via la console NuGet Package Manager en utilisant la commande suivante :

Install-Package Aspose.SVG

Ajouter des éléments à un fichier SVG avec Element Builders

Les Element Builders sont des classes spécialisées de l’API Aspose.SVG Builder qui facilitent la création et la modification d’éléments SVG dans le code. Ils utilisent souvent des modèles tels que le Fluent Builder Pattern afin de fournir une syntaxe propre et lisible pour le réglage des attributs et la structuration programmatique du contenu SVG. Le code suivant démontre une approche concise et élégante pour la création de SVG à partir de zéro avec C#. L’exemple utilise un pattern Fluent Builder à l’intérieur de SVGSVGElementBuilder pour construire et ajouter de nouveaux éléments au SVG : un cercle décoré et du texte.

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...
    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(700).Height(300)
            .ViewBox(0, 0, 700, 300)

            .AddG(g => g
            .AddCircle(circle => circle.Cx(130).Cy(130).R(60).Fill(Paint.None).Stroke(Color.Salmon).StrokeWidth(70).StrokeDashArray(2,14))
            .AddText("I can add elements to SVG!", x: 270, y: 140, fontSize: 30, fill: Color.DarkRed)
            )
            .Build(document.FirstChild as SVGSVGElement);
        
        // Save the document
        document.Save(Path.Combine(OutputDir, "svg-from-scratch.svg"));
    }

Ajouter des éléments à un fichier SVG

L’API Document Object Model (DOM) offre un contrôle total sur les nœuds SVG et leurs attributs et est entièrement conforme aux spécifications officielles du SVG. Vous pouvez modifier le document en ajoutant de nouveaux nœuds, en supprimant des nœuds existants ou en modifiant leur contenu. Par exemple, vous ajoutez un cercle décoré et du texte à un SVG :

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 est le même pour les deux exemples de code (svg-from-scratch.svg) et se présente comme suit :

Ressources utiles

• L’article de documentation Modifier un fichier SVG – Exemples C# vous donne des informations de base sur la manière de lire ou de modifier le Document Object Model avec l’API Aspose.SVG for .NET. Vous apprendrez à créer des éléments SVG et à travailler avec eux – à modifier le document en insérant de nouveaux nœuds, en supprimant ou en modifiant le contenu de nœuds existants.
• Dans le chapitre SVG Builder – Création et modification avancées de SVG , vous trouverez des instructions sur la manière de modifier efficacement un SVG avec l’API Aspose.SVG Builder, qui couvre des aspects allant de la création d’éléments de base à des techniques plus avancées comme les mixins et le sucre syntaxique.
• L’article Element Builders traite des Element Builders utilisés dans l’API Aspose.SVG Builder. Vous y découvrirez la classe SVGElementBuilder, ses builders spécialisés et comment ils simplifient la programmation SVG.

Autres fonctions 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 plus encore !