How to Create SVG Files Programmatically in C# .NET

Modern applications must support a wide range of devices and screen sizes, which makes working with graphics more challenging than ever. Many applications still rely on resizing raster images such as JPEG or PNG files to fit different layouts, but this approach often leads to inconsistent results and additional maintenance work.

Scalable Vector Graphics (SVG) provide a better alternative. SVG images scale cleanly to any resolution without losing quality, making them ideal for responsive applications. Because SVG files are XML-based, they can also be generated and modified programmatically.

Using Document Solutions for Imaging (DsImaging), developers can create and manipulate SVG images entirely in code. This approach allows applications to generate graphics dynamically without requiring external tools or manual editing.

This tutorial demonstrates how to generate SVG graphics using C# and .NET by creating two example images:

• A geometric GrapeCity-style logo
• The MESCIUS logo

Download a free trial of Document Solutions for Imaging and start automating your image generation workflows today.

.NET Developer Guide to Programmatically Generating SVG Images using C#

• Why Generate SVG Files Programmatically in .NET
• What You Will Need
• SVG Drawing Basics
• Create the C# Console Application
• Example 1: Generating the GrapeCity Logo with Shapes
  1. Create the SVG Document with Code
  2. Draw the Logo Shapes
  3. Add Elements to the Document
  4. Configure Scaling
  5. Save the SVG
• Example 2: Generating the MESCIUS Logo with Pixel-Point Logic
  1. Create the SVG Document and Configure the SVG Canvas
  2. Define the Bottom Half Logo Geometry
  3. Mirror the Top Half
  4. Build the SVG Path
  5. Add Styling and Insert into the Document
  6. Configure the ViewBox
  7. Save the SVG File
• Summary

Why Generate SVG Files Programmatically?

Although many design tools can produce SVG files, generating SVG content programmatically offers several advantages:

• No dependency on external design software
• No additional installations on servers
• Easy automation of image workflows
• Dynamic image generation
• Simplified bulk image creation

For example, a web application might need to generate scalable icons or branding assets that automatically adjust to different display sizes. Creating SVG files in code makes these workflows efficient and repeatable.

What You Will Need

Before getting started, make sure you have the following:

• Visual Studio
• .NET 8 SDK or later
• Document Solutions for Imaging (DsImaging)

Install the NuGet package:

Install-Package DS.Documents.Imaging

Or install from NuGet: NuGet Gallery | DS.Documents.Imaging

The SVG APIs are available through the namespace:

DS.Documents.Imaging

SVG Drawing Basics

SVG graphics are defined as drawing instructions composed of geometric shapes and paths positioned on a two-dimensional coordinate system.

The coordinate origin (0,0) is located in the upper-left corner of the drawing area. The x-axis extends to the right and the y-axis extends downward.

Although the coordinate space itself is unlimited, the visible area must be defined. This visible region is called the viewport.

A viewBox defines which portion of the coordinate system is displayed and how it scales to fit the viewport.

SVG images are constructed by defining shapes and paths using coordinates. Each element is explicitly positioned within the coordinate system, similar to plotting points on a graph.

Create the C# Console Application

Start by creating a .NET console application and importing the required namespaces:

using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using GrapeCity.Documents.Svg;

Next, define the program’s Main method and entry point:

