Modifier le fichier SVG – Exemples C#

Aspose.SVG pour .NET vous permet de modifier des fichiers SVG et d’apporter des modifications à leur contenu. Le modèle objet de document (DOM) de l’API est entièrement compatible avec les spécifications SVG officielles et signifie un contrôle total sur les nœuds SVG et leurs champs d’édition. Vous pouvez modifier le document en ajoutant de nouveaux nœuds, en supprimant ou en modifiant le contenu des nœuds existants.

Dans cet article, nous montrons comment modifier SVG à l’aide de la bibliothèque Aspose.SVG for .NET et examinons des exemples C# détaillés sur la façon d’ajouter des éléments à un document SVG et de les modifier.

Ajouter des éléments à un document SVG

Aspose.SVG pour l’API .NET vous permet d’ajouter divers éléments à un document. Tout d’abord, vous créeriez un nouvel élément ou nœud ; Ensuite, vous pouvez ajouter l’élément au document.

1. Vous pouvez utiliser la méthode CreateElementNS(namespaceURI, qualifiedName) de la classe SVGDocument pour créer une instance de la classe Element – l’élément requis du fichier qualifié donné. nom et URI de l’espace de noms. Le namespaceURI définit la référence à la spécification W3C SVG. Le qualifiedName doit contenir le nom de balise de chaîne de l’élément. N’oubliez pas que vous devez utiliser le casting du type (conversion explicite) pour obtenir l’élément correspondant.

2. Pour ajouter un élément au document SVG, l’API fournit la méthode InsertBefore(node, child) de la classe Node, qui insère le node avant le nœud enfant existant ou à la fin de la liste des enfants si le child est nul.

La propriété RootElement de la classe SVGDocument pointe vers l’élément racine <svg> du document. L’extrait de code suivant illustre comment créer et ajouter l’élément <g> comme premier enfant dans le document SVG.

    var svgElement = document.RootElement;
    var gElement = (SVGGElement)document.CreateElementNS("https://www.w3.org/2000/svg", "g");
    svgElement.InsertBefore(gElement, svgElement.FirstChild);

Nous pouvons spécifier les attributs des éléments et leurs valeurs en utilisant SetAttribute(name, value), GetAttribute(name), HasAttribute(name), RemoveAttribute(name) méthodes de la classe Element. Par exemple, si vous créez un groupe d’éléments graphiques et que vous les placez dans l’élément <g>, vous pouvez définir des paramètres communs :

    gElement.SetAttribute("fill", "#8A8D8F");
    gElement.SetAttribute("stroke", "magenta");
    gElement.SetAttribute("stroke-width", "4");

Comment ajouter des formes de base à un document SVG

Les formes SVG de base peuvent être créées à l’aide de la méthode CreateElementNS(namespaceURI, qualifiedName). Le qualifiedName doit contenir le nom de la balise de chaîne de l’élément graphique SVG.

De cette façon, vous pouvez créer des cercles SVG (classe SVGCircleElement, qualifiedName = “circle”), des ellipses (classe SVGEllipseElement, qualifiedName = “ellipse”), des rectangles (classe SVGRectElement, qualifiedName = “rect”), des lignes (classe SVGLineElement, qualifiedName = " line"), les polylignes (classe SVGPolylineElement, qualifierName = “polyline”), les polygones (classe SVGPolygonElement, qualifierName = “polygon”) et les courbes de Bézier (classe SVGPathElement, qualifierName = “path”).

Cercle SVG

Chaque élément graphique possède ses propres attributs spécifiques (propriétés), grâce auxquels vous pouvez contrôler ses paramètres et caractéristiques. Cx, Cy, R sont des propriétés de cercle de type SVGAnimatedLength, dont les données statiques peuvent être définies ou lues via la construction : element.X.BaseVal.Value.

L’extrait de code suivant montre comment créer un cercle SVG et l’ajouter dans l’élément <svg> du fichier SVG existant :

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Dom;
using Aspose.Svg.Paths;
...

    // Set SVG Namespace Url
    string SvgNamespace = "https://www.w3.org/2000/svg";

    string documentPath = Path.Combine(DataDir, "basic-shapes.svg");

    using (var document = new SVGDocument(documentPath))
    {
        // Get root <svg> element of the document
        var svgElement = document.RootElement;

        // Create a <circle> element and set attributes values
        var circleElement = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle");
        circleElement.Cx.BaseVal.Value = 100F;
        circleElement.Cy.BaseVal.Value = 100F;
        circleElement.R.BaseVal.Value = 50F;
        circleElement.SetAttribute("fill", "Salmon");
    
        // Add the <circle> element as the first child to <svg> element
        svgElement.InsertBefore(circleElement, svgElement.FirstChild);

    	// Work with the document here...
    	// Add a polyline and change stroke attributes for all circle and ellipse elements (see later)
    }
    // Save the document
    document.Save(Path.Combine(OutputDir, "basic-shapes_out.svg"));

