When you look up SVG, you will find that it stands for Scalable Vector Graphics. So far, so good, but when we use the term in the realm of fonts, it can actually mean different things.
The SVG Font Format
Firstly, there used to be SVG as a webfont file format. Its file name suffixes were
.svg or the zip-compressed
.svgz. Forget about it right away, because it was only really supported by Safari on early iPhones. And luckily, it has become extinct. It was huge compared to other font formats, and it offered nothing but plain outlines. That means: no kerning, no hinting, and none of the other good things OpenType tables can provide. In other words, it was not even an OpenType font. Glyphs is an OpenType font editor, and therefore cannot produce SVG fonts like these.
This tutorial is not about the legacy SVG font file format.
The SVG OpenType table
The webfont file formats in wide use today are WOFF, and, slowly gaining ground, WOFF2. There is more to it of course, but in a nutshell, WOFFs are compressed OpenType fonts. Its desktop siblings, CFF/OTFs and TTFs, are also OpenType formats, both with their peculiarities and not as well-compressed as WOFF. What makes OpenType fonts OpenType fonts is their internal structure, which is a collection of so-called OpenType tables, and one of these tables can be the SVG table, containing SVG-based information. Fonts containing such an SVG table are sometimes referred to as OpenType-SVG color fonts or SVG color font.
This tutorial is about OpenType-SVG color fonts.
In Glyphs, there are two ways of getting SVG information into a font: (A) from separate
.svg image files, or (B) from an existing color font setup. The latter can be either a layer font on different masters, a CPAL/COLR font with indexed Color layers, or an Apple-style sbix font with iColor layers.
Option A: from SVG image files
If you have the SVG graphics available in separate files already, you can place them in the respective glyphs, and export a font with an SVG table. This method allows you to take full advantage of the capabilities of the SVG file format, including crazy stuff like vector animations.
To prepare, we recommend to save your .glyphs file in the location you desire, and create a subfolder called Images for the SVG files. This is because only the relative paths to the images are stored in the .glyphs file, and it is easier to keep them together when they are in a subfolder.
Now we need an example. If you do not have an SVG at your fingertips, I have one here for you. Let’s try a rotating red circle animation for the uppercase
O. Select and copy (Cmd-C) this SVG code:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="1000" viewBox="-400 -400 800 800"> <title>SVG animation using SMIL</title> <circle cx="0" cy="100" r="200" stroke="none" fill="red"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" begin="0s" dur="1s" repeatCount="indefinite"></animateTransform> </circle> </svg>
Then, save the file in the Images folder as
O.svg. So, in Finder, your whole setup may look like this:
Back in your .glyphs file, prepare the uppercase O. Open it in Edit view, and in the Layers palette, press the Copy button to add a layer copy, then rename it to
svg (all lowercase). When you are done, it should look like this:
Now here is the deal: Whatever you put in the master layer is the black-and-white fallback glyph, which is visible in applications that cannot display the color information stored in the SVG table. In case you were wondering, the master layer is the layer in bold text in the Layers palette, in our example the one named ‘Regular’.
But on the new
svg layer, you can drag and drop your .svg image file. It should be displayed right away. You will not see the animation, though. You can resize and move the image to your liking:
A note about spacing: the
svg layer inherits its width from the master layer, so you have to switch back to that one if you want to space your glyph. For our example here, it makes sense to set the width to 800, assuming that you did not scale or distort the placed SVG. To do that, click on the Regular layer in the Layers palette, then change the width in the grey info box to 800:
In any event, export the font as a webfont: File > Export > Webfont, use WOFF and WOFF2 as formats. CFF or TTF should not matter:
On the Mac, Firefox is the only browser supporting OpenType-SVG fonts. On Windows, Microsoft Edge supports it too. So these are the browsers you will have to have access to if you want to test your OpenType-SVG font. To that end, you can either drum up an HTML file containing the HTML and CSS code for displaying the WOFF, or you can run the Test > Webfont Test HTML script from the mekkablue script repository. This script creates an HTML file for the current font in the most recently used webfont export destination.
If you are not familiar with scripts yet, take a minute and go through the installation instructions in the readme of the scripts, install the scripts accordingly. Then, hold down the Option key while you choose Script > Reload Scripts (Cmd-Opt-Shift-Y).
The script conveniently opens the enclosing folder for you. All you need to do now is drag the HTML file onto the Firefox icon in your Dock (or right click and Open with > Firefox.app), type an uppercase O, et voilà:
Ta-daaa! But be careful, animations in fonts tend to be processor-intensive. It can make your computer fans go bonkers, and all mobile users will develop mixed feelings about you for draining their battery. You have been warned.
Option B: from an existing color font
Glyphs lets you take existing color fonts in various formats and export them as SVG. Setting up the color font in one of these source formats has the advantage that you can export both in the source format and SVG.
You have three choices:
- A layer font: two or more masters that fit on top of each other. The masters do not need to be compatible and have a Master Color assigned to them.
- A CPAL/COLR font: a font containing glyphs with
Colorlayers, with each layer linked to a color in a predefined color palette.
- An sbix font: a font containing glyphs with bitmapped images in various resolutions placed on
Look at the options, make your choice, and read on below to see how to add SVG export:
In the case of CPAL/COLR: Follow the steps of the tutorial. Make sure you have one or more Color Palettes set up in the Custom Parameters section of the first master in File > Font Info > Masters, and numbered Color layers in the glyphs, i.e.,
Color 2, and so on.
In File > Font Info > Instances, create a new instance for the font containing the SVG table. Give it an appropriate style name. Then add the custom parameter Color Palette for SVG to the Custom Parameters section of the instance, and set its value to the index of the desired color palette. If you only have one palette defined in the Color Palettes parameter described above, use
0 as value.
Then, add the custom parameter Export SVG Table and turn its checkbox on. If you want a pure SVG font, consider adding the custom parameter Export COLR Table with an unchecked checkbox.
In the case of a layer font: Follow the steps of the tutorial. Make sure you have set your colors with the Master Color parameter in File > Font Info > Masters.
In File > Font Info > Instances, create a new instance for the font containing the SVG table. Give it a style name like Regular or Multicolor or SVG or whatever makes sense for you. Then add the custom parameter Color Layers to SVG to your new instance, and make sure its Value is turned on:
In the case of sbix: Follow the steps of the tutorial. Create a new instance in File > Font Info > Instances, and add the custom parameter SBIX to SVG with the preferred iColor size as value. This will take the sbix pictures from the iColor layers of the same size index, and turn them into SVG graphics. E.g., if you specify 256 as value in the custom parameter, Glyphs will look for all
iColor 256 layers and turn those into SVGs.
If you want a pure SVG font, consider adding the custom parameter Export sbix Table with an unchecked checkbox.
Now export with File > Export > Webfont (Cmd-E). That’s it, nothing more to it. Test the font in Firefox as described above (see Option A).
More custom parameters
In File > Font Info > Instances (Cmd-I), in the Custom Parameters, you can add any or all of these three parameters:
- Export COLR Table
- Export SVG Table
- Export sbix Table
These are for controlling which color tables are generated and actually make it into the OpenType font, and which do not. To cut down on webfont file size, you may want to enable the export of one of the tables, but disable all the others. For instance, if you are using the method described in Option B to export an SVG table based on a CPAL/COLR setup, you may want to suppress the creation of the COLR table.
More about SVG
We have just been scratching the surface. To geek out on SVG and all its possibilities, dig into the specs and some sample code:
- Official SVG 1.1 Specification (W3)
- Official SVG table specs (Microsoft Typography)
- Roel Nieskens’ SVG test page Lapis legit (may still crash your browser, be careful!)
- Adobe TypeKit’s Color Concept Page containing some SVG fonts
- Adobe’s Help Page OpenType-SVG color fonts
At the time of this writing, the SVG table is supported on Firefox, Windows 10+ and Adobe apps.
Update 2017-01-20: Added Microsoft Edge to the list of supporting browsers.
Update 2018-03-26: Added sbix-to-SVG conversion.
Update 2018-04-14: Updated the SVG OS/app support, thx Behdad!
Update 2019-02-01: Corrected typos and replaced the word brothers with siblings. Thx Nathalie!
Update 2019-11-15: Better introduction to ‘Option B’.