An SVG framework in C# and an SVG-GDI bridge...

4,450,714 members and growing!   11,451 now online. Email Password Remember me? Password problem?
HomeMFC/C++C#ASP.NETVB.NETArchitectSQLAll Topics  Help!ArticlesMessage BoardsLounge
All Topics,C#,.NET >>C# Programming >>General
An SVG framework in C# and an SVG-GDI+ bridge
ByBen Peterson.
Svg.Net is a C# framework for creating SVG images. A GDI-SVG bridge is implemented on top of it.
C#
Windows, .NET (.NET 1.0)
Win32, VS (VS.NET2002)
Dev
Posted: 9 Mar 2003
Views: 84,413
Announcements
Monthly Competition

Search   Articles Authors   Advanced Search
Sitemap
PrintBroken Article?BookmarkDiscussSend to a friend
19 votes for this article.
Popularity: 5.68. Rating: 4.44 out of 5.
Download source files - 95 KbDownload help files - 306 Kb
SvgNet & SvgGdi
SvgNet is a C# library designed to facilitate the processing and particularly the creation of SVG documents in C#.
The project homepage ishere. Source on the homepage may be more recent thanThe Code Project copy. What it does
SvgNet consists of the following parts: Classes to represent SVG elements and SVG types
SvgNet contains a family of classes that represent SVG elements (e.g. ellipse or tspan) and SVG types (e.g. a transformation list, a style, or a path description). The SVG types are provided with operators to make constructing and modifying SVG documents easy. For example, to change some properties of a style you can do:
myEllipse.Style = new Style("fill:red"); myEllipse.Style.Set("opacity", 0.5); myEllipse.Style += "stroke:black"; Classes to read, write and copy SVG scenes
To get an SVG string from a tree of SVG elements you have created is as simple as this:
SvgElement myRootElement = SvgFactory.ReadSvgString(s); s = myRootElement.WriteSvgString(); XML output can use entities to reduce the size and increase the legibility of the document.
The SvgFactory class also contains methods to make a deep copy of any SVG node and its descendants. All SVG types and elements are cloneable. The Svg-Gdi bridge
The SvgGdi bridge is a set of classes that use SvgNet to translate between SVG and GDI+. What this means is that any code that uses GDI+ to draw graphics can easily output SVG as well, simply by plugging in the SvgGraphics object. This object is exactly the same as a regular .NET Graphics object, but creates an SVG tree. Even things like hatched fills and line anchors are implemented. The irritatingly old-fashioned 'current transformation' system of GDI+ is implemented by creating nested SVG group elements, resulting in SVG output that's a bit cleaner than the corresponding GDI+ metafile in some ways.
SvgGdi is the main use for SvgNet, although other things (a collection of basic shapes, maybe charting tools) may be built on SvgNet in the future. Documentation
The SvgNet class libraries are documented in this help package. Additionally, there are two example applications bundled with SvgNet: SvgDocTest -- test application that reads and writes documents and constructs an SVG document. This application is both an example and test system. SvgGdiTest -- application that draws various scenes with SVG and GDI+. It is both an example of SvgGdi use, and a test of how accurate SvgGdi's emulation of GDI+ is.
The SvgNet Project
SvgNet is an Open Source project under a BSD-like license (license terms are reproduced in every SvgNet source file). SvgNet is copyright 2003 RiskCare Ltd.
The SvgNet project home page ishere.
About Ben Peterson

My interests are software engineering, Japanese, and talking about how good things used to be back in the good old days.
URL: http://www.jbrowse.com
Favorite Toy: http://www.ruby-lang.org
Clickhere to view Ben Peterson's online profile.
Other popular C# Programming articles:
A flexible charting library for .NET Looking for a way to draw 2D line graphs with C#? Here's yet another charting class library with a high degree of configurability, that is also easy to use.
I/O Ports Uncensored - 1 - Controlling LEDs (Light Emiting Diodes) with Parallel Port Controlling LEDs (Light Emiting Diodes) with Parallel Port
Asynchronous Method Invocation How to use .NET to call methods in a non-blocking mode.
I/O Ports Uncensored Part 2 - Controlling LCDs (Liquid Crystal Displays) and VFDs (Vacuum Fluorescent Displays) with Parallel Port Controlling LCDs (Liquid Crystal Displays) and VFDs (Vacuum Fluorescent Displays) with Parallel Port