L’ellipse (Cx, Cy, Rx, Ry), le rectangle (X, Y, Width, Height, Rx, Ry) et la ligne (X1, Y1, X2, Y2) ont leurs propres attributs qui peut être réglé de la même manière.

Polyligne SVG

Les SVGPolygonElement et SVGPolylineElement ont la propriété Points du type SVGPointList, qui donne accès au contenu de base de l’attribut points, qui correspond de manière unique à la syntaxe SVG.

Un exemple simple de création de polyligne SVG est illustré dans l’extrait de code suivant :

    // Set SVG Namespace Url
    string SvgNamespace = "https://www.w3.org/2000/svg";

    // Create a <polyline> element and set attributes values:
	var polylineElement = (SVGPolylineElement)document.CreateElementNS(SvgNamespace, "polyline");
    SVGPoint point1 = svgElement.CreateSVGPoint();
    point1.X = 270;
    point1.Y = 240;
    SVGPoint point2 = svgElement.CreateSVGPoint();
    point2.X = 290;
    point2.Y = 220;
    SVGPoint point3 = svgElement.CreateSVGPoint();
    point3.X = 310;
    point3.Y = 240;
    polylineElement.Points.AppendItem(point1);
    polylineElement.Points.AppendItem(point2);
    polylineElement.Points.AppendItem(point3);
    polylineElement.SetAttribute("stroke", "grey");
    polylineElement.SetAttribute("stroke-width", "5");
    polylineElement.SetAttribute("fill", "none");

	// Add the SVG polyline to children of the <svg> element
	svgElement.AppendChild(polylineElement);

La méthode CreateSVGPoint() produit une instance de la classe SVGPoint, dans laquelle vous pouvez définir les valeurs X et Y via les mêmes propriétés de nom. L’objet par défaut est initialisé au point (0,0) dans le système de coordonnées personnalisé.

La méthode AppendItem(T newItem)insère un nouveau point à la fin de la liste. Des lignes droites relient ces points dans la liste et forment une polyligne ou un polygone – une forme géométrique plane formée par une polyligne fermée.

La méthode AppendChild(node) ajoute le nouvel enfant à la fin de la liste des enfants de ce nœud. L’extrait de code montre que les attributs stroke, stroke-width et fill sont spécifiés et que polylineElement est inséré dans l’élément <svg> en tant que dernier enfant.

Prenons un exemple de modification d’un fichier SVG existant basic-shapes.svg : nous ajouterons le cercle et la polyligne décrits ci-dessus et modifierons les propriétés de trait pour tous les cercles et ellipses. L’extrait de code suivant montre comment rechercher tous les cercles et ellipses dans un élément <svg> et remplacer leurs propriétés de trait :

    // Set stroke attributes for all <circle> and <ellipse> elements
    foreach (Element element in svgElement.Children)
    {
        if (element is SVGCircleElement || element is SVGEllipseElement)
        {
            element.SetAttribute("stroke-width", "6");
            element.SetAttribute("stroke", "#C8102E");
        }
    }

La figure montre la visualisation du fichier SVG original basic-shapes.svg et du fichier qui a été édité (modifié).

Modifier le chemin SVG

Pour créer un chemin SVG à l’aide de l’API Aspose.SVG, vous devez créer une instance de la classe SVGPathElement à l’aide de la méthode CreateElementNS(namespaceURI,qualifiedName).

Les méthodes CreateSVGPathSegMovetoAbs(x, y), CreateSVGPathSegCurvetoQuadraticAbs(x, y, x1, y1) et CreateSVGPathSegCurvetoQuadraticSmoothAbs(x, y) prennent des paramètres de les commandes de données de chemin M, C et T comme leurs propres paramètres. La propriété PathSegList de type SVGPathSegList permet d’accéder au contenu de l’attribut d, sous forme de liste de segments de chemin, qui correspond à la syntaxe SVG (les détails sont dans l’article SVG Path Data).

