Edit SVG File – C# Examples

Aspose.SVG for .NET lets you edit SVG files and make changes to their content. The API’s Document Object Model (DOM) is fully compatible with the official SVG specifications and means full control over SVG nodes and their fields for editing. You can modify the document by appending new nodes, removing, or editing the content of existing nodes.

In this article, we show how to edit SVG using Aspose.SVG for .NET library and consider detailed C# examples of how to add elements to an SVG document and edit them.

Add Elements to an SVG Document

Aspose.SVG for .NET API allows you to add various elements to a document. First, you would create a new element or node; then, you can add the element to the document.

1. You can use the CreateElementNS(namespaceURI, qualifiedName) method of the SVGDocument class to create an instance of the Element class – the required element of the given qualified name and namespace URI. The namespaceURI sets the reference to W3C SVG specification. The qualifiedName must contain the string tag name of the element. Remember, you must use casting the type (explicit conversion) to get the corresponding element.

2. To add an element to the SVG document, API provides the InsertBefore(node, child) method of the Node class, which inserts the node before the existing child node or at the end of the list of children if the child is null.

The RootElement property of the SVGDocument class points to the root <svg> element of the document. The following code snippet illustrates how to create and add <g> element as the first child in the SVG document.

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

We can specify element attributes and their values using the SetAttribute(name, value), GetAttribute(name), HasAttribute(name), RemoveAttribute(name) methods of the Element class. For example, if you create a group of graphic elements and put them into the <g> element, you can set common parameters:

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

How to add Basic Shapes to an SVG Document

The basic SVG shapes can be created using the CreateElementNS(namespaceURI, qualifiedName) method. The qualifiedName must contain the string tag name of the SVG graphic element.

This way you can create SVG circles (SVGCircleElement class, qualifiedName = “circle”), ellipses (SVGEllipseElement class, qualifiedName = “ellipse”), rectangles (SVGRectElement class, qualifiedName = “rect”), lines (SVGLineElement class, qualifiedName = “line”), polylines (SVGPolylineElement class, qualifiedName = “polyline”), polygons (SVGPolygonElement class, qualifiedName = “polygon”) and Bezier curves (SVGPathElement class, qualifiedName = “path”).

SVG Circle

Each graphic element has its own specific attributes (properties), through which you can control its parameters and characteristics. Cx, Cy, R are circle properties of the SVGAnimatedLength type, the static data for which can be set or read through the construction: element.X.BaseVal.Value.

The following code snippet shows how to create an SVG circle and add it into the <svg> element of the existing SVG file:

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

    // Set SVG Namespace Url
    string SvgNamespace = "http://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"));

The ellipse (Cx, Cy, Rx, Ry), the rectangle (X, Y, Width, Height, Rx, Ry) and the line (X1, Y1, X2, Y2) have their own attributes that may be set similarly.

SVG Polyline

The SVGPolygonElement and SVGPolylineElement have the Points property of the SVGPointList type, which provides access to the basic content of the points attribute, which uniquely matches the SVG syntax.

A simple example of SVG polyline creating is illustrated in the following code snippet:

    // Set SVG Namespace Url
    string SvgNamespace = "http://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);

The CreateSVGPoint() method produces an instance of the SVGPoint class, in which you can set the X and Y values through the same name properties. The default object is initialized to point (0,0) in the custom coordinate system.

The AppendItem(T newItem)method inserts a new point at the end of the list. Straight lines connect these points in the list and make a polyline or polygon – a plane geometric shape formed by a closed polyline.

The AppendChild(node) method adds the new child to the end of the list of children of this node. The code snippet shows that the stroke, stroke-width, and fill attributes are specified, and the polylineElement is inserted in the <svg> element as the last child.

Consider an example of editing an existing SVG file basic-shapes.svg: we will add the circle and polyline described above and change the stroke properties for all circles and ellipses. The following code snippet shows how to find all circles and ellipses in an <svg> element and replace their stroke properties:

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