[Top]Sign in to vote for this article:     PoorExcellent

Note: You mustSign in to post to this message board.
FAQ  Message score threshold 1.0 2.0 3.0 4.0 5.0    Search comments
View Normal (slow) Preview (slow) Message View Topic View Thread View Expanded    Per page 10 25 50 (must logon)
  Msgs 1 to 25 of 30 (Total: 30) (Refresh) First PrevNext
Subject  Author  Date

 error in svgCtl.SRC = "c:\\temp\\foo.svg"  Razik  4:37 4 Apr '07
  error in svgCtl.SRC = "c:\\temp\\foo.svg"
svgCtl.SRC = "c:\\temp\\foo.svg"
while running the sample the above statement in SvgGdiTest project
gives "Object reference not set to an instance of an object" error.
I am using IDE vs2003 and .Net Framework v1.1.
Kindly help.
Thanks
Razik
[Sign in |View Thread |PermaLink |Go to Thread Start] Score: 1.3 (6 votes).


 New Home Page Location  logan1337  21:29 3 Mar '07
  FYI, I found the relocated home page for this project:
http://www.jbrowse.com/svgnet/
[Sign in |View Thread |PermaLink |Go to Thread Start]


 Good  norm .net  7:10 28 Feb '07
  Need a scalable vector graphics engine for drawing network clouds, just the ticket 5/5!
We made the buttons on the screen look so good you'll want to lick them. Steve Jobs
[Sign in |View Thread |PermaLink |Go to Thread Start]


 Still alive?  Razputin  12:17 5 Feb '07
  Found this great lookin library whilst on my searches, I'm thinking of writing a .NET Framework Extension for SVG and just wanted to check whats been done.
This article was posted a while ago whats the state of play these days? Ben you still about? tried following the links but they're dead.
Cheers.
[Sign in |View Thread |PermaLink |Go to Thread Start]

 Re: Still alive?  Ben Peterson  12:25 5 Feb '07

I'm still alive and this library still works for rendering GDI+ calls to SVG -- but it's unlikely I'll ever do any more work on it. Thanks for your interest though
URL: http://www.jbrowse.com
Favorite Toy: http://www.ruby-lang.org
[Sign in |View Thread |PermaLink |Go to Thread Start]


 i don't know how to install the source file...:(  henin  6:33 18 Oct '06
  hello~everyone~~
i am just beginning to learn SVG...
just as title...
i downloaded the source file,but i don't know how to install the source file...
could you tell me how to do?
thanks ~!!!
[Sign in |View Thread |PermaLink |Go to Thread Start]


 ASP.NET + SvgNet??  Micke123  8:41 16 Oct '06
  Hello.
We are som students trying to use SvgNet in asp.net to generate a svg picture´.. But it isnt working. we are using an Embed tag inside the asp.net page like this:

Below, the code for page load method of SvgTest.aspx.cs
Response.Clear();
SvgSvgElement root = new SvgSvgElement("4in", "4in", "0,0 100,100");
root.AddChildren(
new SvgRectElement(5, 5, 10, 10),
new SvgEllipseElement(30, 10, 8, 12),
new SvgTextElement("PINGU!", 10, 40)
);
string s = root.WriteSVGString(true);
Response.ContentType = "image/svg+xml";
Response.Write(s);
Maybe someone can tell us how this actuallly work??
Regards, micke.
[Sign in |View Thread |PermaLink |Go to Thread Start] Score: 2.0 (1 vote).


 Compiler Errors  .:MaryAnne:.  0:33 23 Aug '06
  Hi,
