nfroidure/svgicons2svgfont

Unclear documentation on 'round' option.

Closed this issue ยท 5 comments

Hi, I'm totally lost on what options.round actually is. After reading:

Type: Number Default value: 10e12 Setup SVG path rounding.

It explains it as "SVG Rounding" but since I'm unfamiliar with the term, I've googled this and it turns up no results. Then it provides an exponential value (10e12). What does that mean? Does this mean it provides better compression if you have a higher number since it will then begin rounding path vector values up/down by this amount? Is that a decimal place? etc.

Hi.

SVG is mostly about SVG paths. In this plugin it is handled by https://github.com/nfroidure/SVGPathData.

SVG path coordinates rounding is handled here: https://github.com/nfroidure/SVGPathData/blob/master/src/SVGPathDataTransformer.js#L54-L82

The round option intent was to provide a way to "compress" SVGs by rounding pathes.

It is the perfect example of an unused feature that is most of the case not useful and that has been done just because it was feasible ;).

Sorry -- I opened the issue because:

  • What started all this was that I noticed that one of my SVG's happened to be getting modified slightly (in a way that looked a bit like compression due to accuracy being off) and I had an inkling that this round option could have been the culprit.
  • An explanation was needed (maybe more digging would have revealed the information you provided, I apologize)
  • A PR could also potentially be submitted to update the README.md for simple folks such as myself ๐Ÿ˜

See before/after examples below. I still haven't quite resolved this yet, either (after changing it to 0, 10e10 and 10e20 just to see what would happen).

before after

Some questions based on my ignorance of how this works (which I will research myself, but noting here):

  1. Can (or should) this be disabled? e.g. Maybe not because of the decimal resolution may be limited in fonts?
  2. Why are the numbers so large?
  3. Does a larger number increase/decrease compression?

Thanks.

I think you should have had this warning: https://github.com/nfroidure/svgicons2svgfont/blob/master/src/index.js#L296-L300

Better playing with the height option instead of the round one.

@patricknelson and @nfroidure thanks! I fixed a similar problem using
fontHeight: 1000

Sorry for the late response @vddrift. I took another look at it and this is what I've got in my configuration (note the missing round and fontHeight options). Also worth noting that I'm using gulp-iconfont@8.0.1 and thus gulp-svgicons2svgfont@3.0.1 in case that makes a difference:

// ... mid-stream pipe, so stuff above/below are truncated...
.pipe(iconfont({
	fontName: fontName,
	formats: ['ttf', 'eot', 'woff', 'woff2'],
	normalize: true,
	timestamp: runTimestamp // Override the TTF font creation/modification date. From: https://github.com/nfroidure/gulp-svg2ttf#optionstimestamp
}))

And the output quality seems just fine. For me I think the key component might be normalize since without that, the icons are super tiny (probably due to the scaling of the original SVG images).