Click here to Skip to main content
11,929,924 members (54,966 online)
Click here to Skip to main content
Add your own
alternative version


83 bookmarked

SVGPad - Application and class library for editing SVG documents.

, 6 Sep 2004
Rate this:
Please Sign up or sign in to vote.
A simple C# application and a C# class library for editing SVG documents.


This article presents the SVGPad application, a simple C# tool designed for editing SVG documents. The SVGPad is a very simple editor (it is not a WYSIWYG application) that can be useful for learning SVG syntax and for building simple SVG documents. It provides a complete control over the SVG document generated (and this is not always true if you use a graphic tool).


The article assumes that you are familiar with basic concepts of Scalable Vector Graphics (SVG), an XML application that provides a language to describe two-dimensional graphics.

SVG specification is published by W3C and can be found here:

SVG graphics are based on three different types of objects: vector graphics, images, and text. Graphical objects can be grouped, styled, transformed, and animated. Animation is performed via scripting since a rich set of event handlers (such as onmouseover, onclick, …) can be assigned to any SVG object.

SVG has several benefits that make it the best choice for web applications that need 2D graphic support. Because it is a vector format the graphic files are smaller and they are resolution independent. In addition since graphics are stored in a text file labels and descriptions can be indexed by search engines.


How it works

The SVGPad UI is divided in two main panes.

The left pane contains a tree that represents the SVG document. The right pane contains a PropertyGrid displaying the property of the current selected object on the tree and a text box that shows the SVG representation of the selected object. The PropertyGrid shows only the attributes that are suitable for the element type selected.

The application functionality can be accessed using the toolbar of via the tree context menu.

Supported elements and attributes

The SVGPad does not cover all the SVG elements and attributes; in this first release it just implements the most common elements:

  • text
  • desc
  • group
  • rect
  • circle
  • ellipse
  • line
  • path
  • polygon
  • image

For each element a subset of SVG attributes is supported:

  • Core attributes
  • Paint/Color attributes
  • Style attributes
  • Opacity attributes
  • Graphic attributes

Other SVGPad functions

  • New, create a new empty SVG document.
  • Open, load an SVG document from a file.
  • Save, save the current document.
  • Preview, open the SVG file in the default web browser.
  • Copy, copy the selected SVG element.
  • Cut, cut the selected SVG element.
  • Paste, paste the element in the clipboard.
  • Delete, delete the selected SVG element.
  • Element up, move the selected element up (before its previous element)
  • Element down, move the selected element down (after its next element)
  • Level up, move the selected element up one level in a hierarchy


The SVGPad application is based on the SVGLib C# class library. The SVGLib provides a set of classes that represent the SVG document, the SVG elements and attributes. It can be used for creating and managing SVG documents.

The SVGLib classes have been documented using NDoc and the chm file is included in the attached binary file zip.

Using the SVGLib is very simple; first of all you need to create a document:

SvgDoc doc = new SvgDoc();
SvgRoot root = doc.CreateNewDocument();
root.Width = "500px";
root.Height = "500px";

Then you can start adding elements:

SvgRect rect = new SvgRect(doc, 
doc.AddElement(root, rect);

rect.RX = "2px";
rect.RY = "2px";

SvgCircle circle1 = new SvgCircle(doc, 
doc.AddElement(root, circle1);

circle1.Fill = Color.DarkBlue;

SvgCircle circle2 = new SvgCircle(doc, 
doc.AddElement(root, circle2);

circle2.Fill = Color.DarkBlue;

Finally you can save the document.


Here the created file shown in a web browser.


  • 05-Sep-2004 R0.10, First release.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Web Developer
Italy Italy
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
manoj kumar choubey20-Feb-12 20:31
membermanoj kumar choubey20-Feb-12 20:31 
GeneralHow to update style attribute of a Path tag using This library Pin
Esonix23-May-11 0:55
memberEsonix23-May-11 0:55 
QuestionHave you complete some 'unsupport' functions? Pin
YinBoChao26-Sep-09 18:10
memberYinBoChao26-Sep-09 18:10 
General'crop' vector image Pin
abentov16-Mar-09 17:18
memberabentov16-Mar-09 17:18 

i have a general question:

is it conceptually possible to 'crop' a vector/svg graphic/image?

I'll explain myself:

in adobe photoshop (i know it's bitmap based) one can select a rectangle within a larger image and then 'crop'/cut out just the smaller inner part.

in adobe flash in order to perform a similar task, one should resize just the 'stage' and all objects left outside will be invisible, thus 'croped'. or one should select all objects around the inner object/s and delete them.

can this be made with a svg file? if yes, does this .net library support this feature?

i hope i've made my question clear,
thanks in advance,

ps. i am ready to assist developing such a feature on an open source basis, let me know if interested
GeneralYou made a mistake in svglib! [modified] Pin
Wan--Vevi23-Jul-08 23:16
memberWan--Vevi23-Jul-08 23:16 2.0? Pin
Jaime Olivares25-Nov-07 10:46
memberJaime Olivares25-Nov-07 10:46 
GeneralLoading of Adobe Illustrator SVG file error Pin
lieperik21-Jan-07 5:06
memberlieperik21-Jan-07 5:06 
GeneralExporting the assembly Pin
Mr Delphi Developer12-Apr-06 5:38
memberMr Delphi Developer12-Apr-06 5:38 
GeneralWoo Pin
vivaladan5-Mar-06 5:24
membervivaladan5-Mar-06 5:24 
Generalinstalling svgpad Pin
forkinpm6-Feb-05 21:31
memberforkinpm6-Feb-05 21:31 
GeneralRe: installing svgpad Pin
big717-Feb-05 10:22
memberbig717-Feb-05 10:22 
GeneralCool application; Feature request Pin
WillemM7-Sep-04 8:21
memberWillemM7-Sep-04 8:21 
GeneralRe: Cool application; Feature request Pin
big717-Sep-04 22:21
memberbig717-Sep-04 22:21 
GeneralRe: Cool application; Feature request Pin
Tomasz Bekasiewicz14-Sep-04 21:31
memberTomasz Bekasiewicz14-Sep-04 21:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.151126.1 | Last Updated 7 Sep 2004
Article Copyright 2004 by big71
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid