Convert all glyphs of a font to individual SVG files
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 (
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.
What to look for gallery
• Image 01
FontForge – Execute Script selection from File MenuBack to Images
- • Image 02
FontForge – Add Script WindowBack to Images
- • Image 03
FontForge – Save Failed Window
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
Linuxbut this tutorial centres on
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
Macyou can use the shortcut ⌘ + . together (
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.
If you get a ‘Save Failed’ error (See Image 3), double check the path you supplied to the SVG folder and ensure that it is correct.
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.
%nadds the glyph name,
This is a quick, easy, free method of converting and exporting all glyphs into the desired
SVGformat 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.
// End of Article
- FontForge Website (fontforge.org)
- FontForge References Documentation (fontforge.org)
- Moby Font (1001fonts.com)
- TrueType Format Information (wikipedia.org)
- SVG Format Information (wikipedia.org)
- • Image 02