Programmatically Create SVG Files
This tutorial shows how to generate Scalable Vector Graphics (SVG) programmatically in C# using Document Solutions for Imaging (DsImaging). SVG files are ideal for responsive web applications because they scale cleanly to any size without losing quality, and because SVG is XML-based, developers can create and modify graphics entirely in code.
In this tutorial, you will create a .NET console application that generates two SVG files:
A geometric GrapeCity-style logo built from basic SVG shapes
A MESCIUS logo built from coordinate-based path geometry
Feel free to follow along with the video tutorial below:
Prerequisites
Before you begin, make sure you have the following installed:
Visual Studio 2022 or later
.NET 8 SDK or later
Document Solutions for Imaging (DsImaging)
You will also need basic familiarity with C# and .NET console applications.
Why Generate SVG Files Programmatically in .NET
Although SVG files can be created using design tools, generating SVG content in code gives developers more flexibility when building automated graphics workflows.
Programmatic SVG generation is useful when you need to:
Generate scalable icons, logos, or diagrams dynamically
Create large numbers of graphics without manual design work
Build server-side graphics workflows without external design software
Modify SVG content based on application data
Produce resolution-independent images for responsive interfaces
Because SVG graphics are vector-based, they remain sharp across screen sizes and device pixel densities.
Create a .NET Console Application
Start by creating a new .NET console application in Visual Studio.
After the project is created, install the Document Solutions for Imaging NuGet package.
You can install it from the NuGet Package Manager, or run the following command in the Package Manager Console:
Install-Package DS.Documents.ImagingNext, add the required namespaces to Program.cs:
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using GrapeCity.Documents.Svg;Then define the application entry point and call the two SVG generation methods that will be created in the following sections:
class Program
{
static void Main(string[] args)
{
CreateGrapeCityLogoSvg();
CreateMesciusLogoSvg();
System.Console.WriteLine("SVG logos created.");
}
}SVG Drawing Basics
SVG graphics are built from drawing instructions such as shapes, paths, coordinates, fills, and strokes.
The SVG coordinate system begins at the upper-left corner of the drawing area. The x-axis extends to the right, and the y-axis extends downward.
The visible region of an SVG is controlled by the viewport and the viewBox:
The viewport defines the rendered size of the SVG image.
The viewBox defines which part of the SVG coordinate system is visible and how it scales to fit the viewport.
In DsImaging, you can create SVG documents using the GcSvgDocument class and add SVG elements such as ellipses, circles, and paths to the document.
Example 1: Generate a GrapeCity-Style Logo with SVG Shapes
This example creates a geometric logo using multiple SVG elements:
An outer ellipse
An inner circle
A path element for the side shape
Create the SVG Document
Create a new method named CreateGrapeCityLogoSvg.
Inside the method, create a GcSvgDocument and set the width and height of the SVG canvas:
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
Next, create the SVG elements that make up the logo.
The outer ellipse and inner circle are created using SvgEllipseElement and SvgCircleElement. The side shape is created using SvgPathBuilder and SvgPathElement.
// 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 the Elements to the SVG Document
Add each SVG element to the document in the order it should be rendered:
svgDoc.RootSvg.Children.Insert(0, handles);
svgDoc.RootSvg.Children.Insert(1, outerCircle);
svgDoc.RootSvg.Children.Insert(2, innerCircle);Configure the SVG ViewBox
Set the viewBox so the generated SVG scales properly within the output canvas:
svgDoc.RootSvg.ViewBox = new SvgViewBox
{
MinX = 0,
MinY = 0,
Width = 320,
Height = 175
};Save the SVG File
Finally, save the SVG document:
svgDoc.Save("GrapeCity-Logo.svg");
}After running the application, the generated SVG file will contain the completed geometric logo.
Example 2: Generate the MESCIUS Logo with Path Geometry
This example creates a more complex SVG graphic using coordinate-based vector geometry.
Instead of using multiple basic shapes, the MESCIUS logo is generated as a single SVG path. To simplify the geometry, the bottom half of the logo is defined manually, and the top half is generated by mirroring those points across a horizontal axis.
Create the SVG Document and Canvas
Create a new method named CreateMesciusLogoSvg.
Inside the method, create the SVG document and set the canvas size:
public static void CreateMesciusLogoSvg()
{
var svgDoc = new GcSvgDocument();
svgDoc.RootSvg.Width = new SvgLength(250, SvgLengthUnits.Pixels);
svgDoc.RootSvg.Height = new SvgLength(250, SvgLengthUnits.Pixels);Define the Bottom Half of the Logo
Define the horizontal symmetry axis and the set of coordinate points that represent the bottom half of the logo:
// 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
Use LINQ to reverse the bottom points and mirror them across the horizontal centerline:
var top = bottom
.AsEnumerable()
.Reverse()
.Select(p => (p.x, y: (2 * yMid) - p.y))
.ToList();This creates the top half of the logo automatically and helps keep the final shape symmetrical.
Build the SVG Path
Combine the bottom and top point collections into a single outline, then use SvgPathBuilder to convert the points into an SVG path:
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 the Path into the SVG Document
Create a SvgPathElement, apply a fill color, and add the path to the SVG document:
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
Set the viewBox so the coordinate-based path scales into the 250-by-250 pixel canvas:
svgDoc.RootSvg.ViewBox = new SvgViewBox
{
MinX = 156,
MinY = 46,
Width = 612,
Height = 810
};Save the SVG File
Save the generated SVG file:
svgDoc.Save("MESCIUS-Logo.svg");
}After running the application, the generated SVG file will contain the completed MESCIUS logo.
FAQ
Why should I generate SVG files programmatically instead of using a design tool?
Programmatic SVG generation is useful when graphics need to be created dynamically, generated in bulk, or customized based on application data. It also removes the need for manual design work or external software on a server.
Can SVG files generated with DsImaging scale without losing quality?
Yes. SVG files are vector-based, so they scale cleanly across screen sizes and device resolutions without becoming blurry or pixelated.
What types of SVG elements can I create with DsImaging?
DsImaging supports common SVG elements such as shapes, paths, fills, strokes, and viewBox-based scaling. You can build simple graphics from basic elements or create more complex artwork using coordinate-based path logic.
Can I use generated SVG files in web applications?
Yes. SVG files can be used in modern web applications as images, icons, logos, diagrams, or embedded inline graphics.
Do I need external design software to generate SVG files with C#?
No. With DsImaging, SVG documents can be created entirely in code using .NET.