loveencounterflow / svgttf

NodeJS library to convert Illustrator or Inkscape SVG drawings to SVG and TTF fonts
MIT License
30 stars 4 forks source link

SvgTtf

Table of Contents generated with DocToc

Incipient Documentation for Upcoming Version (Caveat Emptor: AYOR)

Old Documentation

SvgTtf

SVG design sheet—here we draw the glyph shapes:

This is what a SVG→TTF conversion may look like:

The resulting TTF font opened in FontForge—ready for any post-processing:

Update: Coping With XeLaTex /

Turns out the present toolchain doesn't produce a 100% perfect font. More precisely, it would appear the resulting *.ttf file is good enough for TeX Live 2014, but may cause

Segmentation fault (core dumped)

or a less-than-obvious notice about some 'internal error 11'. The solution is to use [FontForge]() to read in the font file and write it out again; for details, see the answer to 'How to validate a font to be used with XeLaTeX, fontspec' on tex.stackexchange.com. A minimal FontForge script to do this repair would be

#!/usr/local/bin/fontforge -lang=ff
# Note: the above is for a Homebrew-installed FF on OSX
# use /usr/bin/fontforge on most Linuxes.
Open($1);
Generate($1);

Installation and Command line syntax:

Installation is as easy as

npm install svgttf

in case you already have NodeJS. In case you haven't got it already, this is approximately what i did to get all of n (node version manager), node, npm, and svgttf installed on a fresh virtual machine that i had installed with Vagrant:

sudo chown -R vagrant:vagrant /usr/local
sudo apt-get install git make curl
git clone https://github.com/visionmedia/n
cd n
make install
n stable
curl -L http://npmjs.org/install.sh | sh
npm install svgttf
node svgttf/lib/main.js -f svgttf/art svgttf-sample-font svg /tmp ttf

Just saying this because it's great how simple installing things can be (in this case you do have to remember a few kitchen tricks, but i've seen worse procedures).

Once installed, use SvgTtf like this:

svgttf [-f] <input-directory> <font-name> <input-format> <output-directory> <output-format>

Caveat: binary currently not working, but this runs fine:

node svgttf/lib/main.js svgttf/art svgttf-sample-font svg /tmp ttf

Do

node svgttf/lib/main.js --help

to get some hints on what works in the current version.

What SvgTtf does

*SvgTtf turns ordinary SVG documents (that are structured as described below) into installable `.ttf` fonts.**

There's no need to buy and / or install a font editor in case the very reduced functionalities of SvgTtf are enough for your project. That said, FontForge (a free editor that is easily installed—OSX users can download a precompiled app; you need XQuartz for it to run) can be used to fill out the details in generated font files (with the caveat that you will have to repeat that process each time you've generated a new version of your font—but i believe there are command line tools to help you with that, too).

How SvgTtf does what it does

What SvgTtf does not do

How to structure your SVG design sheet, organize your workflow, keep on top of things and become a better person

In order to keep things simple, i have taken a few shortcuts when writing SvgTtf that match my specific needs, which means that SvgTtf lacks features like variable glyph widths or easily extended options. In fact, in this early version, you can only convert from SVG to TTF and you'll have to (fork and) edit src/main.coffee (or lib/main.js) even to make trivial changes such as changing the design grid size or the font's em size.

In order to get started with your own design, you may want to open svgttf/art/svgttf-font-sample.svg with a program of your preference and take a closer look; it's probably a good idea to use that file as a starting point for your own design sheet.

Here are some important points to be aware of:

Motivation

When wanting to design a font, there are a couple of things that have been really annoying to me for years:

So i've been using a (free, 30-days trial edition of) Adobe Illustrator which will expire soon and will fall back to Inkscape after that.

My workflow for some years has been like this:

1. I open the *.sfd (i.e. FontForge) file for the target font in FontForge, then

2. i open the design SVG file in the vector editor;

3. make changes to some shapes.

4. Then, for each new or changed outline: 4.1. open a 'transport' SVG file into which i paste the outline, one at a time; save it; then 4.2. change over to FontForge, double-click into the box of the codepoint where the next shape should appear, then 4.3. from the sub-window that opens, open the import dialog, where i navigate to the transport file and select it, whereupon 4.4. the preview for the new glyph appears.

5. i can now save the *.sfd and generate a *.ttf font file.

This process is as time consuming as it is boring and prone to errors.

All of the above i can now do with a single line from the terminal:

node svgttf/lib/main.js -f svgttf/art svgttf-sample-font svg /tmp ttf

BONUS: SVGTTF IN PRODUCTION!

And yes, i'm using SvgTtf in production. Here's a current session that shows off how SvgTtf reads a series of files, skips over files without outlines, and gives a fairly detailed report on the proceedings:

The result opened in FontForge:

These shapes i use to describe the structure of Chinese / Japanese / Korean ('Ideographic') characters; the part shown contains stuff i need mainly for such rare / strange / archaic / astral characters as 𧪺, 𦴞, 𠉙, 𧀍, 𢕉, 𥻔, 𠔇, 𠅂, 𠴿, 𢃵, 𡩪, 𥤅, 𤜓, 𤔬, 𤕋, 𥡼, 𦌖, 𦪴, 𦪺, 𦍛, 𪛄 and so on.

Here's the produced font in action inside my (forthcoming) 明快 MingKwai TypeTool (a.k.a. 'The Chinese Typewriter' after the ingenious invention of Mr. Lin Yutang):