The figure shows the visualization of the original SVG file basic-shapes.svg and the file that was edited (modified).

Edit SVG Path

To create an SVG path using the Aspose.SVG API, you need to create an instance of the SVGPathElement class using the CreateElementNS(namespaceURI, qualifiedName) method.

The methods CreateSVGPathSegMovetoAbs(x, y), CreateSVGPathSegCurvetoQuadraticAbs(x, y, x1, y1) and CreateSVGPathSegCurvetoQuadraticSmoothAbs(x, y) take parameters of path data commands M, C, and T as their own parameters. The PathSegList property of the SVGPathSegList type provides access to the content of d attribute, in the form of path segments list, that matches the SVG syntax (details are in the article SVG Path Data).

The following code snippet shows how to create the SVG path and add it into <svg> element:

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

You can use such itemised and thorough code in terms of the DOM, programming, working with the document, and navigating the file. Using the SetAttribute() method, you can write the code on a single line for the SVG path data d setting.

In the following example, we use the one-line code to create the same path (original SVG path). Moreover, we will edit the parameters of the moveto(x,y) M and T(x,y) commands in the original path to receiving a new one.

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

    // Set SVG Namespace Url
    string SvgNamespace = "http://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"));
    }

The figure illustrates the original (black) and modified (red) paths. You can view and save the edited SVG file by following the link – edit-svg-path-data.svg.

To edit SVG file, you must first find the elements to edit in the document. There are a number of ways to do this, such as CSS selectors or XPath queries. Detailed information on how to edit SVG file using a navigation through the document can be found in the Navigation & Inspection SVG article.

If you want to change SVG colors for elements, please see the details in the How to Change SVG Color article. Here you learn how to work with SVG color using Aspose.SVG for .NET library and consider how to change SVG color of elements or change background color in SVG files.

SVG Drawing on Existing Bitmap

The bitmap can be used as a background for drawing. You can append the SVG shapes, paths, or text. For example, the figure below is made with the help of adding circle and text to the bitmap acting as the background:

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

The following C# code creates the SVG document above from scratch. We add to the document some SVG elements such as an image, text, and a circle element and then save the SVG document to a file:

1. Create an SVG document using the SVGDocument class and accesses the root SVG element using the RootElement property.
2. Create an <image> element, set the required attributes, and add it to the <svg> element.
   • Use the CreateElementNS(namespaceURI, qualifiedName) method of the SVGDocument class to create an instance of the SVGImageElement class.
   • Use properties of the SVGAnimatedLength type, the static data for which can be set or read through the construction: element.X.BaseVal.Value: set the href, height, width, x, and y attributes.
3. In a similar way, create a <text> element using the SVGTextElement class and set required attributes. Use the Style property to set the font size, and the SetAttribute(name, value) method to specify attributes like x, y, and fill.
4. Create a <circle> element using the SVGCircleElement class. The cx, cy, and r attributes define the center coordinates and radius of the circle. Other attributes like stroke, stroke-width, fill, and stroke-dasharray are used to style the circle.
5. Use the AppendChild() method to add the created SVG elements (imageElement, textElement, and circleElement) to the end of the list of children of the SVG root element (svgElement).
6. Call the Save() method to save the SVG document to a file named in the specified output directory.

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

We painted the SVG circle with a big value of stroke-width. The stroke-dasharray attribute applying converts the circle’s stroke into a dashed line. By selecting values of the filled-unfilled areas, you can achieve the desired visual effect. For more information on style attributes’ properties, please see the article Fills and Strokes in SVG.

In the chapter SVG Builder—Advanced SVG Creation and Modification, you will find a guide to manipulating SVG effectively using the Aspose.SVG Builder API, covering aspects from creating basic elements to advanced techniques such as mixins and syntactic sugar.

You can download the complete examples and data files from GitHub. About downloading from GitHub and running examples, you find out from the How to Run the Examples section.