SVG icons i different sizes

[Morten Lybech]

Hi

I got a problem with my SVG icons. 

I have 100 icons i would like to create to a font. 

I have all the icons in one document in illustrator - all in the right sizes. Then i create a SVG file for each icon, and cropping the artboard fitting the icon (not having any whitespace in the edges) - just like image 1. 

I'm able to import the icons, but when i generate the font, the icons comes in different sizes (not the same size as my SVG files) - see image 2. 

How do i get the icon to maintain their size when generating the font, without having any whitespace around the icon? 

Thx :) 

Image 1

Image 2

[Keyamoon]

Hi there,

Since SVGs are vector, it is their width/height ratio that matters. So if you would like your icons to come out the same size, you should use the same canvas for all of them. I usually use a square canvas for all my icons. By doing that, you would also be able to control the spacing of your font glyphs.

[Morten Lybech]

But wouldn't that give me whitespace for each icon - making it difficult for me to align each icon? Lets say all icon should align to bottom? Or all icons should me centered on a line? 

[Keyamoon]

Not necessarily. If you have an icon that its width is larger than its height, you can scale it so that it would take the entire width of the canvas. That way, your glyph won't have any extra spaces before or after it. And obviously you could align your icons to the bottom of the square canvas.

In general, for making a font, your SVGs' canvases should have the same height because that's basically how font glyphs are. They have the same fixed height while their widths may change. In fonts, the height of the glyphs is defined by the distance between the ascender and the descender. This space may be empty, but it's always there. For example, there is a lot of space above letter "c", while there is less space above letter "T". But in both cases, the height of the canvas is the same.

[Morten Lybech]

Okay - same height for each SVG file/icon, but the width can be various. But should the icons be aligned to top, center or bottom of the canvas? 

Is this right? 

[Keyamoon]

That looks good.

The vertical alignment is up to you, depending on how you would want them to align relative to text. In the font tab of the IcoMoon app, you can view your icons next to text. By changing the "baseline" of your font from Preferences > Font Metrics, you can control this alignment further. I would normally align my icons in the middle, just like you did.

[Morten Lybech]

Thanks a lot - i will try to see what the developers says to it - i'm a designer, but wanted to understand how it's done right - and how i make it easier for them.