-
Notifications
You must be signed in to change notification settings - Fork 286
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Seti Icons seem badly rendered #401
Comments
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. |
I think this is the same issue as reported on #397. |
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... |
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:
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: I then pushed this through svg2ttf:
Opening the output from this in Birdfont: So the next step will be to open a bug against svg2ttf I suppose... |
Hi! Problem is that you create SVG font with very small glyph dimentions (32x32). Increase it to 1000x1000 and everything became good. |
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. |
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:
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? |
I believe this issue has been resolved. Free free to re-open if you disagree. |
From @gmckeown on March 15, 2017 13:16
Steps to Reproduce:
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
The text was updated successfully, but these errors were encountered: