Making an SVG font from command-line / Python script

[myselfhimself]

Hello, Thank you for putting up this nice project! Here are questions to check if your tool could fit my pipeline... Would you mind share some insights?

I am looking for the simplest way to create a scalable graphics font from SVG files. The output can be SVG open-type if people love it, but I will start caring about .ttf first (exportable from opentype for sure), or anything that Inkscape or LibreOffice can use back as a font for text editing.

My svg files do not require any super-imposition, contrary to your advanced A + dots + shadow example showcased in the README.

My svg files are automatically generated .png files for now, but I will trace them to SVG in a scripted way some time soon. They can be seen (the greyscale ones) here: https://github.com/labonneimpression/pix2chocolate/#example-3---multiple-letter-chocolate-biscuits For now the only "fast" tool for assembling a list of 1-character-svg files into a font seemed to be https://github.com/nfroidure/gulp-iconfont/ but I have stumbled upon your project. Gulp-iconfont is getting slightly unmaintained and comes from the JS world, while my scripts's stack is more Python oriented, hence my interest for opentype-svg. In Gulp-iconfont, individual SVG filenames must be like: uUNICODEVALUE-*.svg (as visible here). I have not understood the naming that should be used for opentype-svg to work. The README states:

The tool requires the SVG files to be named according to the glyphs which they are meant to be associated with. For example, if the glyph in the font is named ampersand, the SVG file needs to be named ampersand.svg.

Is it a matter of filenames only or of node ids or other attributes within the SVG XML content? What should filenames be for letters a,b,c,é etc. ? a.svg, b.svg, c.svg, é.svg?

Thanks in advance!!! :)

[frankrolf]

What should filenames be for letters a,b,c,é etc. ? a.svg, b.svg, c.svg, é.svg?

Those file names would follow the usual naming scheme for glyphs, indeed being a.svg b.svg c.svg – and eacute.svg. For more info, see https://github.com/adobe-type-tools/afdko/blob/develop/docs/MakeOTFUserGuide.md#glyphorderandaliasdb-goadb and https://github.com/adobe-type-tools/agl-aglfn/blob/master/aglfn.txt

For upper-/lowercase handling, see here: https://github.com/adobe-type-tools/opentype-svg/blob/983f7535ebcd00d2bcb4a4e51e77f041322909e3/lib/opentypesvg/utils.py#L111-L123

[frankrolf]

I am looking for the simplest way to create a scalable graphics font from SVG files. The output can be SVG open-type if people love it, but I will start caring about .ttf first (exportable from opentype for sure), or anything that Inkscape or LibreOffice can use back as a font for text editing.

It seems like you don’t really need much of the functionality provided in this script here, since you don’t require super-imposition (as stated). (Simple) SVG files are also just vector outlines – you can create both TTF and OTF files from them. However, it sounds like you’d be better served with a dedicated font editor (https://fontforge.org/en-US/ is an open source option) – that editor will not just help you wrap your drawings together in a font “container”, but can also help handling the spacing, metadata, etc.

[myselfhimself]

Hello

I really thank you for pointing out the characters codes that are compatible for file naming with your software.

I would like not to use fontforge because it does not exist as a package on pypi.org . I prefer not to have to build it by hand. An alternative to your package would be https://github.com/nfroidure/gulp-iconfont/ which I could git clone or npm install... but it is not a Python package and is not really maintained anymore.

My goal is to have a tiny tool with almost no manual action (fontforge would allow to make a font with drag and drops or a few hundred clicks to import svg files and assign them to glyph codes), and which I could run headless in a Docker image, Github Action or so... I would not imagine much manual actions, just from the blender3d side (I set up a rig scene with a camera, a heightmap or other true 3d letters generation) maybe or just command line parameters in my parent script.

This way I could generate many fonts from variations of 3d rigs or input scalar parameters or 2d parameters (svg rig).

Let me come back to you with a tentative font with the new information which you have kindly provided. Maybe your library is too featureful for what I want... but it seems like it would come in very handy for what I want.

Keep in touch!

[miguelsousa]

@myselfhimself This repo is mostly about adding SVG files to an existing font, thus the requirement for the font's glyph names and the SVG's file names to match.

If I understand correctly you want to make a font from of a set of SVG files. This particular repo won't help you with that.

But this one will. Have a look at make_bw_font.py. This script generates an OpenType-CFF (.otf) font out of black-and-white SVG files plus some other metadata. To create the font in TrueType format instead you'll have to change the calls to fontTools.fontBuilder. Alternatively, you can use otf2ttf.

[myselfhimself]

@miguelsousa thank you for advising on this other project and bw font script. In terms of dimensions, should my SVG files just be square (eg. 300x300px)? I see many filenames in uNNN.svg . My focus is not emojis for now but simple characters for now; should I find the unicode hex value of each of my chars for naming each corresponding svg file (ie. find that for a, for b, c etc..), or just for non special characters (ie. accents, accented chars and punctuation) ? Should any metadata info (tags, attributes..) be embedded into the SVG, or are just the square dimensions + file naming sufficient? I have tried to understand more the script, but it is quite big.. Sorry for not having test yet, before writing here. A good news is I now have SVG files for any characters. Few are here now: https://github.com/labonneimpression/pix2chocolate/tree/master/generated