Edit SVG Files in C#

Aspose.SVG for .NET edits SVG as a structured vector document. Load an SVG file into an SVGDocument, find or create SVG elements through DOM APIs, change their geometry, attributes, text, styles, or path data, and save the edited file without rasterizing it.

A typical SVG editing workflow is:

1. Load an existing SVG file or create a new SVGDocument.
2. Locate an element with a CSS selector or create a new element with CreateElementNS().
3. Modify element properties or attributes and insert new content into the SVG tree.
4. Save the edited SVG document with Save().

Quick Start: Add a Shape to an SVG File

The following example loads an SVG file, adds a blue circle to its root <svg> element, and saves the modified document:

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

If the location of the element to edit is not yet known, see Navigation & Inspection SVG for CSS selector and XPath examples. For document loading options, see Create and Load SVG Documents.

Add Elements and Set Attributes

The RootElement property returns the root <svg> element. New SVG elements must be created in the SVG namespace; you can then append them to a container or insert them at a chosen position in the document tree.

This fragment creates a <g> element and inserts it as the first child of the root element:

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

Use SetAttribute() to set or update SVG attributes such as fill, stroke, transform, class, or d on created or existing elements.

You can specify element attributes and their values using the SetAttribute(name, value), GetAttribute(name), HasAttribute(name), RemoveAttribute(name) methods of the Element class.

Add and Modify SVG Shapes

Aspose.SVG for .NET provides typed DOM classes for standard SVG shapes, including SVGCircleElement, SVGEllipseElement, SVGRectElement, SVGLineElement, SVGPolylineElement, SVGPolygonElement, and SVGPathElement. Their typed properties let code edit geometry directly – for example, Cx.BaseVal.Value, Cy.BaseVal.Value, and R.BaseVal.Value define a circle – while the content remains editable vector graphics.

Add a Circle

A circle is controlled by the Cx, Cy, and R values represented by its typed properties. The following complete example adds a circle to an existing SVG document:

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

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.

Add a Polyline and Update Existing Shapes

The SVG <polyline> element stores its vertex coordinates in the points attribute. In Aspose.SVG, the SVGPolylineElement.Points list provides typed access to these coordinates. With CreateSVGPoint(), you can add points without composing the attribute string manually:

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

The image below shows the original basic-shapes.svg and the result after adding shapes and changing stroke attributes.

Edit SVG Path Data

The geometry of a <path> element is stored in its d attribute. Create a typed SVGPathElement, update its path data, and add it to the SVG document like any other element:

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

If your code builds or adjusts path commands one segment at a time, SVGPathElement also exposes path segment operations. The following example creates a path and changes selected command coordinates in an existing SVG file:

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

The figure compares the original black path and the edited red path. You can also open the edited sample file: edit-svg-path-data.svg.

For path command syntax and drawing behavior, see SVG Path Data.

Add SVG Content over a Bitmap Image

An SVG document can reference a raster image with an <image> element and place editable vector text or shapes above it. This does not alter the bitmap pixels; the background image and SVG overlay remain separate parts of the vector document.

This technique is useful when a photo, scan, or other raster asset needs labels, markers, badges, or decorative graphics that can still be edited as SVG. In SVG, painting order follows element order: when the <image> element is appended first and text or shapes are appended after it, those vector elements appear over the bitmap background.

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

To create this composition with Aspose.SVG for .NET:

1. Create an SVGDocument and access its root <svg> element through RootElement.
2. Create an SVGImageElement with CreateElementNS(), set the image reference and its position and size, and append it to the root element as the background.
3. Create an SVGTextElement, specify the displayed text, position, font style, and fill color, and append it after the image.
4. Create an SVGCircleElement, define its position, radius, and stroke attributes, and append it after the background image. In this example, a thick dashed stroke produces a sun-like decorative effect.
5. Call Save() to write the SVG document. The saved file retains the referenced bitmap and the added text and circle as editable SVG elements.

The following example performs these steps and saves the SVG output:

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

For more on stroke width, dash patterns, and other SVG appearance attributes, see Fills and Strokes in SVG.

FAQ

1. Does editing an SVG file with Aspose.SVG convert it to a bitmap?

No. Editing through SVGDocument changes SVG elements, attributes, and path data while the document remains vector content. Raster output is produced only when you explicitly convert or render SVG to an image format such as PNG, JPEG, or WebP.

2. How do I edit one existing SVG element instead of adding a new one?

Locate the required element with a CSS selector or XPath query, then change its attributes or typed SVG properties. For example, after selecting a <circle>, code can update its radius, position, fill, or stroke. See Navigation & Inspection SVG for element selection techniques and How to Change SVG Color for color editing examples.

3. Can I edit an SVG document and convert the changed result in the same workflow?

Yes. Load the source into SVGDocument, make the required changes, create save options for the target format, and call Converter.ConvertSVG(document, options, outputPath). For example, use PdfSaveOptions for PDF output or ImageSaveOptions for PNG, JPEG, TIFF, GIF, BMP, or WebP output. See Convert SVG Files in C# for complete conversion examples.

4. Can I replace an existing SVG shape with a different element?

Yes. Find the existing element with a selector or XPath query, create the replacement with CreateElementNS(), insert the new element into the same parent, and remove the old node. For example, code can replace circle markers with rectangles while preserving the rest of the SVG document. See Navigation & Inspection SVG for an example that replaces SVG elements selected from an existing document.

Next Steps

• Create and Load SVG Documents – create a source document or load SVG from files, streams, strings, and URLs.
• Navigation & Inspection SVG – find the elements that need editing.
• Save SVG Documents – save modified SVG content to files or streams.
• SVG Builder – Advanced SVG Creation and Modification – build and modify SVG with the builder API.
• How to Run the Examples – download and run the complete examples from GitHub.