<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="px" height="px" viewBox="0 0 "
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Processing.js vector drawing</title>
</svg>

Click on a tool button to get contextual help.

Additional help

Adding points to an existing shape

Use the "refine" button to click anywhere on your shape where you want an additional point.

Removing points

There are two ways to remove points. The first is to "undraw" the last point that the program knows about. You can keep doing this until you have nothing left on your canvas.

The other way is by selecting all the points you want to delete, using the "select" mode. Click a point once to add it to the selection, click again to remove from selection, or click-drag to select all points in the selection area. When you're satisfied with your selection, hit the "del" key on your keyboard.

Starting over

Click the "clear" button. Or select, then click-drag select everything, then hit your keyboard's "del" key.

"Cutting out" one shape from another shape

In order for SVG (and any vector program, actually) to consider a shape a "cutout" from another shape, its drawing direction needs to be the opposite direction of the shape you want it cut out from. So, if you drew your original shape clockwise, the cutout shape has to be drawn counter-clockwise (and vice versa). You can tell which direction you draw a shape in by looking at the bezier control points. The directionality is marked by a blue dot inside one of the control points

This page relies on three core technologies, one mine, two not mine. The two "not mine"s are processing.js and jQuery UI. The first allows arbitrary graphics work on the HTML5 "canvas" element, using the Processing programming language (which is a visual programming kind of java). This makes it possible to offer you a vector editor without having to do everything in Flash, which is great! The second is a super handy javascript library for doing all sorts of on-page, under-the-hood things, with a UI component that makes creating pages that look like this page remarkably easy.

The "mine" technology is the bit that lets you load letters from fonts into the vector editor. It is basically a custom OpenType font parser with an understanding of both TrueType and Type 2 outlines, so it can deal with .ttf and .otf fonts. The fourth technology, which I hope to come up with not too long from now, will be one that lets you actually make and save your own fonts, based on normal vector graphics, with proper support for OpenType tables (GPOS, GSUB, tables for ligatures, kerning, etc). If this means nothing to you: these things are very important for making fonts that aren't just toy fonts, but proper fonts that can be used correctly by typesetting programs (Microsoft Word, LaTeX, inDesign, etc).

Hopefully this will end up being something that's a good alternative to fontforge for simple font work. To that end, I still need to come up with a way to create struts and alignment shapes, as well as ways to mark parallel lines and hintin identities, etc. This is very much a work in progress! =P

© Michiel "Pomax" Kamermans, May 2010.