Closed Ghustavh97 closed 4 years ago
Not sure.
To clarify, I don't see "distorted and weird", I see no knocked-out center on the 2nd one.
Obviously some difference between the output is resulting in an issue later on in your conversion pipeline. I opened both of your samples in Affinity Designer and they both look fine, so there's nothing obviously wrong with the SVGs.
I see that the node-potrace one has a viewBox
attribute? The two samples also have spaces in different spots throughout the path; I'm not familiar enough with SVG to know if that's an issue but it doesn't seem like it.
I would take this up with Webfont and see if someone there can tell what about your input is causing that issue. Otherwise it's a guessing game because there's nothing obviously wrong with the output from node-potrace.
Ya, "distorted and weird" was the wrong way to put it is just missing the inner cutouts.
I was just thinking that maybe somewhere during the porting process a few adjustments were made to the node version, since the output of this package does not match the output of the JS Port (The version used by the online demo).
I know you are not the one who did the port (just the maintainer, thank you for that by the way). But I was thinking maybe we should try and get the exact result that the JS Port produces here on node since its a port?
The port actually didn't change the output at all, it was just a code-packaging change, but there have been several subsequent patches and adjustments that altered the behavior.
I sympathize with your issue but I don't think we will be undoing all of those, especially since the SVG output seems fine. Rightly or wrongly, that ship has sailed. However, if we can identify what about the current output is producing that behavior, (if it is at all) then we can consider a fix.
My suggestion is to check with the folk(s) at Webfont, and/or play around with the node-potrace output (remove that viewport attribute, shift spaces around) and see if you can find a cause.
Ok thanks, I will see what I can do.
The key to the problem is the fill-rule attribute. Although the output of the Online Demo is fill-rule="evenodd"
, if it is changed to fill-rule="nonzero"
, the svg display remains unchanged. However, the output of Node-Potrace is fill-rule="evenodd"
. If it is changed to fill-rule="nonzero"
, it is the display effect after webfont. @tooolbox @Ghustavh97
On the surface node-potrace works fantastic, but it gets a bit complicated when I want to convert the traced svg icons into fonts. The online demo generates icons that are font friendly but icons generated by node-potrace icons are coming out distorted and weird when converted into fonts. They come out fine as svgs but are unusable as fonts.
I'm using Webfont to convert the icons to fonts and Fontdrop.info to preview the fonts.
potrace.trace()
default parameters
Examples
Source Image We Feed To Potrace
Online Demo
Resulting SVG
Resulting Icon As Font ✔️
Node-Potrace
Resulting SVG
Resulting Icon As Font ❌