im new to learning svg. i open the project svgdoctest. im trying to run the SvgDocTest but compiler is giving many errors. ive already installed adobe svg viewer. below are the errors given:-
a) line 0 = missing file specification for 'lr' command-line option(CS2005)
b) line 33,34,35 = the type/namespace name 'SvgNet' could not be found(are
you missing directive or an assembly reference?)(CS0246)
c) line 50,51 = the type/namespace name 'AxSVGACTIVEXLib' could not be found
(are you missing directive or an assembly reference?)(CS0246)
d) line 220 = the type/namespace name 'SvgElement' could not be found
(are you missing directive or an assembly reference?)(CS0246)
e) line 67 = TODO Add any constuctor code after InitializeComponent call
please help me solve this as im doing a project regarding svgnet.
.:MaryAnne:.
[Sign in |View Thread |PermaLink |Go to Thread Start]

 Re: Compiler Errors  Ben Peterson  5:27 23 Aug '06
  You need to install the Adobe SVG viewer; that's what AxSVGACTIVEXLib is.
The demo/test applications use this to display svg to verify that it looks right. You don't need it for the actual SvgNet library itself, though.
This seems to be a very FAQ, so I will put something about it in the article itself.
URL: http://www.jbrowse.com
Favorite Toy: http://www.ruby-lang.org
[Sign in |View Thread |PermaLink |Go to Thread Start]


 please help me!  tzgpxl  4:55 24 Jul '06
  first,I should say sorry for my poor english!
i got a wrong message here:
svgCtl.SRC = "c:\\temp\\foo.svg";
please tell me why?
i'm learning svg now
who can help me?
[Sign in |View Thread |PermaLink |Go to Thread Start] Score: 4.0 (1 vote).

 Re: please help me!  mengxh2000  3:40 17 Aug '06
  I found the wrong message too!
svgCtl.SRC="c:\\temp\\foo.svg";
Please tell me why ?
MSN:cxymxh@hotmail.com
[Sign in |View Thread |PermaLink |Go to Thread Start] Score: 2.0 (1 vote).


 Svg in SVG  Anonymous  6:27 12 Aug '04
  Hello. im nab from japan. I
sorry my english is poor. i hope u can understand.
i love svgnet and using it.but...
i have a question about how to use svgnet.
i want to make SVG file. like this.
-------------------------------------------------------------

--------------------------------------------------------------
this file has two svg tag.
is it possible to make this SVG File in SVGnet?
please help me.
[Sign in |View Thread |PermaLink |Go to Thread Start]

 Re: Svg in SVG  aaaaaaaaaaaaaaaasa  0:11 17 Aug '04
  i want to make SVG file. like this.
please teach me how to write in C# that use svgnet's DLL.
------------------------------------
＜?xml version="1.0" standalone="no"?＞
＜!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"＞
＜svg width="12cm" height="10cm"＞
＜rect x="2cm" y="2cm" width="8cm" height="6cm" rx="50" ry="50" fill="blue" stroke="blue"/＞
＜svg width="12cm" height="10cm"＞
＜rect x="2cm" y="2cm" width="8cm" height="6cm" rx="100" ry="50" fill="red" stroke="blue"/＞
＜/svg＞
＜/svg＞
[Sign in |View Thread |PermaLink |Go to Thread Start]

 Re: Svg in SVG  Ben Peterson  4:53 17 Aug '04

You should be able to do it just by doing
SvgSvgElement rootDoc = new SvgSvgElement();
SvgSvgElement subDoc = new SvgSvgElement();
rootDoc.AddChild(subDoc);
...unless I am forgetting something?
URL: http://www.jbrowse.com
Favorite Toy: http://www.ruby-lang.org
[Sign in |View Thread |PermaLink |Go to Thread Start] Score: 2.0 (1 vote).

 Re: Svg in SVG  aaaaaaaaaaaaaaaaasa  5:48 17 Aug '04

