search

adobe-type-tools / opentype-svg

Tools and sample files for making OpenType-SVG fonts
MIT License
212 stars 17 forks source link

Generated SVG-glyphs appear 1 line height below original #25

Closed ideogram closed 2 years ago

ideogram commented 2 years ago

(disclaimer: this might be either a bug or a flaw in my work flow).

I want to create SVG glyphs for 100+ glyphs from the WorkSans-Thin font from Google Fonts.

opentype-svg generates for me hundreds of SVG files using font2svg. I edit these glyphs one-by-one using Illustrator and save them. Subsequently, I add these SVG to the original font using addsvg. When I install the font on my system and generate sample text, I notice that the text has shifted one line downward. (Apart from that, the tools work wonderfully!)

EDIT: steps to reproduce:

  1. Any font will work, in these screenshots I used: 'https://www.dafont.com/milky-coffee.font'
  2. Run fonts2svg -c ff00cc 'Milky Coffee.ttf' (color argument only for easier debugging)
  3. Run addsvg SVGs 'Milky Coffee.ttf'
  4. Result in Finders' preview: image
  5. Open and save every SVG in Illustrator. (I used an 'action' in batch-mode to do this, and changed the stroke to black and the fill to white).
  6. Run again addsvg SVGs 'Milky Coffee.ttf'. Result in Finder: image
  7. (Note how all the characters have shifted down). This is not only in Finder, it also happens in Mac's FontBook and in the display of the font when used in Illustrator).
miguelsousa commented 2 years ago

Hi Maarten! Let me start by saying that you're not doing anything incorrectly. The reason why you're not getting the expected results is because, when the files are saved by Illustrator, "behind the scenes" the SVG artwork is repositioned on the canvas.

Before I list the additional steps you'll need to do to work around this problem, let mention two things you need to be aware of; they are meant to give you a better understanding of what's going on "behind the scenes", and hopefully will help you come up with a better workaround.

1. The SVGs created by fonts2svg have a viewBox parameter

The font coordinate system is different from the SVG coordinate system. In the former the y-axis points up, whereas it points down in the latter.

coord_sys

The difference in the coordinate systems is not a problem per se. However, because the ultimate goal is to have the SVG color artwork in the same location as the font's black-and-white glyphs, it means that it's necessary to place/draw the SVG artwork in the quadrant where the SVG's y-coordinates are negative. And that's precisely how the fonts2svg tool writes the SVG files.

So why is the viewBox parameter necessary?

By drawing the SVG artwork in the top-right quadrant, we're placing it exactly where it's needed by the font — remember that the SVG markup will be embedded as-is into the font's SVG table.

But if you were to preview the K.svg file without the viewBox parameter, this is what you'd see: only the portion of the artwork that is within the bottom-right quadrant, which is not that useful, right?

K_without_viewBox

So, to bring the top-right quadrant into view, the fonts2svg tool adds the viewBox parameter to all SVG files. Later on, the addsvg tool ignores this parameter when adding the SVG artwork to the font.

In sum, the viewBox parameter is only temporarily added to enable previewing the SVG artwork (outside of the font).

K_with_viewBox

2. Editing the SVGs with Adobe Illustrator

Opening the SVGs

When you open SVG files that don't have the viewBox parameter in Illustrator, you'll notice that most of the artwork is outside of the canvas. This is expected, and necessary.

K_Ai

Saving the SVGs

There are two ways to output the modified SVGs from Illustrator:

  1. Export > Export As...
  2. Save As...

You must use the "Save As..." option. If you use the "Export As..." option the location of the artwork in relation to the canvas will not be preserved.

Another important thing is the SVG Options dialog. Make sure you select Presentation Attributes for the CSS Properties option. The remaining options you can leave as-is, I think.

SVG_Options

Additional steps

You'll need to do the following additional steps after your step 2.:

This is the markdown of the K.svg file after I made the steps above. (The only edit I made in Illustrator was to change the fill color from magenta to blue)

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.4.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 -1000 1000 1000">
<path fill="#0013FF" d="M256-255c-3.33,24.67-6.5,47.5-9.5,68.5s-6.83,42.17-11.5,63.5c-2.67,16.67-6,33.33-10,50s-8.67,33.33-14,50
    c-7.33,20.67-18,39-32,55c-15.33,17.33-34.67,28-58,32s-45.33,0-66-12c-15.33-9.33-26.67-21.5-34-36.5S11-15.67,13-33
    c6.67-45.33,12.67-92,18-140c3.33-20.67,5.83-41.33,7.5-62s3.83-41,6.5-61c4-45.33,6.17-90.33,6.5-135s-0.17-89.67-1.5-135
    c-1.33-22-2.5-44.17-3.5-66.5S44.67-677.33,44-700c-1.33-16,3.67-31,15-45c7.33-8.67,15.83-15.17,25.5-19.5s19.83-6.33,30.5-6
    s20.83,2.83,30.5,7.5s18.17,11.33,25.5,20c5.33,7.33,10,15.17,14,23.5s7.33,16.5,10,24.5c13.33,32,23.83,64.17,31.5,96.5
    S241-533,247-499c0.67,2.67,1.67,7.33,3,14c0.67,0,1,0.33,1,1c0,1.33,0.33,2,1,2c8.67,2,15.33,1.17,20-2.5s9.33-8.17,14-13.5
    c32-37.33,64.33-74.5,97-111.5s64.67-74.17,96-111.5c12-13.33,25.5-22.5,40.5-27.5s30.5-5.17,46.5-0.5c15.33,4,28,12.17,38,24.5
    s15,26.17,15,41.5c0,9.33-1.17,18.5-3.5,27.5s-4.83,18.17-7.5,27.5c-2,9.33-7,18.67-15,28c-29.33,44-59.33,86.83-90,128.5
    S438.33-390,401-352c-1.33,1.33-2.67,2.67-4,4s-2.67,3.33-4,6c1.33,2.67,2.83,5.17,4.5,7.5s3.17,4.5,4.5,6.5
    c12,15.33,23.83,30.33,35.5,45s23.83,28.67,36.5,42c10.67,11.33,22.33,21.5,35,30.5c12.67,9,24.67,18.5,36,28.5
    c6.67,5.33,13.17,10.33,19.5,15s12.17,9.67,17.5,15c12.67,16,17.67,33.17,15,51.5S584.33-67,567-55c-15.33,10.67-31,16.5-47,17.5
    s-32.67-1.17-50-6.5c-15.33-5.33-29.33-11.83-42-19.5S402.67-80.33,390-91c-21.33-19.33-40.83-40-58.5-62s-34.83-44.33-51.5-67
    c-3.33-5.33-6.83-10.67-10.5-16S261.33-247.67,256-255z"/>
</svg>

And here's a preview of the font with a customized K artwork.

blue_K
ideogram commented 2 years ago

Thanks for the elaborate answer, I think this answer is a valuable reference for others who will be using these script is the future.

So, the problem lies mostly in Adobe Illustrator repositioning the artwork on the canvas. And, the canvas is de facto the viewBox.

Now I know this, I can work around it using either Illustrators' actions in Batch mode, invoking some extra Python scripts myself and/or just leaving the glyphs with their baseline on the y=0 position, sitting just on top of the viewBox.

Thanks again!