TQ
dev.com

SVG editing without Illustrator or Inkscape

19 Jul 2016 - by 'Maurits van der Schee'

In order to make your HTML5 games responsive you may choose to create vector graphics in SVG. The commercial Adobe Illustrator and open-source Inkscape software can both be used for this job. I did not like these tools and decided to create my own tool that stays very close to the W3C specification for SVG and allows for high precision editing.

Writing SVG by hand

Instead of using Inkscape I found myself writing SVG by hand using nothing more than a text-editor and a browser. This was mainly because I did not like the verbose Inkscape output of the SVG and that I had trouble making my vector drawings properly symmetric and properly smooth by having symmetric control points on connecting lines.

SVG path types

The most complex SVG vector part is the SVG path. It allows for the following path types:

• Move command (M). Move the cursor to a specific position.
• Line command (L). A straight line from a start point to an end point.
• Cubic Bézier commands (C and S). A cubic Bézier segment is defined by a start point, an end point, and two control points.
• Quadratic Bézier commands (Q and T). A quadratic Bézier segment is defined by a start point, an end point, and one control point.
• Elliptical arc command (A). An elliptical arc segment draws a segment of an ellipse.

The commands for the above path types all do not specify the start point as this is the end point of the previous command and the first command must be a "move" command.

• M x,y: Move to (x,y).
• L x,y: Line to (x,y).
• T x,y: Quadratic Bézier curve with symmetric control point to (x,y).
• Q x1,y1 x,y: Quadratic Bézier curve curve with single control point (x1,y1) to (x,y).
• S x2,y2 x,y: Cubic Bézier curve with symmetric first control point and second control point (x2,y2) to (x,y).
• C x1,y1 x2,y2 x,y: Cubic Bézier curve with symmetric first and second control points (x1,y1) and (x2,y2) to (x,y).
• A rx,ry rotation,large,sweep x,y: Elliptical arc with x and y radius (rx,ry) and options (rotation,large,sweep) to (x,y).

NB: The above commands all have a "relative" variant where the coordinates are specified as offsets related to the end point of the previous vector instead of absolute coordinates.

A simple SVG path tool

I decided to create a drawing tool that helps you build SVG using a graphical editor. The difference with Inkscape is that it focuses on creating perfect SVG paths. By showing the actual commands used it gives you more control over the vectors you are drawing. I feel a "perfect" SVG path is the shortest path specifying the shape, using symmetric control points where possible. The coordinates should be rounded (preferably to multiples of 10) and the coordinates should be symmetric where possible. By controlling the cursor with the keyboard instead of the mouse it focuses on precision.

Try the SVG draw tool online!

Source code

This is a very ambitious project, but I started it nevertheless and although it is not finished yet, it may already be useful. I have put it on my Github and I would very much like contributions that help the tool to achieve the above goals.

PS: Liked this article? Please share it on Facebook, Twitter or LinkedIn.