Hi!Ben
Thanks for help.
plz help me more.I got confused.
I try to make a SVG File that has two using svgnet.
like this↓
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
＜?xml version="1.0" encoding="utf-8" standalone="yes"?＞
＜!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"[
＜!ENTITY E2 'fill:rgb(0,0,255);stroke:none;opacity:1;'＞
＜!ENTITY E1 'fill:rgb(255,0,0);stroke:none;opacity:1;'＞
]＞
＜svg id="SvgGdi_output"＞ ＜!-- first svgtag--!＞
＜rect id="background" style="fill:rgb(236,233,216);" width="100%" height="100%" x="0" y="0" /＞
＜g id="root_group" style="shape-rendering:crispEdges;"＞
＜rect id="4" style="&E1;" width="100" height="200" x="8" y="8" /＞
＜/g＞
＜defs id="clips_hatches_and_gradients" /＞
＜svg id ="hoge"＞ ＜!-- second svgtag--!＞
＜g id="root_group2" style="shape-rendering:crispEdges;"＞
＜rect id="5" style="&E2;" width="50" height="100" x="8" y="8" /＞
＜/g＞
＜defs id="clips_hatches_and_gradients" /＞
＜/svg＞
＜/svg＞
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
how should I write the code?
-------------------------------------------
SvgGraphics ig;
ig = new SvgGraphics();
ig.FillRectangle(new SolidBrush(Color.Red),8,8,100,200);
//---how should i write a code? i wanna insert svgtag more in SVGFile--
xxx.FillRectangle(new SolidBrush(Color.Blue),8,8,50,100);
//----
string s = ig.WriteSVGString();
StreamWriter tw = new StreamWriter("c:\\temp\\foo.svg", false);
tw.Write(s);
tw.Close();
svgCtl.SRC = "c:\\temp\\foo.svg";
-------------------------------------------
plz help me again.
thank u for reading my english. u know my English is too poor.
[Sign in |View Thread |PermaLink |Go to Thread Start] Score: 1.0 (1 vote).

 Re: Svg in SVG  aaaaaaaaaaaaaaaaaasa  5:52 17 Aug '04

Hi!Ben
Thanks for help.
plz help me more.I got confused.
I try to make a SVG File that has two using svgnet.
like this↓
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
＜?xml version="1.0" encoding="utf-8" standalone="yes"?＞
＜!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"[
＜!ENTITY E2 'fill:rgb(0,0,255);stroke:none;opacity:1;'＞
＜!ENTITY E1 'fill:rgb(255,0,0);stroke:none;opacity:1;'＞
]＞
＜svg id="SvgGdi_output"＞ ＜!-- first svgtag--!＞
＜rect id="background" style="fill:rgb(236,233,216);" width="100%" height="100%" x="0" y="0" /＞
＜g id="root_group" style="shape-rendering:crispEdges;"＞
＜rect id="4" style="&E1;" width="100" height="200" x="8" y="8" /＞
＜/g＞
＜defs id="clips_hatches_and_gradients" /＞
＜svg id ="hoge"＞ ＜!-- second svgtag--!＞
＜g id="root_group2" style="shape-rendering:crispEdges;"＞
＜rect id="5" style="&E2;" width="50" height="100" x="8" y="8" /＞
＜/g＞
＜defs id="clips_hatches_and_gradients" /＞
＜/svg＞
＜/svg＞
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
how should I write the code?
-------------------------------------------
SvgGraphics ig;
ig = new SvgGraphics();
ig.FillRectangle(new SolidBrush(Color.Red),8,8,100,200);
//---how should i write a code? i wanna insert svgtag more in SVGFile--
xxx.FillRectangle(new SolidBrush(Color.Blue),8,8,50,100);
//----
string s = ig.WriteSVGString();
StreamWriter tw = new StreamWriter("c:\\temp\\foo.svg", false);
tw.Write(s);
tw.Close();
svgCtl.SRC = "c:\\temp\\foo.svg";
-------------------------------------------
plz help me again.
thank u for reading my english. u know my English is too poor.
[Sign in |View Thread |PermaLink |Go to Thread Start] Score: 2.0 (1 vote).

 Re: Svg in SVG  Ben Peterson  13:05 18 Aug '04

