adobe-type-tools / opentype-svg

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

Is it possible to patch an existent font that has no SVG Table with `addsvg`? #21

Closed mateusfccp closed 3 years ago

mateusfccp commented 3 years ago

I built an icon font where some of the glyphs came incorrectly and I want to patch it.

I ran addsvg <folder> <font> as the documentation specified. The output was 1 SVG glyph was successfully added to BtgIcons.otf, giving the impression that the patch worked. Also, the size of the file increased a little, which means something really changed.

However, the glyph remains the same when I use the font. Am I missing something?

miguelsousa commented 3 years ago

Without more details I'm unable to say what the problem may be. I can have a look at the files if you're able to share them.

mateusfccp commented 3 years ago

Ok, I searched a little more and the case is the following:

The font I patched has no SVG Table (even if it is made from SVG files through a program called fontify). I discovered it by trying to dump the SVG table with dumpsvg.

When I patch a SVG in it with addsvg, the SVG table is created. I think the problem is related to UPM, as I discovered the font is actually patched, but the resulting icon is extremely small compared to the other icons.

I make a little research about SVG tables in OTF and this source is saying that having a different viewBox or width and height than the head.unitsPerErm may cause the scaling effect.

By looking the font with FontForge, both the original and the patched have 1000 UPM. However, even after I changing my SVG to have a viewBox="0 0 1000 1000" it will scale to the exact same proportion. I also tried to use the-kargument to ignore theviewBox`, but no success.

Do you have any idea how may I do it?

mateusfccp commented 3 years ago

For reference, the SVG I am patching (originally) is this:

<svg fill="none" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="m24 12c0 6.627417-5.372583 12-12 12s-12-5.372583-12-12 5.372583-12 12-12 12 5.372583 12 12z" fill="#d22d4b"/>
  <g fill="#fff">
    <path d="m12.0002 5.5c.7202 0 1.3.5798 1.3 1.3v5.2c0 .7202-.5798 1.3-1.3 1.3s-1.3-.5798-1.3-1.3v-5.2c0-.7202.5798-1.3 1.3-1.3z"/>
    <path d="m12.0002 15.8999c.7202 0 1.3.5798 1.3 1.3s-.5798 1.3-1.3 1.3-1.3-.5798-1.3-1.3.5798-1.3 1.3-1.3z"/>
  </g>
</svg>
miguelsousa commented 3 years ago

Here's what you need to do:

The artwork should now be able to scale to the full extent of the font's UPM.

If the artwork isn't showing with the exact size and position as you wanted, you can adjust the viewBox values; they represent min_x, min_y, width, and height, respectively.

Keep in mind that the artwork is drawn on a 24x24 canvas, so the values you use should not be significantly larger or smaller than 24. For example, to shift the artwork up you can change the second 0 to 20. The values don't have to be integers or positive.

mateusfccp commented 3 years ago

This worked, thanks!