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 brothers, 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: from separate .svg image files, or from an existing color font setup. The latter can be either a layer font on different masters, or a CPAL/COLR font with indexed Color layers.
Option A: from SVG image files
If you have the SVG graphics available ins 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. 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>Paste it (Cmd-V) into a new window of a plaintext editor of your choice, such as TextMate, SublimeText, or Atom.
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. 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
You can depart from a layer font on multiple masters or from a CPAL/COLR setup with indexed layers (a.k.a. Microsoft color font).
In the case of CPAL/COLR: Follow the steps of the tutorial. Make sure you have Color Palettes set up in the Custom Parameters section of File > Font Info > Masters, and numbered Color layers in the glyphs, i.e., Color 0, Color 1, Color 2, and so on.
In the case of a layer font: Follow the steps of the tutorial. Make sure you have set your colours with the Master Color parameter in File > Font Info > Masters.
Once you are done with your setup: 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:
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
Update 2017-01-20: Added Microsoft Edge to the list of supporting browsers.