Search code examples
python-3.xsvgfonts

SVG Glyphs to SVG/TTF/OTF Font


My goal is to create a font from SVG files that I will create using a GUI-based SVG editor (Affinity Designer).

I am trying to understand how font files (TTF/OTF) work, so please correct me if this is wrong. From my quick research, it seems font files are just XML tables with information on how to "draw" the individual glyphs of a font.

My question then is, how might I create a script that creates these font file types from a directory of SVG Glyphs?

I know how to iterate over the files in a directory, but what could I use to create these font file types? The docs for fontTools seem a bit over my head. I can only program in Python.

I don't expect a full process answer from anyone, but if anyone could point me in the right direction of resources, I would greatly appreciate it!


Solution

  • TrueType or OpenType font files are not XML; they are a binary file format that begins with a directory of tables followed by several different tables with different types of information needed for the font to work. For example, every font must have a "horizontal header" table that provides metric information for use in horizontal text layout, such as ascender and descender distances; and every font must have a character to glyph index mapping table that specifies for each supported Unicode character what glyph to use by default.

    The different types of data tables are all identified with a four-byte tag, and are referred to treating the bytes as ASCII characters. So, using the two tables mentioned above, the horizontal header table uses the tag 'hhea'; the character to glyph index mapping table uses the tag 'cmap'.

    OpenType fonts can support monochrome glyphs or polychromatic ("colour") glyphs. Since you mention SVG, I assume you want to make a colour font.

    OpenType supports colour glyphs using different formats, each of which has a dedicated table format/tag.

    • bitmaps: for historical reasons, there are actually two different table formats: the 'sbix' table, which is used mainly by Apple; and the 'CBDT' table, which is used mainly by Google.
    • layered glyphs (vector): the 'COLR' table defines each colour glyph as an array of glyphs, each with a separate color, in a layered stack.
    • The 'SVG ' table defines each colour glyph using an embedded SVG document.

    Naturally, for your situation, the 'SVG ' table seems the most applicable. Note, however, that it isn't supported in all platforms or applications. Microsoft Windows has support for all four of the formats mentioned above; Android, on the other hand, doesn't support the 'SVG ' table. On Windows, older versions of the Edge browser supported colour fonts that use the 'SVG ' table, but the more recent Chromium-based versions do not. The 'SVG ' table was originally proposed by Adobe and Mozilla, and so Adobe apps and Firefox are contexts in which you can count on it working.

    Creating a colour font using the 'SVG ' table is not as simple as collecting a set of SVG docs and compiling them into an OpenType file with an 'SVG ' table. There are other required tables to make it a functional font. There are tools you can use to add an 'SVG ' table to a functioning font; for example, see Microsoft's OpenType SVG Font Editor. And there are tools for creating fonts from scratch that provide support for the 'SVG ' table; for example, see High-Logic's FontCreator.

    You probably want to get a bit more familiar with the OpenType format: see OpenType Specification for the current version of the spec; and see SVG — The SVG (Scalable Vector Graphics) Table for details on the 'SVG ' table—in particular, note the parts of SVG that are not supported, or that are not recommended for implementations to support (hence not widely supported).

    Also worth mentioning is that a new version of the COLR table is being developed that will add a lot of the capabilities of SVG to the COLR table. (The original was version 0; the new version is version 1.) A key benefit for apps of COLR v1 table over the 'SVG ' table is that COLR v1 is a binary format and does not require XML and CSS parsers to use; and a key benefit for fonts is that COLR v1 is far more compact (smaller font files) than the 'SVG ' table. The published OpenType spec doesn't have this yet (there will be an alpha for the updated spec soon), but you can see the complete proposed spec (in the form of proposed revision to an ISO standard) here.


    Addendum:

    OpenType 1.9 was released in December 2021 with COLRv1. OpenType 1.9.1 will be released soon with some clarifications for COLRv1 as well as a revision in the way sweep gradients are handled.

    The Google Fonts team developed nanoemoji, a Python library that can be used to build colour fonts using COLRv1 (or other types of colour fonts). To build COLRv1 fonts, it use a collection of SVG files as the source artwork.