search

oslllo / svg-fixer

Converts SVG Strokes To Fill.
https://docs.oslllo.com/svg-fixer/master/
MIT License
208 stars 16 forks source link

Unnecessarily adjusting path and degrading quality #71

Closed Rykus0 closed 2 years ago

Rykus0 commented 2 years ago

I have an SVG with no strokes - just a single filled path. After running it through the utility, the path is altered (and almost twice as large) and the quality of the resulting icon is negatively impacted.

Before <svg xmlns="http://www.w3.org/2000/svg" aria-label="social github icon" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12a10 10 0 0 0-20 0z"/></svg>

After <svg xmlns="http://www.w3.org/2000/svg" aria-label="social github icon" viewBox="0 0 24 24"><path d="M11.120 2.039 C 9.316 2.220,7.707 2.807,6.280 3.806 C 3.483 5.764,1.889 8.961,2.013 12.360 C 2.107 14.927,3.114 17.234,4.939 19.062 C 5.975 20.100,7.160 20.872,8.480 21.369 C 8.941 21.543,9.125 21.552,9.316 21.409 C 9.483 21.284,9.514 21.095,9.517 20.166 L 9.520 19.311 9.390 19.335 C 8.495 19.503,7.745 19.427,7.141 19.108 C 6.794 18.924,6.403 18.519,6.242 18.178 C 5.755 17.143,5.596 16.917,5.083 16.536 C 4.889 16.391,4.705 16.228,4.676 16.172 C 4.627 16.080,4.631 16.064,4.720 15.992 C 4.803 15.925,4.865 15.915,5.119 15.927 C 5.697 15.955,6.229 16.319,6.658 16.980 C 6.878 17.318,7.234 17.675,7.475 17.797 C 7.988 18.059,8.769 18.068,9.388 17.820 C 9.539 17.760,9.548 17.745,9.597 17.500 C 9.658 17.192,9.815 16.849,10.014 16.590 L 10.159 16.400 10.047 16.400 C 9.599 16.400,8.362 16.063,7.835 15.798 C 6.696 15.224,5.995 14.233,5.729 12.820 C 5.678 12.550,5.661 12.245,5.662 11.600 C 5.664 10.842,5.674 10.702,5.751 10.420 C 5.867 9.997,6.186 9.361,6.436 9.051 L 6.637 8.803 6.554 8.491 C 6.490 8.253,6.471 8.059,6.470 7.660 C 6.469 7.136,6.492 6.979,6.647 6.449 C 6.749 6.101,6.782 6.085,7.252 6.157 C 7.788 6.239,8.454 6.520,9.176 6.968 L 9.499 7.168 9.779 7.102 C 11.212 6.766,12.789 6.767,14.222 7.102 L 14.505 7.168 14.782 6.989 C 15.433 6.570,16.214 6.239,16.748 6.157 C 17.218 6.085,17.251 6.101,17.353 6.449 C 17.508 6.979,17.531 7.136,17.530 7.660 C 17.529 8.059,17.510 8.253,17.446 8.491 L 17.363 8.803 17.564 9.051 C 17.814 9.361,18.133 9.997,18.249 10.420 C 18.326 10.702,18.336 10.842,18.338 11.600 C 18.339 12.536,18.293 12.907,18.100 13.497 C 17.569 15.120,16.369 16.017,14.285 16.346 L 13.849 16.415 14.003 16.619 C 14.087 16.731,14.203 16.924,14.260 17.048 C 14.460 17.485,14.479 17.688,14.480 19.420 C 14.480 20.391,14.497 21.078,14.522 21.168 C 14.604 21.464,14.899 21.579,15.276 21.461 C 15.951 21.248,16.983 20.720,17.700 20.219 C 18.798 19.453,19.799 18.396,20.522 17.240 C 20.821 16.761,21.245 15.866,21.440 15.300 C 22.020 13.618,22.150 11.822,21.815 10.103 C 21.073 6.292,18.165 3.221,14.430 2.303 C 13.446 2.062,12.028 1.948,11.120 2.039 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>

Side-by-side visual comparison (left is original) image

Overall this is a great tool! Thank you for building it!

Ghustavh97 commented 2 years ago

Hi, thanks for the issue.

The svg is twice as large

Yeah, this is a side effect of the package since it has to retrace the svg from scratch. Maybe including SVGO in the future can fix this.

The quality of the resulting icon is negatively impacted

I not sure right now but I think this can be fixed by increasing the tracing resolution, right now its at about ~ 600x600px, increasing this should fix this issue but will result in the svg size being bigger and taking even longer to process.

It also looks like your input svg is already fine and does not need any fixing. Is there a reason to why still want to pass it through the fixer?

Rykus0 commented 2 years ago

Hi, and thank you!

After some more digging I agree that increasing the tracing resolution does help a great deal. I bumped it to 1600x1600 and that was much better. It was a bit slower, though, so maybe an option for higher quality? I can send a PR your way for that.

This SVG probably didn't need any fixing, but it was just one of a large set that had a lot of detail and made a good test. Also the outer circle was clipped or deformed for all that had a circle like that. Many of ours didn't need fixing, but for some reason didn't render correctly when converted to a font. Your tool fixed that for all of them.

Also, I'm passing everything through the tool as part of a build process, which won't know which ones need to be fixed and which don't. We could make it more of a manual process, but I wanted to automate as much as possible.

Ghustavh97 commented 2 years ago

Also the outer circle was clipped or deformed for all that had a circle like that. Many of ours didn't need fixing, but for some reason didn't render correctly when converted to a font. Your tool fixed that for all of them.

Wow, good to know that it fixed an edge case that I did not have in mind, and im glad it fixed a problem you had with your icon set.

so maybe an option for higher quality?

Yes, a PR for this would be greatly appreciated. What I have in mind is adding a resolution option so the user can have as much control as possible by just passing in the resolution that they want for example in your case it would be something like this

let options = { resolution: 1600 }

SVGFixer('./source', './destination', options);

But if you have a better idea that would be welcome too.