search

adobe-type-tools / opentype-svg

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

Exported SVGs are scaled and displaced #2

Closed RoelN closed 6 years ago

RoelN commented 6 years ago

When using fonts2svg.py, the SVGs are exported on 50% of their size, and shifted 50% on the Y axis:

mozilla_firefox

Left is SVG font, right is original. This is a test where I exported Roboto to black SVG glyphs, and imported them back to the same font using addSVGtable.py. The background colors were added in a test page for clarity.

This can be fixed by grouping all paths in a group with transform="scale(2) translate(0, -1024)" (where 1024 is half the font's UPM), but you probably have a better solution. Or am I doing something wrong in the export or import?

miguelsousa commented 6 years ago

Thanks for the report. It sounds like one or both scripts are not taking the font's UPM into account. I'll have a look. My preference is to not use SVG's transform if it can be avoided.

miguelsousa commented 6 years ago

@RoelN did you use Firefox in your test? I think it doesn't handle the viewBox attribute properly.

I tested 3 fonts with 3 different UPM values — 512, 1000, 2048 — and they all displayed fine in MS Edge. In Firefox only the 1000-UPM font displayed correctly.

RoelN commented 6 years ago

I did text in Firefox only, indeed. It now occurs to me other OT SVG fonts I worked with set no viewBox at all. Removing them from my test font built with fonts2svg.py shows the glyphs in the correct size, but another problem arises: the glyphs are now shifted down the Y axis one char-height:

high_readability_font_testpage

(Blue is a selection of the letters "Down t")

miguelsousa commented 6 years ago

That's expected. fonts2svg.py draws the contours in the bottom-right quadrant[1]. It does so to allow for easily previewing the SVG artwork. The viewBox is then used for shifting the artwork to the top-right quadrant.

I'll look into reversing the logic so that the SVG code that goes into the font does not require the viewBox parameter, while still retaining the easy previewing of the artwork. This approach may actually be a better default.

[1] the transformation of the coordinates happens at this line.

RoelN commented 6 years ago

Makes sense. Thanks for taking a look!

miguelsousa commented 6 years ago

@RoelN please test b669612. The fonts should display correctly in all browsers now. Reopen if they don't. Thanks!

RoelN commented 6 years ago

@miguelsousa Works like a charm! Thanks very much for picking this up so quickly! 🍰