Option for size of grid

[Ser-Gen]

Plugin should have an option to control a size of grid for icon.

I have various icons with different sizes of grid. Some of them looks blurred with default settings.

For example, grid may be defined in name of file:

home{g:16}.svg
next{g:24}.svg

[twolfson]

I don't fully understand what you would like to do. Can you elaborate further on what you mean by grid?

[Ser-Gen]

When icons are composed, their shapes usually lay on grid to look sharper.

This metric can be defined in icomoon web-app in edit window. .

Also, you can read about it in this and that articles.

[twolfson]

The grid is only for editing purposes, it is not part of the SVG itself. If you would like to have more crisp SVGs, then you must open them inside of your SVG editor and increase the size. That way, you can use a more granular grid (e.g. GitHub increased the size to 2048px and used a 2048px grid).

[Ser-Gen]

Grid is not just for editing.

For example, when I create a font with icons composed on grid 16×16, I must use font size that corresponds that grid size: 16px, 32px, 48px etc. Only with this sizes my icons will be crisp.

As I mentioned before, my icons are designed with various grid size: 10×10, 16×16, 24×24. But right now I can not to set grid size from config of your plugin. Because of this icomoon app using standard size of grid — 16 — and only corresponding icons looks great, others blurred.

[twolfson]

Please stop making assumptions about icomoon somehow making your SVGs more accurate. These are vector graphics, they are mathematical formulas that can only be as accurate as the file you upload (e.g. 2.0 vs 2.000). We can make the generated SVG have a higher level of accuracy by increasing its size which is what I (and your articles) have been alluding to (e.g. the SVG's height/width/viewbox).

To prove my point, I took the TV icon from icomoon, adjusted the grid size, and output the font. Then, I compared the font files. They are all the same except for some random bytes. I verified these bytes are random by re-outputting the 16px flavor and seeing that the same bytes had changed.

icomoon-16.zip

icomoon-16-2.zip

icomoon-32.zip

[Ser-Gen]

Sorry, maybe I can't speak English well enough to understand where we have misunderstood here :)

Well, that TV-icon is for grid ×16. In turn, I took the icon with the size of 10×10, this icon is for font sizes 10px, 20px, 30px etc. A size of grid for this icon must be equal 10.

I have used default settings, then have set wrong size of grid and then have defined correct size of grid:

Only the latest version gave a crisp result.

All files you can download here.

[twolfson]

The reason the result is crisp is because the browser is scaling the SVG icon. I am attempting to explain that the problem of scaling lies with the source SVG; the input height must be close to the output height you expect or the browser will not scale as nicely. The input height can be adjusted via the height of the SVG itself. icomoon cannot make an image more accurate or scale it any better than a browser.

[Ser-Gen]

the browser is scaling the SVG icon

No, in my example the browser is scaled an icon of a icon font. Only one thing helps me to make an icon crisp — correct size of grid in options of an icon.

the input height must be close to the output height you expect or the browser will not scale as nicely

Yes, and the height of input in this situation is equal — 10×10. I have used this icons with font size 10px. Same file is used to make icon fonts with various grid size. But wrong definition of size of grid could lead to blurred icons in font after generation.

Also, you can read about it in icomoon docs.

[twolfson]

Ah, I have found our layer of miscommunication: icomoon already has the grid precalculated for all of its internal icons

You don't need to worry about grid sizes when using icons from IcoMoon's library. But if you're importing your own vectors, you need to set the grid size manually.

I am open for supporting this feature but am currently on break and only taking on maintenance tasks. Please feel free to open a PR that adds this functionality to icomoon-phantomjs.

[Ser-Gen]

Fine! I'll see what I can do.