Skip to content
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

node-potrace results are different from online demo. #7

Closed
Ghustavh97 opened this issue Apr 19, 2020 · 5 comments
Closed

node-potrace results are different from online demo. #7

Ghustavh97 opened this issue Apr 19, 2020 · 5 comments

Comments

@Ghustavh97
Copy link

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.

  • Function i'm using: potrace.trace()
  • Function parameters: default parameters

Examples

Source Image We Feed To Potrace
Source Image


Online Demo

Resulting SVG

<svg xmlns="http://www.w3.org/2000/svg" id="svg" version="1.1" width="500" height="500"><path d="M262.500 22.903 C 260.300 23.925,256.873 26.503,254.884 28.631 C 246.083 38.046,45.363 279.860,43.774 282.961 C 40.413 289.520,42.061 300.220,47.298 305.834 C 48.509 307.132,51.300 309.163,53.500 310.347 C 57.492 312.495,57.677 312.501,141.750 312.782 C 216.220 313.032,226.000 313.241,226.000 314.580 C 226.000 315.413,221.965 348.361,217.034 387.798 C 207.167 466.704,207.278 464.242,213.271 471.513 C 220.382 480.139,234.177 481.418,242.374 474.212 C 246.333 470.732,454.516 220.376,456.226 217.039 C 459.587 210.480,457.939 199.780,452.702 194.166 C 451.491 192.868,448.830 190.949,446.790 189.903 C 443.229 188.077,439.672 188.000,358.540 188.000 C 274.013 188.000,274.000 188.000,274.000 185.952 C 274.000 184.826,278.035 151.639,282.966 112.202 C 292.833 33.296,292.722 35.758,286.729 28.487 C 280.911 21.429,270.724 19.081,262.500 22.903 M234.924 160.633 C 228.141 214.833,228.143 214.677,234.191 221.564 C 240.661 228.933,235.139 228.444,318.126 229.000 L 392.753 229.500 326.255 309.295 C 289.681 353.183,259.576 388.910,259.355 388.689 C 259.134 388.468,261.709 366.273,265.076 339.367 C 271.859 285.167,271.857 285.323,265.809 278.436 C 259.339 271.067,264.861 271.556,181.874 271.000 L 107.247 270.500 173.745 190.705 C 210.319 146.817,240.424 111.090,240.645 111.311 C 240.866 111.532,238.291 133.727,234.924 160.633 " stroke="none" fill="black" fill-rule="evenodd"/></svg>

Resulting Icon As Font
Icon as font ✔️


Node-Potrace

Resulting SVG

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500" version="1.1">
<path d="M 265.648 22.027 C 264.080 22.497, 261.380 23.869, 259.648 25.076 C 255.085 28.258, 48.021 276.899, 44.750 283.124 C 40.642 290.943, 41.483 298.064, 47.296 304.684 C 54.062 312.391, 48.330 311.953, 142.875 311.978 L 227.250 312 226.738 314.750 C 226.456 316.262, 222.253 349.478, 217.398 388.562 C 207.388 469.143, 207.484 464.915, 215.488 472.623 C 222.806 479.670, 232.293 480.543, 240.368 474.912 C 244.921 471.738, 451.987 223.087, 455.250 216.876 C 459.358 209.057, 458.517 201.936, 452.704 195.316 C 445.938 187.609, 451.670 188.047, 357.125 188.022 L 272.750 188 273.262 185.250 C 273.544 183.737, 277.747 150.522, 282.602 111.438 C 290.695 46.287, 291.320 40.007, 290.111 35.938 C 288.334 29.957, 281.778 23.685, 275.701 22.155 C 270.502 20.846, 269.625 20.835, 265.648 22.027 M 174.079 189.309 C 137.185 233.576, 107 270.065, 107 270.397 C 107 270.729, 139.318 271, 178.818 271 C 239.152 271, 251.430 271.236, 255.596 272.473 C 263.761 274.897, 270.010 283.028, 269.989 291.200 C 269.983 293.565, 267.296 316.850, 264.018 342.946 C 260.740 369.041, 258.234 390.568, 258.450 390.783 C 258.886 391.219, 393 230.561, 393 229.603 C 393 229.271, 360.682 229, 321.182 229 C 260.848 229, 248.570 228.764, 244.404 227.527 C 236.239 225.103, 229.990 216.972, 230.011 208.800 C 230.017 206.435, 232.704 183.150, 235.982 157.054 C 239.260 130.959, 241.766 109.432, 241.550 109.217 C 241.334 109.001, 210.972 145.042, 174.079 189.309" stroke="none" fill="black" fill-rule="evenodd"/>
</svg>

Resulting Icon As Font
Icon as font


@tooolbox
Copy link
Owner

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.

@Ghustavh97
Copy link
Author

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?

@tooolbox
Copy link
Owner

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.

@Ghustavh97
Copy link
Author

Ok thanks, I will see what I can do.

jfly added a commit to jfly/icons that referenced this issue Sep 18, 2022
WIP: this is super slow?

This is nice because it means people don't have to install a native
dependency to try things out. Unfortunately, potrace in javascript looks
like a bit of a mess:

- There's an unmaintained port from 4 years ago:
  https://github.com/kilobtye/potrace
- There's a fork of that which is NodeJS compatible, "with some
  additions": https://github.com/Iwasawafag/node-potrace
- There's this fork of *that* which some additional commits, I can't
  figure out what it's relationship to the `Iwasawafag` fork is:
  https://github.com/tooolbox/node-potrace/.
  (tooolbox/node-potrace#13)
- Unfortunately, one or more of the "additions" in the `Iwasawafag` and
  `toolbox` forks introduce issues with generating fonts, which there's
  yet another fork designed to fix. See
  tooolbox/node-potrace#7 and
  https://github.com/oslllo/potrace/.

So, I've introduced a dependency on the `oslllo` fork of a fork of a
fork of a fork. 😱
@Reamd7
Copy link

Reamd7 commented Jun 12, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants