Edit SVG in C#

How to Edit SVG in C#

Aspose.SVG for .NET library provides a set of classes and methods for creating, editing, converting, and other manipulations with SVG files. Once the document object is created, it can be filled with SVG elements. You can customize the document by adding more elements like SVG shapes, texts, filters etc. In this article, we’ll explore two C# examples that demonstrate different approaches to building and editing SVGs: one using the Aspose.SVG Builder API , and the other using manual DOM manipulation with direct element and attribute setting.

First, make sure you have Aspose.SVG for .NET API installed in your project. The installation process is quite simple. You can install it via NuGet Package Manager Console using the following command:

Install-Package Aspose.SVG

Add Elements to an SVG File Using Element Builders

Element Builders are specialized classes of the Aspose.SVG Builder API that make it easier to create and modify SVG elements in code. They often use patterns such as the Fluent Builder Pattern to provide a clean, readable syntax for setting attributes and structuring SVG content programmatically. The following code demonstrates a concise and elegant approach to crafting SVGs from scratch using C#. The example utilizes a Fluent Builder Pattern within SVGSVGElementBuilder to construct and add new elements to the SVG: a decorated circle and text.

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

Add Elements to an SVG File

The Document Object Model (DOM) API provides full control over SVG nodes and their attributes and is fully compliant with the official SVG specifications. You can modify the document by adding new nodes, removing existing ones, or editing their content. For example, here’s how to add a decorated circle and text to an 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"));
    }

Let’s look at the simple steps to edit an SVG document that illustrate the С# code above. An SVG <circle> and <text> elements are added to the created SVG document:

1. To create an SVG document programmatically from scratch, use the SVGDocument() constructor with no parameters.

2. The RootElement property of the SVGDocument class points to the document’s root <svg> element.

3. Create a <text> and <circle> elements with attributes and add them to the <svg> element:

   • You can use the CreateElementNS() method to create an instances of the SVGTextElement and SVGCircleElement classes.
   • Call the SetAttribute() method to set attributes specifying position, size, fill, etc.
   • Use AppendChild() method to add the elements into <svg>.

4. Save the edited SVG file using Save() method.

The resulting file that we created above is the same for both code examples (svg-from-scratch.svg), and looks like this:

Useful Resources

• The Edit SVG File – C# Examples documentation article gives you basic information on how to read or edit the Document Object Model using Aspose.SVG for .NET API. You will explore how to create SVG elements and how to work with them – modify the document by inserting new nodes, removing, or editing the content of existing nodes.
• 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.
• The Element Builders article delves into the Element Builders used in Aspose.SVG Builder API. You will learn about the SVGElementBuilder class, its specialized builders, and how they simplify SVG programming.

Other Supported Features

Use the Aspose.SVG C# library to convert, merge, edit SVG documents, convert color codes, vectorize images and more!