Create SVG in C#

How to Create SVG in C#

Scalable Vector Graphics (SVG) is an XML language for creating two-dimensional vector graphics, and an SVG document is a text file that describes images as geometric primitives: lines, curves, shapes, text, etc. If you develop websites, create data visualizations, or work on print materials, SVG provides a versatile and efficient solution for graphics creation. Aspose.SVG for .NET library provides a set of classes and methods for creating, editing, converting, and other manipulations with SVG files. So, let’s create a new SVG document!

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

Create an Empty SVG Document

Aspose.SVG for .NET API provides the SVGDocument class that can be used to create an SVG document. An SVGDocument is the root of the SVG hierarchy and holds the entire content. The following C# code snippet shows the usage of the default SVGDocument() constructor to create an empty document:

1. Create an SVG document from scratch using the SVGDocument() constructor.
2. Save the SVG file using one of the Save() methods.

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

    // Initialize an empty SVG document
    using (var document = new SVGDocument())
    {
        // Work with the SVG document here...

        // Save the document to a file
        document.Save(Path.Combine(OutputDir, "empty.svg"));
    }

Create SVG from a Memory String

Generating an SVG from a memory string can be useful if you want to generate SVGs on the fly. Creating SVG from a string allows you to update and represent changing datasets in your visualizations easily. You can create SVG from a string content using SVGDocument(string, string) constructor:

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

    var documentContent = "<svg xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"70\" cy=\"70\" r=\"60\" fill=\"#ff0000\" /> <polygon points=\"160,10 350,140 210,350 50,199\" style=\"fill: orange\" /></svg>";

    using (var document = new SVGDocument(documentContent, "."))
    {
        // Work with the document here...

        // Save the document to a file
        document.Save(Path.Combine(OutputDir, "from-string.svg"));
    }

How to Add Elements to an SVG File

Aspose.SVG for .NET lets you edit SVG files and change their content. The API’s Document Object Model (DOM) provides complete control over SVG nodes and their attributes and is fully compliant with the official SVG specifications.

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., using the appropriate classes provided by the Aspose.Svg namespace. For example, here’s how to add a decorated circle and text:

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 (svg-from-scratch.svg), looks like this:

Useful Resources

• To learn more about Aspose.SVG for .NET API, please visit our documentation .
• From the Create SVG, Load and Read SVG in C# article, you find out how to create SVG from a file, stream, or memory string; how to load SVG from the Web, and read SVG with Resources Async.
• 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 article detailed examples of adding and editing new elements in SVG and applying SVG filters to bitmaps are considered.
• We recommend you visit our guide SVG Drawing – Basics Tutorial if you want to learn more about SVG rules and syntax. Here, we explain the general rules and standard steps for creating SVG from scratch with simple examples.

Other Supported Aspose.SVG for .NET API Features

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