Modifier des fichiers SVG en C#

Aspose.SVG for .NET modifie le SVG comme un document vectoriel structuré. Chargez un fichier SVG dans un SVGDocument, recherchez ou créez des éléments SVG au moyen des API DOM, modifiez leur géométrie, leurs attributs, leur texte, leurs styles ou leurs données de chemin, puis enregistrez le fichier modifié sans le pixelliser.

Un flux de modification SVG type se déroule ainsi :

1. Chargez un fichier SVG existant ou créez un nouveau SVGDocument.
2. Recherchez un élément avec un sélecteur CSS ou créez-en un avec CreateElementNS().
3. Modifiez les propriétés ou attributs et insérez le nouveau contenu dans l’arborescence SVG.
4. Enregistrez le document SVG modifié avec Save().

Démarrage rapide : ajouter une forme à un fichier SVG

L’exemple suivant charge un fichier SVG, ajoute un cercle bleu à son élément racine <svg> et enregistre le document modifié :

using System.IO;
using Aspose.Svg;

string inputPath = Path.Combine(DataDir, "shapes.svg");
string outputPath = Path.Combine(OutputDir, "shapes-with-circle.svg");
const string SvgNamespace = "http://www.w3.org/2000/svg";

using (SVGDocument document = new SVGDocument(inputPath))
{
    // Access the root <svg> element, which is present in an SVG document.
    SVGSVGElement svgElement = document.RootElement;

    // Create a circle and define its geometry and appearance.
    SVGCircleElement circle = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle");
    circle.Cx.BaseVal.Value = 50;
    circle.Cy.BaseVal.Value = 50;
    circle.R.BaseVal.Value = 40;
    circle.SetAttribute("fill", "#3A86FF");

    // Add the circle to the document tree and save the edited SVG file.
    svgElement.AppendChild(circle);
    document.Save(outputPath);
}

Si l’emplacement de l’élément à modifier n’est pas encore connu, consultez Inspecter et naviguer dans SVG pour des exemples avec des sélecteurs CSS et XPath. Pour les méthodes de chargement, consultez Créer et charger des documents SVG.

Ajouter des éléments et définir des attributs

La propriété RootElement renvoie l’élément racine <svg>. Les nouveaux éléments SVG doivent être créés dans l’espace de noms SVG ; vous pouvez ensuite les ajouter à un conteneur ou les insérer à un emplacement choisi dans l’arborescence du document.

Ce fragment crée un élément <g> et l’insère comme premier enfant de l’élément racine :

const string SvgNamespace = "http://www.w3.org/2000/svg";

SVGSVGElement svgElement = document.RootElement;
SVGGElement groupElement = (SVGGElement)document.CreateElementNS(SvgNamespace, "g");

// Apply common styles to every graphic element later added to the group.
groupElement.SetAttribute("fill", "#8A8D8F");
groupElement.SetAttribute("stroke", "magenta");
groupElement.SetAttribute("stroke-width", "4");

svgElement.InsertBefore(groupElement, svgElement.FirstChild);

Utilisez SetAttribute() pour définir ou mettre à jour des attributs SVG comme fill, stroke, transform, class ou d sur des éléments créés ou existants.

Vous pouvez gérer les valeurs d’attributs avec les méthodes SetAttribute(name, value), GetAttribute(name), HasAttribute(name) et RemoveAttribute(name) de la classe Element.

Ajouter et modifier des formes SVG

Aspose.SVG for .NET fournit des classes DOM typées pour les formes SVG standard, notamment SVGCircleElement, SVGEllipseElement, SVGRectElement, SVGLineElement, SVGPolylineElement, SVGPolygonElement et SVGPathElement. Leurs propriétés typées permettent de modifier directement la géométrie : par exemple, Cx.BaseVal.Value, Cy.BaseVal.Value et R.BaseVal.Value définissent un cercle, tandis que le contenu reste vectoriel et modifiable.

Ajouter un cercle

Un cercle est contrôlé par les propriétés typées Cx, Cy et R. L’exemple complet suivant ajoute un cercle à un document SVG existant :

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

