Click here to Skip to main content
15,664,808 members
Articles / Web Development / HTML
Posted 31 Dec 2016

Tagged as


20 bookmarked

My SVG Editor

Rate me:
Please Sign up or sign in to vote.
4.51/5 (15 votes)
7 Jan 2017CPOL4 min read
A simple SVG editor from the viewpoint of programmers.


In this article, a simple SVG editor is introduced and hope to streamline the design of SVG-style web pages. The example code is a start and you can improve it as per your need.


  • SVG(Scalable Vector Graphics)、HTML/CSS/Javascript.
  • Windows Forms development.

That's all.


Currently there are many SVG design tools, e.g. Adobe Illustrator, Inkscape, SVG-Edit, and so on. But most of them are created from the viewpoint of designers instead of the programmers. As a developer, I need a tool to integrate javascript、html with SVG for a full functional web pages. In addition, instant preview and debugging are also be necessary for rapid development.  


The components and their functions are described as below:

  1. A syntax-highlighting editor to facilitate SVG/HTML/Javacript coding. 
  2. An embedded browser for preview the result of code.
  3. A light weight HTTP server to parse web page.
  4. Easily copy-and-paste the fragments of SVG arts from hundreds of web sites, e.g. openclipartIconFinder.

Image 1



First, I choosed ICSharpCode.TextEditor as the SVG/HTML/Javacript editor, which has pretty syntax highlight feature, but it missed SVG file setting. I modified SyntaxModes.xml in the source, just added .svg extension in XML settings. After rebuild the project, the svg file will be displayed with syntax highlight.

Second, I use CefSharp.WinForms as browser instead of VS standard WebBrowser, since CefSharp employed Google Chrome which could render complicate SVG better than IE. but there is some limitations. It need to specify x86 or x64 as project's platform target, and only .net framework 5.5.2 is supported. You could use the following command in NuGet Package Manager Console to add reference to your project:

PM> Install-Package CefSharp.WinForms

Third, I wrap the components above into SplitContainer control, and was packed as an user control called MyUserControl.cs:

        public MyUserControl() {

            // add ICSharpCode.TextEditor into panel1
            editor = new TextEditorControl();
            editor.Dock = DockStyle.Fill;
            editor.FileName = defaultNewFileName;
            editor.IsReadOnly = false;
            editor.Text = File.ReadAllText(Path.Combine(Application.StartupPath, "template.svg")).Replace("@content", "");

            editor.Document.DocumentChanged +=
                new DocumentEventHandler((sender, e) => { SetModifiedFlag(true); });

            // add chrome into panel2
            browser = new ChromiumWebBrowser("");
            splitContainer1.Panel2.Resize += Panel2_Resize;

            // Allow the use of local resources in the browser
            BrowserSettings browserSettings = new BrowserSettings();
            browserSettings.FileAccessFromFileUrls = CefState.Enabled;
            browserSettings.UniversalAccessFromFileUrls = CefState.Enabled;
            browser.BrowserSettings = browserSettings;
            browser.IsBrowserInitializedChanged += BrowserInitializedChanged; 


Finally, I use SimpleHTTPServer as light weight server which is very easy to call. To copy the class into the project and call start/stop in Form_load/Form_Closing event handler.  If "access denied" error happened, please run the following command As Administrator:

netsh http add urlacl url=http://localhost:8085/ user=Everyone listen=yes 

After all compoenents were integrated, I created a Windows Forms project to package them and provided File New/Open/Save/Refresh ... functions in this project. I don't want to waste your time to explain details, you can run and trace each functions for details.

Using the tool

All functions are defined in the toolbar.

Image 2

  • New: Add a new file for SVG template. You can use "Switch" button to switch to HTML template. In tempate I use raphael.js and svg-pan-zoom.js to demostrate the skill to manipulate SVG elements programatically.
  • Switch SVG/HTML Template. The HTML template contains SVG usages and Javascripts to manipulate SVG objects.
  • Open: Load a existing file, which can be SVG/HTML/Javascript file.
  • Save/SaveAs: Save the file in active Tab, and copy the file and included files to HTTP server, and render it in embedded browser(right panel). The tool will find svg/css/javascript files in source code and copy them to server automatically.
  • Close: Close active Tab.
  • Refresh: Refresh the browser to preview the result of latest code.
  • Slide Show:  to maximize browsing area to preview the result.
  • Browser: Activate the default browser to see the result.
  • XPath Expression: It is very useful to search framements of SVG files, since SVG is XML based content. you can search tag with id or other attributes in SVG. While the result is found, the tool will copy it to Clip Board. After that you could paste it to another file.
  • Javascript: CefSharp browser support javascripts to change the page in it, so you can run javascript in toolbar. After testing, you can add these codes into your page.
  • Show DevTools: you can press this button or press F12 to show Chome Developer Tool for trace source or debugging.

In addition, context menu for the editor was added, most of codes are come from the example project of ICSharpCode. It provides bookmark, find/replace, and xml fragment extraction functions.

Finally I'd like to share with you how I use this tool to cut/paste svg fragments from other SVG arts to mine via YouTube video.

In the video, the sample file is come from

Points of Interest

Some interesting SVG Applications I found:

All of above applications, you just download them, and run/modify/test in MySvgEditor easily. Don't forget to change the paths of script/css/svg file if necessary.

Although all components were contributed by GitHub experts, I still encountered many tricky problems. I enjoyed the the process of conquering them step by step. 


Ver. 0.0.1. Poor UI.

Ver. 0.0.2. Bugs Fixed.

Ver. 0.0.3 Context Menu for the editor was added.



This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Software Developer
Taiwan Taiwan
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

QuestionIncomplete Menu Pin
Member 77294849-Mar-17 16:54
Member 77294849-Mar-17 16:54 
QuestionSyntax Highlightning Text Box Pin
jogibear99886-Jan-17 21:36
jogibear99886-Jan-17 21:36 
AnswerRe: Syntax Highlightning Text Box Pin
MichaelChen_7-Jan-17 3:11
professionalMichaelChen_7-Jan-17 3:11 
SuggestionNice one, but "switch HTML/SVG" is irritating Pin
Member 24433063-Jan-17 1:52
Member 24433063-Jan-17 1:52 
Quite nice.

But one thing, ff you press "switch HTML/SVG" it reloads the template:

// switch template between htm and svg file
private void toolStripButtonSwitch_Click(object sender, EventArgs e) {
  var tab = tabControl1.SelectedTab;
  if (((MyUserControl)tab.Controls[0]).editor.FileName.EndsWith(".svg", StringComparison.InvariantCultureIgnoreCase)) {
     ((MyUserControl)tab.Controls[0]).editor.Text = File.ReadAllText(Path.Combine(Application.StartupPath, "template.htm")).Replace("@content", "");
     ((MyUserControl)tab.Controls[0]).editor.FileName = Path.GetFileNameWithoutExtension(((MyUserControl)tab.Controls[0]).editor.FileName) + ".htm";
  } else {
     ((MyUserControl)tab.Controls[0]).editor.Text = File.ReadAllText(Path.Combine(Application.StartupPath, "template.svg")).Replace("@content", "");
     ((MyUserControl)tab.Controls[0]).editor.FileName = Path.GetFileNameWithoutExtension(((MyUserControl)tab.Controls[0]).editor.FileName) + ".svg";

Would be nice if you just switch between loaded SVG file and loaded html File.
GeneralRe: Nice one, but "switch HTML/SVG" is irritating Pin
MichaelChen_3-Jan-17 12:30
professionalMichaelChen_3-Jan-17 12:30 

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.