For some time now I’ve wanted to develop a set of classes, or a code library, to allow the drawing of simple, line-based images such as boxes, circles and polygons. I may have finally found a bit of a shortcut.

Initially I was planning to learn something about the Canvas object that gets partially branded as part of the HTML 5 specification. However this then shifted when I came across the Scalable Vector Graphics (SVG) language, or standard, or do I mean API. I began to look at the possibility of using the Raphaël JavaScript Library, a small JavaScript library that enables the easy implementation of vector graphics, which I came across after a little Googling (or it may have been via the Stack Overflow site).

My plans have been on hold for a little while as I have been very busy at work, bringing work home with me or just too tired at the end of the working day to code in the evening, and I’ve also been looking at various JavaScript frameworks. However, I was reading something in my RSS feed earlier this week and came across an open source project. Actually it was an open source project that was quite irrelevant to what I wanted (it was the Ace code editor project) but it led me to do a bit of searching to determine if there was an open source vector drawing application out there.

I came across the SVG-edit open source project which is a vector graphics editor for the web browser. A demo of the SVG-edit editor shows that it’s quite rich in features.

I downloaded the source code and began taking a brief look at it to determine if it was something that I could use for my own projects. The main vector drawing functionality of the editor seems to be situated in a single JavaScript file, namely svgcanvas.js. However a lot of useful features such as the implementation of selection handles, that appear when an object is selected thus allowed for rotation and scaling, are implemented in the main svg-edit.js file.

I’ve no doubt that this code would be an excellent starting point in developing a project that requires the ability to draw and manipulate vector graphics but effort would of course be needed to get one’s head into the code in order to extract the core functionality.

Comments are closed.