Correct Scaling of Glyphs

[Daniel Kuschny]

Hi everybody. 

I currently try to create an own Icon-WebFont for my music notation application. For this I created my glyphs using Inkscape. My setup is like this:

• The Document Size is 92x92px
• Each layer contains a single glyph
• My baseline is on y=46px
• All glyphs are aligned on x=0 
• All glyphs are correctly sized for my "default font-size" (12px)

My goal is to keep this glyphs in exact that size. Let's assume I have a 1px height / 30px width line glyph placed on the baseline. If i create a div and position it absolutely on y=100px x=100px on the screen the baseline should be on 146px. Therefore there should be a 1px height line visible from x=100px y=146px to x=30px y=146px. 

But if I upload my glyph SVG files to the IcoMoon App they will be way smaller in the resulting font. I uploaded one sample glyph to this post. Maybe somebody can give me some hints how to achieve my goal. 

[Keyamoon]

I made a pen here: http://codepen.io/anon/pen/aeHsJ

I have added a gray background so that you can see the glyph boundaries. Everything seems fine to me.

I imported your SVG to IcoMoon and selected the icon. In the font tab, under preferences, I changed the baseline height to 50%. Finally, I simply set the font-size to 92px in CSS.

[Daniel Kuschny]

I am really wondering how my uploaded size relates to the final size. It seems like I have to set my font-size to the size of my uploaded SVG to actually get the original size. 

What settings did you use for the Font metrics? And how does the "Em Square Height" setting affect the scaling? Does this settings scale the path data or does it simply expand/crop the area around the path?

[Keyamoon]

The size of your SVG doesn't matter. Since SVGs are vectors, they can be scaled to any size. IcoMoon doesn't crop your image, it simply scales your SVG's canvas and the glyph inside it together.

Em square height is the size your SVG (canvas + shape inside) will eventually be scaled to in the font. But it also doesn't matter much, because glyphs are stored as vectors in the font and therefore they can be scaled to any size.

[Daniel Kuschny]

I know that in terms of display the size of the SVG matters, But the canvas size of the SVG matters in terms of scaling. And that's exactly my problem: there are no infos about how IcoMoon will rescale the uploaded size after exporting the font. Especially if you have options like the em square rectangle. 

In my case: I upload a 92x92px svg and export a new font with an em square height of 512x512px. If I choose font-size:12px in my CSS: how big will be the glyph then? 

I currently think (after your sample) that a font-size of 92px will result in a "92x92px glyph viewport" and therefore it will also be 92x92px glyph in size like my initially uploaded svg. But at this stage of understanding I do not know how to take the em square height into account. 

Thanks for your patience

[Keyamoon]

If you read my previous comment, I mentioned that the size of your SVG does not matter. SVGs are vectors and their size doesn't matter. You don't even need to worry about the em square height. In your example, if you set your font-size to 12px, your glyph will also be 12px. Whatever font-size you set, that's the size you will get. And IcoMoon doesn't crop your original SVG. So as an example, if the shape inside your canvas has a height of 20px and your canvas has a height of 40px, by setting a font-size of N px, that canvas would be rescaled to N px, and the shape inside would be N/2 px (because it was 20px, rather than 40px.)

[Keyamoon]

The em square height doesn't change anything. You don't need to change it. It's only useful for increasing the precision of your glyphs but has nothing to do with sizing. The size at which you use your font (using the font-size property in CSS, for example) determines the size of your end result.

If you unnecessarily increase the em square height parameter, your font would have a larger file size. So I'd recommend leaving it at 512 unless you have some very complicated glyphs with many points.

[david.v...@gmail.com]

I de just get a similar issue, and solve it with one consideration,
be careful : Inkscape coordinates mode is inverted from svg native on Y axis. ie. svg.Y++ => down , InkScape.Y++ => up.

So my way was drawing a square {x=0,y=-1000, width = 1000, height = 1000} and draw all my glyphs into that square

cheers.

[Keyamoon]

Could you provide a sample SVG that causes this issue? I mean an SVG without using your workaround. This would help me reproduce this problem and fix it so you won't have to use that square workaround. You can attach your SVG here.

[david.v...@gmail.com]

i use to follow this topic method before iconmoon: https://cleversomeday.wordpress.com/2010/02/09/inkscape-dings/

the fontstarter.svg within, is the template for creating fonts using inkscape.

I think it ll be difficult to fix it because that is an Inkscape specificity to work with inverted coordinates, a lead would be to match with some "sodipodi:" namespace into the tags (?) ...
by default, page size is set to 1000x1000 but if you make a glyph into it you ll not see the glyph in iconmoon. you ll see it with: path.Y-=1000

cheers