Seti Icons seem badly rendered

[aeschli]

From @gmckeown on March 15, 2017 13:16

• VSCode Version: 1.10.2 and 1.11.0 Insider build (b9857a)
• OS Version: Windows 10 Build 14393.693

Steps to Reproduce:

1. Enable vs-seti icon set
2. Create a file with .sh extension (for example)

Icon is simply a grey square; the Seti icon set for Atom suggests there should be some detail displayed.

Here's an enlarged comparison with VSCode on top and the version from the Seti summary below:

And here's a rendering of the original Seti shell.svg using Inkscape:

Loading the seti.woff file (in eval version of FontCreator) shows the icons to be poorly rendered at larger sizes as well, which I assume is due to a problem converting from the SVGs to WOFF?

A selection of the icons as viewed in FontCreator:

Here's the C# Icon from the WOFF:

And here's the same icon from the original SVG (viewed in Inkscape):

Copied from original issue: microsoft/vscode#22667

[aeschli]

From @gmckeown on March 15, 2017 14:26

Digging a bit further, I assume you've used the seti.woff file from the atom-seti-icons project, which in turn takes them from the seti-ui project.

Seti UI uses a script that converts the good-looking SVG icons into font files, and it appears to be there that the problem occurs. This combines the icons and outputs them into five font files (seti.eot, seti.svg, seti.ttf, seti.woff, and seti.woff2).

Both the TTF and WOFF files have the disfigured glyphs. I don't have tools to open the WOFF2 and EOT formats directly. The seti.svg font file opens in FontForge and shows most of the icons correctly -- CSV and Shell are still missing their detail.

So, ultimately, this seems to be an issue with the conversion of the source SVG icons into a font-file.

[aeschli]

@gmckeown Thanks for the analysis. We're take the font directly from the seti-ui project.
I move the issue there in the hope they can improve the SVG to font conversion.

[gmckeown]

I think this is the same issue as reported on #397.

[jesseweed]

Interesting, I hadn't noticed it on mac. I'll have to take a closer look at it. It's likely an issue with the gulp plugin that is doing the svg to font conversion. I'll try and see if I can find a fix.

Open to any pull-requests or suggestions in the meantime...

[gmckeown]

There seems to be more than one issue at play here.

You're starting with a bunch of SVG files, and these end up as a WOFF file via the following sequence:

SVG Icons -> SVG Font -> TTF Font -> WOFF Font

Though you're using gulp-iconfont, in terms of underlying tools this seems to be:

SVG Icons -> svgicons2svgfont -> svg2ttf -> ttf2woff -> WOFF Font

Not a Node developer myself, so muddled through installing Node and ran the icons through svgicons2svgfont:

svgicons2svgfont --fontname=svgtest -o _fonts/svgtest.svg icons/*.svg

The SVG font output from this (viewed in Birdfont) looks mostly OK -- the glyphs have smooth curves as they do in the original SVG files:

The CSV and Shell icons, however, are already mangled into black squares at this point. Here's the Shell icon:

So that's most likely a bug in svgicons2svgfont (or some incompatibility with the structure of the specific SVG image).

I then pushed this through svg2ttf:

svg2ttf _fonts/svgtest.svg _fonts/svgtest.ttf

Opening the output from this in Birdfont:

Here it seems svg2ttf is doing something very strange with the curves in the original glyphs.

So the next step will be to open a bug against svg2ttf I suppose...

[puzrin]

Hi!

Problem is that you create SVG font with very small glyph dimentions (32x32). Increase it to 1000x1000 and everything became good.

[gmckeown]

Full fix for both issues in pull request #406. Needs proper testing, and note that the file sizes of the fonts have increased due to the additional detail.

[gmckeown]

Have been playing around with this some more and found a weird issue where the fonts were being vertically offset in tabs. This seems to be caused by a stray path in one of the icons. Additionally, whilst doing this, I threw together an icon for PowerShell scripts (see below).

So I have a bunch of patches now that will do the following:

• Fix an out-of-bounds path in one icon that appeared to be throwing off the whole font normalisation process (and ultimately caused a vertical offset issue in tabs).
• Updates to the shell and CSV icons so that they display correctly in a single-colour font.
• Change to the gulpfile to increase the fidelity of the generated fonts.
• A new PowerShell icon (a bit basic, but IMO better than nothing) with updated seti.less and mapping.less files.
• A set of generated fonts with all of the above.

How do you want these submitted? Additional changes on top of #406, or individual pull requests for each item? One big replacement pull with individual commits?

PowerShell icon and filetypes:

[jesseweed]

I believe this issue has been resolved. Free free to re-open if you disagree.