// Add a circle element to an existing SVG document in C#

// Set the SVG namespace URI
string SvgNamespace = "http://www.w3.org/2000/svg";

// Load an SVG document from a file
using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "basic-shapes.svg")))
{
    // Get the root <svg> element of the document
    SVGSVGElement svgElement = document.RootElement;

    // Create a <circle> element
    SVGCircleElement 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_add-circle.svg"));
}

L’ellipse (Cx, Cy, Rx, Ry), le rectangle (X, Y, Width, Height, Rx, Ry) et la ligne (X1, Y1, X2, Y2) possèdent leurs propres attributs, qui se définissent de manière similaire.

Ajouter une polyligne et mettre à jour des formes existantes

L’élément SVG <polyline> stocke les coordonnées de ses sommets dans l’attribut points. Dans Aspose.SVG, la liste SVGPolylineElement.Points offre un accès typé à ces coordonnées. Avec CreateSVGPoint(), vous pouvez ajouter des points sans construire manuellement la chaîne d’attribut :

const string SvgNamespace = "http://www.w3.org/2000/svg";

SVGSVGElement svgElement = document.RootElement;
SVGPolylineElement 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 new polyline to the SVG root element
svgElement.AppendChild(polylineElement);

// Update strokes of circle and ellipse elements already in the SVG document
foreach (Element element in svgElement.Children)
{
    if (element is SVGCircleElement || element is SVGEllipseElement)
    {
        element.SetAttribute("stroke-width", "6");
        element.SetAttribute("stroke", "#C8102E");
    }
}

L’image ci-dessous montre le fichier d’origine basic-shapes.svg et le résultat obtenu après l’ajout de formes et la modification des attributs de contour.

Modifier les données d’un chemin SVG

La géométrie d’un élément <path> est stockée dans son attribut d. Créez un SVGPathElement typé, mettez à jour ses données de chemin et ajoutez-le au document SVG comme tout autre élément :

const string SvgNamespace = "http://www.w3.org/2000/svg";

SVGPathElement pathElement =
    (SVGPathElement)document.CreateElementNS(SvgNamespace, "path");

// Set the path geometry and its visible style.
pathElement.SetAttribute("d", "M 10 200 Q 25 210 180 200 T 300 250 T 420 250 T 490 150");
pathElement.SetAttribute("stroke", "magenta");
pathElement.SetAttribute("fill", "none");
pathElement.SetAttribute("stroke-width", "4");

document.RootElement.InsertBefore(pathElement, document.RootElement.FirstChild);

Si votre code construit ou ajuste les commandes de chemin segment par segment, SVGPathElement expose également des opérations sur les segments. L’exemple suivant crée un chemin et modifie les coordonnées de certaines commandes dans un fichier SVG existant :

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

// Edit SVG path data programmatically in C#

// Set the SVG namespace URI
string SvgNamespace = "http://www.w3.org/2000/svg";

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

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

    // Set d attribute parameters – SVG path data
    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 compare le chemin noir d’origine et le chemin rouge modifié. Vous pouvez également ouvrir le fichier d’exemple modifié : edit-svg-path-data.svg.

Pour la syntaxe des commandes de chemin et le comportement de dessin, consultez Données de chemin SVG.

Ajouter du contenu SVG sur une image bitmap

Un document SVG peut référencer une image raster avec un élément <image> et placer au-dessus du texte ou des formes vectorielles modifiables. Les pixels du bitmap ne sont pas modifiés : l’image d’arrière-plan et la superposition SVG restent des parties distinctes du document vectoriel.

Cette technique est utile lorsqu’une photo, un scan ou une autre ressource raster doit recevoir des libellés, marqueurs, badges ou éléments décoratifs qui restent modifiables en SVG. Dans SVG, l’ordre de dessin suit l’ordre des éléments : lorsque <image> est ajouté en premier, puis le texte ou les formes, les éléments vectoriels apparaissent par-dessus l’arrière-plan bitmap.

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

