Creating an SVG color font

Tutorial
Color
by Rainer Erich Scheichelbauer
en es fr zh

20 July 2022 Published on 20 January 2017

Glyphs offers various ways to create an OpenType-SVG font. Read the following tutorial to know almost everything about it.

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.

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. Its filesize 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 deprecated legacy SVG font file format.

SVG OpenType table

The webfont file formats in wide use today are WOFF and 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 most commonly referred to as OpenType-SVG, sometimes as SVG-in-OT, or simply as SVG color font. The SVG table was mainly developed, and pushed, by Mozilla and Adobe. And occasionally, sou will see this logo for OpenType-SVG:

This tutorial is about such OpenType-SVG color fonts.

In Glyphs, there are three ways of getting SVG information into a font:

  • Option A: from external .svg image files, embedded on special svg layers.
  • Option B: from an existing color font setup. The latter can be either a layer font on different masters, a CPAL/COLR font, or an Apple-style sbix font.
  • Option C: natively from so-called Color layers.

So let’s delve right into it.

Option A: external 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>

Paste it (Cmd-V) into a new window of a plain text 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 plus button to add a duplicate of the layer, right click it and choose svg as its Layer Type from the context menu that pops up:

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 > OTF, use WOFF and WOFF2 as formats. CFF or TTF should not matter:

Not every browser supports OpenType-SVG. Consult the support section of this tutorial (see below) when you choose a browser for testing 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 scripts. This script creates an HTML file for the current font in the most recently used webfont export destination.

The script conveniently opens both the HTML in your default browser and its enclosing folder in Finder. 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:

  1. A CPAL/COLR font: a font containing glyphs with Color Palette layers, each of them linked to a color in a predefined color palette.
  2. A layer font, i.e., two or more masters that fit on top of each other. The masters do not need to be compatible, but need to have Master Color parameters.
  3. An sbix font: a font containing glyphs with bitmapped images in various resolutions placed on iColor layers.

Look at the options, make your choice, and read on below to see how to add SVG export.

Option B, choice 1: converting CPAL/COLR

Prepare: Read about Microsoft-style CPAL/COLR fonts. Make sure you have one or more Color Palettes set up in the Custom Parameters section of the first master in File > Font Info > Font, and Color Palette layers in the glyphs.

  1. In File > Font Info > Exports, create a new instance for the font containing the SVG table. Give it an appropriate style name.
  2. Add the custom parameter Color Layers to SVG.
  3. Add the custom parameter Color Palette for SVG 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.
  4. Finally, add the custom parameter Export SVG Table and make sure its value checkbox (the one on the right) is on.

Option B, choice 2: converting a layer font

Prepare: Read about layer fonts. Make sure you have set your colors with the Master Color parameters in File > Font Info > Masters.

  1. In File > Font Info > Exports, create a new instance for the font containing the SVG table by clicking on the plus button in the lower left corner, and picking Add Instance from the menu that pops up. Give it a sensible style name, like Multicolor or SVG or whatever makes sense for you.
  2. Add the custom parameter Color Layers to SVG and make sure its value checkbox (the one on the right) is on.
  3. Add the custom parameter Export SVG Table and make sure its value checkbox (the one on the right) is on.

Option B, choice 3: converting an sbix font

Prepare: Read about Apple-style sbix fonts. If you have multiple iColor resolutions, make sure you have all sbix images in the resolution you want for your SVG.

  1. Create a new instance in File > Font Info > Exports.
  2. 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:

Option C: native Color layers

First off, let’s be careful with the wording. Glyphs uses the expression ‘color layers’ in two ways. Firstly it refers to Microsoft-style CPAL/COLR layers. But then again, the term can also mean the native Color layers, new in Glyphs 3. In order to differentiate between the two, I refer to the latter as ‘native’ and spell ‘Color’ with an uppercase C, because that is how it appears in the Layer Type menu.

OK, enough blabla, let’s get going: switch a layer to layer type Color. This layer can even be your master layer. You do this by right clicking the layer in the Layers palette and picking Color from the menu:

If we have done it right, a little color wheel will appear next to the layer name in the palette:

Then, make sure View > Show Info (Cmd-Shift-I) is turned on. Otherwise you will not see the graphic options of the next step.

Now, start drawing. Add shapes like you are used to. There is one thing that is different now, though. In the lower right corner of the window, you will see an Attributes section for the currently selected shape:

You can add strokes and fills, and double click the respective color fields to pick a color. And do stuff like this:

In the palette, you can also add additional attributes through the plus button next to the word ‘Attributes’. Gradients, shadows, glows, you name it. But careful: not all of it is supported in a font. And even if it gets written into the font, it may not be supported by the app in which you use it. To be on the safe side, only use color fills and color strokes.

Before exporting, set up an instance in File > Font Info > Exports, and add the custom parameter Color Layers to SVG:

And you are good to go.

Custom parameters

In File > Font Info > Exports (Cmd-I), in the Custom Parameters of the respective instances, 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 one of the existing-color-font methods described above, namely based on a CPAL/COLR or sbix setup (see ‘Option B’ above), you may want to suppress the creation of the other tables. That way, you can have sbix-only, CPAL-only and SVG-only color fonts that load much faster.

Useful scripts

Henrique Beier’s Harbor Type scripts contain a script called SVG Export and SVG Import. It generates external SVGs from inside Glyphs with DrawBot, and reimports them for creating SVG color fonts.

Application support

At the time of this writing, the SVG table is supported on Firefox version 32 and later, Microsoft Word on Windows 10 and later. It is also supported in a few Adobe apps, namely Photoshop since CC 2017, Illustrator since CC 2018 and inDesign since CC 2019. And recently, even Apple started supporting SVG fonts: in macOS 10.14 Mojave and later, Mac apps (including Safari, TextEdit, Pixelmator, Sketch and Affinity Designer) should be able to display them properly. The same is true for iOS 12 and later, where ProCreate versions 4.3 and up can handle OpenType-SVG.

Again, be careful: just because an app or a system officially supports SVG, that does not mean that all features of SVG are supported.

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:


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’.
Update 2021-08-20: update for Glyphs 3, added Option C and Useful Scripts, updated and reordered Application Support. Added Color fonts! WTF? link.
Update 2022-07-20: updated title, related articles, minor formatting.

Related articles

See all Tutorials →