Ah, you can create nested svg elements via the svgnet api, but not via the SvgGraphics class. This is because there is no GDI+ structure which needs to be represented by nested svg elements.
The SvgGraphics class is there so that you can create svg documents in the same way as drawing to a GDI+ Graphics object. If you just want to create an svg document, you can just create some SvgElement-derived objects and use 'AddChild' on them to build up a scene.
URL: http://www.jbrowse.com
Favorite Toy: http://www.ruby-lang.org
[Sign in |View Thread |PermaLink |Go to Thread Start]

 Re: Svg in SVG  aaaaaaaaaaaaaaaaaasa  21:06 18 Aug '04

Hi! Ben
I understand.
Im going to create nested svg element via the svgnet api.
thank u very much.
[Sign in |View Thread |PermaLink |Go to Thread Start]

 Re: Svg in SVG  Frank Hileman  20:53 27 Sep '04
  VG.net is more component oriented.
check out VG.net:www.vgdotnet.com
An animated vector graphics system integrated in VS.net
[Sign in |View Thread |PermaLink |Go to Thread Start]

 Re: Svg in SVG  ikarosu  22:57 27 Sep '04

Hi！Frank.
thanks for good info.
I Checked out.I respect you.
VG.net is great and so cool!
I wanna use very much.
but It's hard to get it in Japan.
how can i get it?
Im Japanese and I love SVG.
but..still SVG is not common in japan.
----------------------
ikarosu
nab0320@yahoo.co.jp
----------------------
[Sign in |View Thread |PermaLink |Go to Thread Start] Score: 1.0 (1 vote).


 Advice on WriteSVGString()  hoffmanjp  22:08 8 Jul '04
  Hello,
First off, thank-you for this nice piece of work!
I need some advice on WriteSVGString(). I have modified the SvgGdiTest to do draw some line segments and am getting some unexpected results although the generated SVG file is well formed and renders properly.
I have an application where I need to render some line segments. (Actually it is a four channel waveform). Three ways to do this in GDI+ are to use DrawLine, DrawLines or DrawPolygon. Using SvgNet with either ig.DrawLines or ig.DrawPolygon, the ig.WriteSVGString() takes ~18 seconds to create the string. The resulting output is a small ~60k file, although it renders correctly.
Pen p = new Pen(Color.Red);
PointF [] pt = new PointF[10000];
for(int i= 0; i<10000; i++)
{
pt[i].X= 0;
pt[i].Y= i;
}
ig.DrawLines( p, pt );
string s = ig.WriteSVGString();
write to a file....
If I use ig.DrawLine to render the data (below), ig.WriteSVGString() takes ~1 second to create the string, but creates a monster ~650K file. Again, the SVG renders correctly.
PointF [] pt = new PointF[10000];
for(int i= 0; i<10000; i++)
{
ig.DrawLine( p, 0,0, 0, i );
}
string s = ig.WriteSVGString();
write to a file....
Am I missing something here? It seems that DrawLines or DrawPolygon should more efficient and execute almost instantaneous. Perhaps there is a different way?
John Hoffman
[Sign in |View Thread |PermaLink |Go to Thread Start]


 Saving editable vectors from c# .NET applications  Nick Lim  6:41 12 Aug '03