Pour créer cette composition avec Aspose.SVG for .NET :

1. Créez un SVGDocument et accédez à son élément racine <svg> via RootElement.
2. Créez un SVGImageElement avec CreateElementNS(), définissez la référence de l’image, sa position et sa taille, puis ajoutez-le à la racine en tant qu’arrière-plan.
3. Créez un SVGTextElement, définissez le texte affiché, la position, le style de police et la couleur de remplissage, puis ajoutez-le après l’image.
4. Créez un SVGCircleElement, définissez sa position, son rayon et ses attributs de contour, puis ajoutez-le après l’image d’arrière-plan. Dans cet exemple, un contour épais en tirets produit un effet décoratif rappelant le soleil.
5. Appelez Save() pour écrire le document SVG. Le fichier enregistré conserve le bitmap référencé, le texte et le cercle sous forme d’éléments SVG modifiables.

L’exemple suivant effectue ces étapes et enregistre la sortie SVG :

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

// Draw SVG shapes and text on an existing bitmap in C#

// Set the SVG namespace URI
string SvgNamespace = "http://www.w3.org/2000/svg";

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

    // Create an <image> element and add it into svgElement
    SVGImageElement imageElement = (SVGImageElement)document.CreateElementNS(SvgNamespace, "image");
    imageElement.Href.BaseVal = "http://docs.aspose.com/svg/images/api/seaside.jpg";
    imageElement.Height.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    imageElement.Width.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    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 add it to the <svg> element
    SVGTextElement 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 to the <svg> element
    SVGCircleElement 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"));
}

Pour en savoir plus sur la largeur du contour, les motifs de tirets et les autres attributs d’apparence SVG, consultez Remplissages et contours en SVG.

FAQ

1. La modification d’un fichier SVG avec Aspose.SVG le convertit-elle en bitmap ?

Non. La modification via SVGDocument change les éléments, attributs et données de chemin SVG, tandis que le document demeure vectoriel. Une sortie raster n’est produite que lorsque vous convertissez ou restituez explicitement le SVG vers un format d’image tel que PNG, JPEG ou WebP.

2. Comment modifier un élément SVG existant au lieu d’en ajouter un nouveau ?

Localisez l’élément voulu avec un sélecteur CSS ou une requête XPath, puis modifiez ses attributs ou ses propriétés SVG typées. Par exemple, après avoir sélectionné un <circle>, le code peut changer son rayon, sa position, son remplissage ou son contour. Consultez Inspecter et naviguer dans SVG et Modifier la couleur SVG.

3. Puis-je modifier un document SVG et convertir le résultat modifié dans le même flux ?

Oui. Chargez la source dans SVGDocument, effectuez les modifications, créez les options d’enregistrement du format cible et appelez Converter.ConvertSVG(document, options, outputPath). Utilisez par exemple PdfSaveOptions pour le PDF ou ImageSaveOptions pour PNG, JPEG, TIFF, GIF, BMP ou WebP. Consultez Convertir des fichiers SVG en C# pour des exemples complets.

4. Puis-je remplacer une forme SVG existante par un élément différent ?

Oui. Recherchez l’élément existant avec un sélecteur ou une requête XPath, créez l’élément de remplacement avec CreateElementNS(), insérez-le dans le même parent, puis supprimez l’ancien nœud. Le code peut par exemple remplacer des repères circulaires par des rectangles sans modifier le reste du document SVG. Consultez Inspecter et naviguer dans SVG pour un exemple.

Étapes suivantes

• Créer et charger des documents SVG – créer un document source ou charger un SVG depuis des fichiers, flux, chaînes ou URL.
• Inspecter et naviguer dans SVG – trouver les éléments à modifier.
• Enregistrer des documents SVG – enregistrer le contenu SVG modifié dans des fichiers ou des flux.
• SVG Builder – Création et modification SVG avancées – créer et modifier du SVG avec l’API Builder.
• Exécuter les exemples – télécharger et exécuter les exemples complets depuis GitHub.