Web Drafter

A tiny online vector graphics application.

Click here to try it out.

As a small project to familiarise myself with JavaScript, jQuery and SVG I started working on a small vector graphics app using the SVG.js library.

At first I was thinking of manipulating SVG-text directly as I had done with my desktop Java applications, but since I found that simply appending or updating the inner html of divs didn’t refresh the SVG canvas and other annoying things I found it was smarter to just use a simple JavaScript library for this.

In addition to learning a lot of jQuery and JavaScript, especially understanding the specifics of JavaScripts idiosyncratic approach to OOP, I learned a bit about which existing libraries there are and how to use them. For this small application, SVG.js did nicely, but I also learned about a larger library called Raphaƫl, and an interesting little script called Flowtype, that automagically resizes the font size in relation to the window size.

I put the source code of my little application on GitHub here.

Up to now I’ve only managed to do the most basic rectilinear polygons, with the foundations set for snapping and I’m planning to create a simple colour-picker functionality for the stroke, fill and opacity.

The hotkeys are:

cmd+z – UNDO (mac)

ctrl+z – UNDO (windows, linux)

D – Delete the last polygon.

S – Show data on the selected polygon.

Polygons are created by closing the path.

This is done by creating a line where the end coordinate is the same as the first coordinate of the polygon.