Convert all glyphs of a font to individual SVG files

Introduction

We shall be using the Open Source package FontForge and utilising its scripting ability. Then in five simple steps you’ll export all glyphs from a font into individual Scalable Vector Graphic (SVG) files.

The font used in this example is the freely available Moby but any other font inc. Dingbats should, in theory work. I used TrueType format (.ttf) and know for sure that it is compatible.

The five required steps

Step 1. Download the Open Source package FontForge

Head over to the FontForge Project Homepage and select the version you need to work with (available for Windows, Mac and GNU+Linux but this tutorial centres on Apple Mac.)

Step 2. Create a SVG Folder to store the exported files

Create a folder somewhere sensible in your filesystem to store the exported files we’ll create in the following steps. Remember its name and location, you’ll need these later…

Step 3. Open the font file you’d like to work with

Upon activating the FontForge application you’ll be prompted to select a font file. Navigate to the individual file you’d like to work with and select it.

Step 4. Select ‘Execute Script’ from FontForge File Menu

Click on the File Menu and select ‘Execute Script’ from the dropdown (See Image 1.) If using a Mac you can use the shortcut ⌘ + . together (Command-Full Stop.)

Step 5. Click on ‘FF’ and add Script

This where the magic happens so I’ll break this down into smaller steps as there are some details that need attention.

• Step 5.1

IMPORTANT – Below the Script entry field click the ‘FF‘ button (See Image 2.) This indicates we are adding FontForge script syntax, not Python (or any other language.)

• Step 5.2

Copy and edit the script below into the ‘Execute Script’ window.

IMPORTANT – Make sure to change the path to your SVG folder from /full/path/to/svg/ to the correct path of the folder you created in Step 2.

SelectAll()
UnlinkReference()
Export("/full/path/to/svg/%n-%e.svg")

• Step 5.3

Click the “OK” button and that’s it. Now check inside the SVG folder you created in Step 2.

Your SVG folder should now have all the glyphs listed as SVGs

You’ll need to dig around a bit to find the files you need but… the hard work has been done for you.

In case you wondered what the script actually does

SelectAll() selects every available glyph in the font, for ease of use, leave this as-is. UnlinkReference() separates out individual glyphs, for more information see this documentation. %n adds the glyph name, %e encodes to SVG format.

In conclusion

This is a quick, easy, free method of converting and exporting all glyphs into the desired SVG format without having to muck about extracting data from a single file conversion. If you know of any better methods utilising Open Source applications please get in touch.