I would appreciate advice on your project and saving editable vectors.
I am trying to save a set of poly-lines (straight-segmented-lines) to an industry-standard file format which will allow subsequent editing of the lines. The program I am developing is written in C# on .NET. Which file formats are appropriate (SVG/DXF?) and would this project help with the job?
Many thanks for any help.
Best regards,
Nicholas Lim
Technical Architect ICraftSolutions Ltd
[Sign in |View Thread |PermaLink |Go to Thread Start] Score: 2.0 (1 vote).

 Re: Saving editable vectors from c# .NET applications  Ben Peterson  11:57 3 Sep '03

(I forget whether I already replied to this by mail, and you have probably solved the problem already, but...)
I think SVG is probably a suitable format for that task. It doesn't take up too much space and it can be visually edited by many GUI tools. SVG can represent polylines with the 'path' element, which allows for curved segments, but if you know you only ever need straight polylines you can use the 'polyline' element.
SvgNet wraps these elements with the SvgPolylineElement object. This object has a 'points' property that holds an SvgPoints object, so you can specify the points with strings or numeric arrays thus:
SvgPolylineElement mypoly("3,4 5,6 7,8");
mypoly.Points = "23,45 24,45 24,46 24.5,46.5";
mypoly.Points = new float[]{23,45,24,45,24,46,24.5,46.5};
...and so on.
On the other hand if all you want to do is store polylines it would be pretty easy to just to write out the svg manually:
...and so on.
URL: http://www.jbrowse.com
Favorite Toy: http://www.ruby-lang.org
[Sign in |View Thread |PermaLink |Go to Thread Start]

 Re: Saving editable vectors from c# .NET applications  Nick Lim  6:34 8 Sep '03
  Ben,
Many thanks for your reply - it is of great help. Would you be able to clarify two points you made?
Where you say: "it (SVG) can be visually edited by many GUI tools"
QU: could you recommend some proven SVG CAD-style GUI tools, that could handle up to 5,000 polylines? I need to display, scroll, zoom, and edit the lines by adding points, eventually maybe merging lines etc., all displayed against a background image.
Where you say:
"On the other hand if all you want to do is store polylines it would be pretty easy to just to write out the svg manually:
...and so on."
QU: the detail before the "and so on" did not show up. Had you included a code snippet?
Many thanks again for your help.
Best,
Nick
[Sign in |View Thread |PermaLink |Go to Thread Start]

 Re: Saving editable vectors from c# .NET applications  SimonS  16:52 4 Oct '03
  If you are looking for tools to edit SVG visually, have a look at theSVG homepage[^] on the W3C.
Cheers,
Simon
sig ::
"Don't try to be like Jackie. There is only one Jackie.... Study computers instead.", Jackie Chan on career choices.
article ::animation mechanics in SVG     picture ::my first abstract photo
[Sign in |View Thread |PermaLink |Go to Thread Start]

Last Visit: 22:26 Tuesday 21st August, 2007 First PrevNext
General comment   News / Info   Question   Answer   Joke / Game   Admin message
Updated: 9 Mar 2003 Article content copyright Ben Peterson, 2003
everything else Copyright ©CodeProject, 1999-2007.
Web16 |Advertise on The Code Project |Privacy

The Ultimate Toolbox •ASP Alliance •Developer Fusion •Developersdex •DevGuru •Programmers Heaven •Planet Source Code •Tek-Tips Forums •
Help!
Articles
Message Boards
Lounge
What is 'The Code Project'?
General FAQ
Post a Question
Site Directory
About Us
Latest
Most Popular
Search
Site Directory
Submit an Article
Update an Article
Article Competition
Windows Vista
Visual C++
ATL / WTL / STL
COM
C++/CLI
C#
ASP.NET
VB.NET
Web Development
.NET Framework
Mobile Development
SQL / ADO / ADO.NET
XML / XSL
OS / SysAdmin
Work Issues
Article Requests
Collaboration
General Discussions
Hardware
Algorithms / Math
Design and Architecture
Subtle Bugs
Suggestions
The Soapbox