Seti Icons for shell and CSV mangled during conversion

[gmckeown]

The Seti UI project uses gulp-iconfont to convert SVG images to various font formats. Under-the-covers this appears to use svgicons2svgfont to do the initial conversion from the SVG images into an SVG font file.

A couple of the glyphs (CSV and Shell) are getting mangled during this conversion. Here's the shell icon viewed in Inkscape:

And here's the resulting icon after processing with svgicons2svgfont (viewed in Birdfont):

I used direct command-line invocation to test the conversion:

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

Original issue against Seti UI: jesseweed/seti-ui#401

[gmckeown]

Here's the info dumped when I installed the svgicons2svgfont module:

└─┬ svgicons2svgfont@5.0.0
  ├─┬ commander@2.9.0
  │ └── graceful-readlink@1.0.1
  ├─┬ neatequal@1.0.0
  │ └─┬ varstream@0.3.2
  │   └─┬ readable-stream@1.1.14
  │     └── isarray@0.0.1
  ├─┬ readable-stream@2.2.6
  │ ├── buffer-shims@1.0.0
  │ ├── core-util-is@1.0.2
  │ ├── inherits@2.0.3
  │ ├── isarray@1.0.0
  │ ├── process-nextick-args@1.0.7
  │ ├── string_decoder@0.10.31
  │ └── util-deprecate@1.0.2
  ├── sax@1.2.2
  ├── string.fromcodepoint@0.2.1
  ├── string.prototype.codepointat@0.2.0
  └─┬ svg-pathdata@1.0.4
    └─┬ readable-stream@2.0.6
      └── isarray@1.0.0

[nfroidure]

See jesseweed/seti-ui#401 (comment)

[gmckeown]

Hi, confused why this has been closed. There is a fix on that Seti UI issue, but it's for poor glyph definition when converting from SVG Font to TTF (i.e. in svgt2ttf). This issue is with conversion from SVG images to SVG Font (i.e. with svgicons2svgfont).

For what it's worth, I just tried;

svgicons2svgfont --fontname=testfont --height 1000 --normalize -o testfont.svg icons/*.svg

The Shell and CSV icons are still just black squares.

[gmckeown]

I have identified the reason for this issue. The icons in question were coloured squares with additional detail paths layered on top. During conversion, I believe these multiple colours are all merged to a single colour due to the nature of the font formats used. Hence the detail is probably still present, it's just the same colour as the background object.

I updated the source SVG icons so that the detail was cut from the base object rather than overlaid. This appears to have resolved the conversion issue.