Cat Alphabet and SVG fonts


I saw a picture of a Cat based alphabet which was doing the rounds on social media this morning, I was unable to trace the original source but I thought it was awesome and would lend itself to laser cutting because of it's basic line styling. It also makes a very good exercise in constructing an SVG font so I thought I would write it up.

An SVG font was originally intended as a way of embedding font information inside an SVG document. Icon fonts and SVG fonts are now used widely across the internet due to their ability to store a collection of images within a single file. Each unicode character references a different image and these images can be any drawing you like as defined by the SVG standard.

A traditional font requires a series of filled shapes, the letter 'I' for example would be a filled rectangle. While laser cutting the process of shading that rectangle would be done by engraving, filling it with a series of dots which is very time consuming. An alternate would be to trace the outline of the letter. If a letter is very thin it will look burnt where the laser passes over the same point twice but it also takes twice as long as it needs to. In a traditional font, if the rectangle only has three sides it may not be rendered correctly. SVG fonts do not have this limitation, an image in an SVG font can be any valid path. This means it can be used to hold a font as pure line artwork.

The precedent for for this has already been set in inkscape, Evil Mad Scientist wrote an Inkscape extension many years ago that created line artwork fonts (Hershey Fonts) and they've been updating it ever since. The most recent versions are included in Inkscape by default and have the ability to import any SVG font from the font folder, you simply have to tell it which font to use.

I found creating the SVG font can be a little bit trickier. There are several font generators online but most seem to suffer from, what I would call, traditional font problems. Because the artwork we're trying to include doesn't have closed shapes they don't render correctly and sometimes all the letters are scaled to be the same size; which is not helpful to have 'o' and 'O' the same size. I just discovered that Inkscape also includes an SVG font editor, although I will have to investigate that another time Thankfully the svg font format is well documented and xml is easy to edit with the help of tools such as notepad++.

Each glyph occupies a single line of the file and contains an SVG path as one of the attributes, when called by inkscape, each letter is replaced by the appropriate path from the font file and the whole string is changed into the appropriate line artwork. I have shared the SVG font file over on my github account. (svg here) you simply need to copy is into the svg_fonts folder in the inkscape directory.

Fun Cat fonts aside, the whole reason I really learned about svg fonts was to work on my puzzle box The Antikythera tablets. I needed some line artwork for the greek alphabet, a simple substitution cipher where the 'lamba' symbol is 'L' etc. Making an SVG font like that allows me to keep the artwork crisp/clean and fast to cut.

There's also a chance to win a free set of tablets over on Twitter now, if you're quick

Popular posts from this blog

Wiring the Ruida Controller

Rainbow Puzzle Box

Leetro to Ruida Settings