Help with the creation of an OTF-SVG

[00sapo]

I am opening this issue only because I think you can really help me with this problem. Basically, I have an SVG an OTF font and I want to attach the SVG to the font programmatically. For this, I'm using opentype-svg and fonttools, but the final font contains badly scaled glyphs.

Here the problem is explained in more details. Here is the source code for reproducing the issue: Archive.zip

1. Dummy Font Creation

First, I create a dummy font having dummy glyphs. In this example, only the glyph a is created. For this, I use fontforge.

To run the script, install fontforge and python and run fontforge -script example_dummy.py. A file named DummyFont.otf will be created. It's also attached in the zip.

2. Attaching SVG Files

The second step is to attach SVG files in the SVG table of the font. As suggested by opentypesvg tool, I remove both widht and height, as well as the viewport property of the <svg> tag. The problem is that the SVGs are not rescaled properly. In both LuaTeX and Inkscape, they appear to have a small size compared to the glyph viewport. Below are two screenshots of the result.

To run the script, run pip install opentypesvg fonttools and then python example_svg.py. A file named DummyFontSvg.otf will be created. It's also attached in the zip.

3. Result

Terminal output: (note that SVG and font have the same viewport and that font is correctly validated by fontforge)

Inkscape: (the green background is the text-selection color of one character, it shows the maximum size a glyph can have)

LuaLaTeX PDF:

[miguelsousa]

Hi Frederico,

To assemble the OT-SVG font you're using your own scripts, as opposed to using the ones provided with opentype-svg, so my ability to help you is limited.

I also don't know how well Inkscape or LuaLaTeX PDF support OpenType-SVG fonts. It's possible that the issues you're facing are caused by bugs in those applications, rather than problems with your font.

Having said that, I'll mention a few points that might help you with your project:

• To create the base font, you can use FontTools' FontBuilder
• In general, removing the viewBox, width, and height parameters from the SVG file helps with fixing scaling and positioning problems. But this assumes that 1) the SVG artwork was designed at the same scale as the font's unitsPerEm, and 2) the SVG artwork is positioned on the canvas in a way that aligns with the font's origin coordinates (i.e. baseline and left sidebearing).
• When I delete the viewBox, width, and height parameters from your a.svg file and open it in Adobe Illustrator, I see the artwork way off canvas (screenshot below). The baseline of the a should be touching the top of the page, and the whole letter needs to be moved to the left, in order to be closer to the page's origin (see second screenshot, and notice the rulers).
• To fix the sizing problem, you either scale up the artwork to closely match the font's unitsPerEm value, OR you reduce the font's unitsPerEm value to more closely match the size of the SVG artwork.

[00sapo]

Thank you so much. I still don't have a clear rule to follow for rescaling the images, but your words pointed me towards a rule of thumbs that works in my case. I managed to obtain a meaningful size by transposing and rescaling the SVG using a transform attribute and then applying the transform attribute to each inner object using an Inkscape extension (without using Inkscape, actually, only its python extension module inkex)

[miguelsousa]

cross-linking: https://github.com/fonttools/fonttools/discussions/3229