class Program
{
    static void Main(string[] args)
    {
        CreateGrapeCityLogoSvg();
        CreateMesciusLogoSvg();

        System.Console.WriteLine("SVG logos created.");
    }

Example 1: Generating the GrapeCity Logo with Shapes

This example demonstrates how to construct an SVG image from multiple basic geometric shapes such as ellipses, circles, and paths to create the original GrapeCity logo.

The logo is composed of:

• An outer ellipse
• An inner circle
• A path element forming the side shapes

Create the SVG Document

First, define the SVG canvas using the GcSvgDocument class:

public static void CreateGrapeCityLogoSvg()
{
    var svgDoc = new GcSvgDocument();
    svgDoc.RootSvg.Width = new SvgLength(250, SvgLengthUnits.Pixels);
    svgDoc.RootSvg.Height = new SvgLength(150, SvgLengthUnits.Pixels);

Draw the Logo Shapes

SVG images are composed of individual elements rather than pixels. The image in this example includes circular shapes and side elements. Next, let’s add those shapes and side elements that we will use. For reference, the Svg<shape>Element class is inherited from the SvgGeometryElement class, with an example being the SvgEllipseElement class.

// Outer ellipse
var outerCircle = new SvgEllipseElement()
{
    CenterX = new SvgLength(160, SvgLengthUnits.Pixels),
    CenterY = new SvgLength(92, SvgLengthUnits.Pixels),
    RadiusX = new SvgLength(90, SvgLengthUnits.Pixels),
    RadiusY = new SvgLength(80, SvgLengthUnits.Pixels),
    Fill = new SvgPaint(Color.FromArgb(81, 59, 116)),
    Stroke = new SvgPaint(Color.FromArgb(81, 59, 116))
};
// Inner circle
var innerCircle = new SvgCircleElement()
{
    CenterX = new SvgLength(160, SvgLengthUnits.Pixels),
    CenterY = new SvgLength(92, SvgLengthUnits.Pixels),
    Radius = new SvgLength(45, SvgLengthUnits.Pixels),
    Fill = new SvgPaint(Color.White),
    Stroke = new SvgPaint(Color.FromArgb(81, 59, 116))
};
// Path for handles
var pb = new SvgPathBuilder();
pb.AddMoveTo(false, 8, 121);
pb.AddLineTo(false, 297, 25);
pb.AddLineTo(false, 314, 68);
pb.AddLineTo(false, 23, 164);
pb.AddLineTo(false, 8, 121);
pb.AddClosePath();
var handles = new SvgPathElement()
{
    PathData = pb.ToPathData(),
    Fill = new SvgPaint(Color.FromArgb(81, 59, 116)),
};

Add Elements to the Document

Now add the elements to the SVG document:

svgDoc.RootSvg.Children.Insert(0, handles);
svgDoc.RootSvg.Children.Insert(1, outerCircle);
svgDoc.RootSvg.Children.Insert(2, innerCircle);

Configure Scaling

Next, configure the viewBox with the SvgViewBox structure so the image scales properly:

svgDoc.RootSvg.ViewBox = new SvgViewBox
{
    MinX = 0,
    MinY = 0,
    Width = 320,
    Height = 175
};

Save the SVG

Finally, save the SVG file:

svgDoc.Save("GrapeCity-Logo.svg");
}

The generated SVG image appears like below:

Example 2: Generating the MESCIUS Logo with Pixel-Point Logic

This example demonstrates how to construct a more complex SVG graphic using coordinate-based vector geometry.

Unlike the previous example, the MESCIUS logo is built as a single vector path.

To simplify the geometry, only the bottom half of the logo is defined directly. The top half is generated automatically by mirroring the bottom half across a horizontal axis.

Create the SVG Document and Configure the SVG Canvas

Just like in the first example, the SVG document is created using the GcSvgDocument class. The viewport dimensions define the display size of the generated image.

public static void CreateMesciusLogoSvg()
{
    var svgDoc = new GcSvgDocument();
    svgDoc.RootSvg.Width = new SvgLength(250, SvgLengthUnits.Pixels);
    svgDoc.RootSvg.Height = new SvgLength(250, SvgLengthUnits.Pixels);

The viewport controls the visible size of the SVG image.

Define the Bottom Half Logo Geometry

The MESCIUS logo is defined as a vector outline using coordinate points. Only the bottom half of the outline is explicitly defined. The top half is generated automatically by mirroring the bottom half across a horizontal axis.

// Horizontal symmetry axis
const float yMid = 449.0f;
var bottom = new List<(float x, float y)>
{
    (161.5f, 456.0f),
    (207.5f, 705.0f),
    (224.0f, 712.5f),
    (241.0f, 711.5f),
    (250.5f, 704.0f),
    (286.5f, 514.0f),
    (295.5f, 487.0f),
    (312.0f, 475.5f),
    (335.0f, 474.5f),
    (361.5f, 488.0f),
    (373.5f, 518.0f),
    (424.5f, 836.0f),
    (436.0f, 843.5f),
    (466.0f, 846.5f),
    (472.0f, 843.5f),
    (483.5f, 836.0f),
    (534.5f, 518.0f),
    (546.5f, 488.0f),
    (573.0f, 474.5f),
    (596.0f, 475.5f),
    (612.5f, 487.0f),
    (621.5f, 514.0f),
    (657.5f, 704.0f),
    (667.0f, 711.5f),
    (684.0f, 712.5f),
    (700.5f, 705.0f),
    (746.5f, 456.0f),
};

Mirror the Top Half

The top half of the logo is created by mirroring the bottom points across the horizontal centerline.

var top = bottom
    .AsEnumerable()
    .Reverse()
    .Select(p => (p.x, y: (2 * yMid) - p.y))
    .ToList();

This approach guarantees perfect symmetry and reduces the amount of geometry that must be manually defined.

Build the SVG Path

Next, combine the bottom and mirrored points into a single outline and convert them into an SVG path. Here we utilize SvgPathBuilder.

var outline = new List<(float x, float y)>(bottom.Count + top.Count);
outline.AddRange(bottom);
outline.AddRange(top);

var pb = new SvgPathBuilder();
pb.AddMoveTo(false, outline[0].x, outline[0].y);
for (int i = 1; i < outline.Count; i++)
    pb.AddLineTo(false, outline[i].x, outline[i].y);
pb.AddClosePath();

Add Styling and Insert into the Document

The generated path is added to the SVG document and styled using a fill color, with the help of SvgPathElement.

var logoPath = new SvgPathElement
{
    PathData = pb.ToPathData(),
    Fill = new SvgPaint(Color.FromArgb(117, 127, 139)),
    Stroke = SvgPaint.None
};

svgDoc.RootSvg.Children.Add(logoPath);

Configure the ViewBox

The viewBox from the SvgViewBox structure ensures the logo scales properly within the viewport.

svgDoc.RootSvg.ViewBox = new SvgViewBox
{
    MinX = 156,
    MinY = 46,
    Width = 612,
    Height = 810
};

Save the SVG File

Finally, save the SVG file to disk:

svgDoc.Save("MESCIUS-Logo.svg");

Running the console application generates a vector version of the MESCIUS logo as an SVG file, shown below:

Summary

In this tutorial, you learned how to generate SVG graphics programmatically using Document Solutions for Imaging and C# with .NET 8.

You saw two different approaches:

GrapeCity Logo

• Built from geometric shapes
• Multiple SVG elements
• Simple structure

MESCIUS Logo

• Built from coordinate geometry
• Single SVG path
• Symmetry via mirroring

Together, these examples demonstrate how SVG graphics can be created programmatically using the GcSvgDocument API.

Programmatic SVG generation allows developers to automate graphics workflows and produce scalable images that work across all devices.

To see more examples and advanced scenarios, be sure to check out the Document Solutions for Imaging documentation and online demos.