L’extrait de code suivant montre comment créer le chemin SVG et l’ajouter à l’élément <svg> :

    // Create a <path> element
    var pathElement = (SVGPathElement)document.CreateElementNS(SvgNamespace, "path");

	// Set d attribute parameters – SVG path data
	SVGPathSeg pathSeg1 = pathElement.CreateSVGPathSegMovetoAbs(10, 200);
	SVGPathSeg pathSeg2 = pathElement.CreateSVGPathSegCurvetoQuadraticAbs(180, 200, 25, 210);
	SVGPathSeg pathSeg3 = pathElement.CreateSVGPathSegCurvetoQuadraticSmoothAbs(300, 250);
	SVGPathSeg pathSeg4 = pathElement.CreateSVGPathSegCurvetoQuadraticSmoothAbs(420, 250);
	SVGPathSeg pathSeg5 = pathElement.CreateSVGPathSegCurvetoQuadraticSmoothAbs(490, 150);
	pathElement.PathSegList.AppendItem(pathSeg1);
	pathElement.PathSegList.AppendItem(pathSeg2);
	pathElement.PathSegList.AppendItem(pathSeg3);
	pathElement.PathSegList.AppendItem(pathSeg4);
	pathElement.PathSegList.AppendItem(pathSeg5);

	// Set fill and stroke attributes
	pathElement.SetAttribute("stroke", "magenta");
	pathElement.SetAttribute("fill", "none");
	pathElement.SetAttribute("stroke-width", "4");

	// Add the path as the first child in the <svg> element
	svgElement.InsertBefore(pathElement, svgElement.FirstChild);

Vous pouvez utiliser un code aussi détaillé et complet en termes de DOM, de programmation, d’utilisation du document et de navigation dans le fichier. En utilisant la méthode SetAttribute(), vous pouvez écrire le code sur une seule ligne pour le paramètre d des données de chemin SVG.

Dans l’exemple suivant, nous utilisons le code sur une ligne pour créer le même chemin (chemin SVG d’origine). De plus, nous modifierons les paramètres des commandes moveto(x,y) M et T(x,y) dans le chemin d’origine pour en recevoir une nouvelle.

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

    // Set SVG Namespace Url
    string SvgNamespace = "https://www.w3.org/2000/svg";

    using (var document = new SVGDocument())
    {
        var svgElement = document.RootElement;

        // Create a <path> element and set SVG path data 
        var pathElement = (SVGPathElement)document.CreateElementNS(SvgNamespace, "path");
        pathElement.SetAttribute("d", "M 10 200 Q 25 110 180 200 T 300 250 T 420 250 T 490 150");
        
        // Edit SVG path
        foreach (SVGPathSeg pathSeg in pathElement.PathSegList)
        {
            // Editing T commands parameters
            if (pathSeg is SVGPathSegCurvetoQuadraticSmoothAbs)
            {
                SVGPathSegCurvetoQuadraticSmoothAbs pathSegCurvetoQuadraticSmoothAbs = pathSeg as SVGPathSegCurvetoQuadraticSmoothAbs;
                pathSegCurvetoQuadraticSmoothAbs.X -= 60;
                pathSegCurvetoQuadraticSmoothAbs.Y -= 65;
            }
            //  Editing M command parameters
            if (pathSeg is SVGPathSegMovetoAbs)
            {
                SVGPathSegMovetoAbs pathSegMovetoAbs = pathSeg as SVGPathSegMovetoAbs;
                pathSegMovetoAbs.X = 200;
                pathSegMovetoAbs.Y = 100;
            }
        }
        // Set fill and stroke attributes
        pathElement.SetAttribute("stroke", "red");
        pathElement.SetAttribute("fill", "none");
        pathElement.SetAttribute("stroke-width", "4");

        // Add the <path> element as the first child to the <svg> element
    	svgElement.InsertBefore(pathElement, svgElement.FirstChild);

    	// Save the document
        document.Save(Path.Combine(OutputDir, "edit-svg-path-data.svg"));
    }

La figure illustre les chemins originaux (noirs) et modifiés (rouges). Vous pouvez afficher et enregistrer le fichier SVG modifié en suivant le lien – edit-svg-path-data.svg.

Pour éditer un fichier SVG, vous devez d’abord rechercher les éléments à éditer dans le document. Il existe plusieurs façons de procéder, telles que les sélecteurs CSS ou les requêtes XPath. Des informations détaillées sur la façon de modifier le fichier SVG en naviguant dans le document peuvent être trouvées dans l’article Navigation & Inspection SVG.

Si vous souhaitez modifier les couleurs SVG des éléments, veuillez consulter les détails dans l’article Comment changer la couleur SVG. Ici, vous apprenez comment travailler avec la couleur SVG à l’aide de la bibliothèque Aspose.SVG pour .NET et réfléchissez à la façon de changer la couleur SVG des éléments ou de changer la couleur d’arrière-plan dans les fichiers SVG.

Dessin SVG sur un bitmap existant

Le bitmap peut être utilisé comme arrière-plan pour le dessin. Vous pouvez ajouter les formes, les chemins ou le texte SVG. Par exemple, la figure ci-dessous est réalisée en ajoutant un cercle et du texte au bitmap servant d’arrière-plan:

<svg xmlns="http://www.w3.org/2000/svg">
	<image href="http://docs.aspose.com/svg/images/api/seaside.jpg" height="480" width="640" x="20" y="20"/>
	<text style="font-size: 1.4em;" x="420px" fill="gold" y="280px">The beach is beautiful...</text>
	<circle cx="520" cy="120" r="60" stroke="gold" stroke-width="70" fill="none" stroke-dasharray="2,14"/>
</svg>

Le code C# suivant crée le document SVG ci-dessus à partir de zéro. Nous ajoutons au document certains éléments SVG tels qu’une image, un texte et un élément cercle, puis enregistrons le document SVG dans un fichier :

1. Créez un document SVG à l’aide de la classe SVGDocument et accédez à l’élément SVG racine à l’aide de la propriété RootElement.
2. Créez un élément <image>, définissez les attributs requis et ajoutez-le à l’élément <svg>.
   • Utilisez la méthode CreateElementNS(namespaceURI, qualifiedName) de la classe SVGDocument pour créer une instance de la classe SVGImageElement.
   • Utiliser des propriétés de type SVGAnimatedLength, dont les données statiques peuvent être définies ou lues via la construction: element.X.BaseVal.Value : définit les href, height, width, x, et Attributs y.
3. De la même manière, créez un élément <text> à l’aide de la classe SVGTextElement et définissez les attributs requis. Utilisez la propriété Style pour définir la taille de la police et la méthode SetAttribute(name, value) pour spécifier des attributs tels que x, y et fill.
4. Créez un élément <circle> à l’aide de la classe SVGCircleElement. Les attributs cx, cy et r définissent les coordonnées centrales et le rayon du cercle. D’autres attributs tels que stroke, stroke-width, fill et stroke-dasharray sont utilisés pour styliser le cercle.
5. Utilisez la méthode AppendChild() pour ajouter les éléments SVG créés (imageElement, textElement et circleElement) à la fin de la liste des enfants de l’élément racine SVG (svgElement).
6. Appelez la méthode Save() pour enregistrer le document SVG dans un fichier nommé dans le répertoire de sortie spécifié.

using Aspose.Svg;
using System.IO;
...
    // Set SVG Namespace Url
    string SvgNamespace = "http://www.w3.org/2000/svg";

    using (var document = new SVGDocument())
    {
        var svgElement = document.RootElement;

        // Create an <image> element and add it into svgElement
        var imageElement = (SVGImageElement)document.CreateElementNS(SvgNamespace, "image");
        imageElement.Href.BaseVal = "http://docs.aspose.com/svg/images/api/seaside.jpg";
        imageElement.Height.BaseVal.Value = 480;
        imageElement.Width.BaseVal.Value = 640;
        imageElement.X.BaseVal.Value = 20;
        imageElement.Y.BaseVal.Value = 20;
        svgElement.AppendChild(imageElement);

        // Create a <text> element, set its attributes, and it into svgElement
        var textElement = (SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
        textElement.Style.FontSize = "1.4em";
        textElement.SetAttribute("x", "420px");
        textElement.SetAttribute("fill", "gold");
        textElement.SetAttribute("y", "280px");
        textElement.TextContent = "The beach is beautiful...";
        svgElement.AppendChild(textElement);

        // Create a <circle> element, set its attributes, and add it into svgElement
        var circleElement = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle");
        circleElement.Cx.BaseVal.Value = 520;
        circleElement.Cy.BaseVal.Value = 120;
        circleElement.R.BaseVal.Value = 60;
        circleElement.SetAttribute("stroke", "gold");
        circleElement.SetAttribute("stroke-width", "70");
        circleElement.SetAttribute("fill", "none");
        circleElement.SetAttribute("stroke-dasharray", "2,14");
        svgElement.AppendChild(circleElement);

        // Save the document
        document.Save(Path.Combine(OutputDir, "svg-drawing-on-bitmap.svg"));
    }

Nous avons peint le cercle SVG avec une grande valeur de stroke-width. L’application de l’attribut stroke-dasharray convertit le trait du cercle en ligne pointillée. En sélectionnant les valeurs des zones remplies et non remplies, vous pouvez obtenir l’effet visuel souhaité. Pour plus d’informations sur les propriétés des attributs de style, veuillez consulter l’article Remplissages et contours en SVG.

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