suppose following code is exist in a file named test.js:

const SVGFixer = require("oslllo-svg-fixer");
const options = {
    showProgressBar: true,
    throwIfDestinationDoesNotExist: false
};
const dirPath = "D:\\not-exist-folder";
SVGFixer(dirPath, dirPath, options)
    .fix()
    .then((result) => {
        console.log("Svg fixed", result);
    })
    .catch((error) => {
        console.log("Failed to fix", error);
    });

When you run the followin code:

node test.js

you will get this error which is correct:

    throw error.invalidPathError("source", source);
    ^

TypeError: source path D:\not-exist-folder does not exist.
    at Object.invalidPathError (D:\svgTestnode_modules\oslllo-svg-fixer\src\error.js:27:10)
    at new Location (D:\svgTestnode_modules\oslllo-svg-fixer\src\location.js:17:17)
    at new SVGFixer (D:\svgTestnode_modules\oslllo-svg-fixer\src\constructor.js:13:19)
    at SVGFixer (D:\svgTestnode_modules\oslllo-svg-fixer\src\constructor.js:10:12)
    at Object.<anonymous> (D:\svgTesttest2.js:7:1)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12)

Node.js v20.11.0

But it will never exist the process and progress will not done.

After the following line this this.teardown(); should called:

Hi,

I have a large batch of SVGs but they have their widths and heights in mm.

When I try to process them with .fix() I get the following error:

C:\Users\LBound\Desktop\Test\node_modules\oslllo-svg2\src\error.js:13
        return new TypeError(
               ^

TypeError: Expected <a valid dimension i.e 20px, 20rem, 20em or 20> for [input] but received 147.26401mm of type <string>
    at Object.invalidParameterError (C:\Users\LBound\Desktop\Test\node_modules\oslllo-svg2\src\error.js:13:9)
    at Svg.dimensionToPx (C:\Users\LBound\Desktop\Test\node_modules\oslllo-svg2\src\svg.js:115:16)
    at Svg.dimensions (C:\Users\LBound\Desktop\Test\node_modules\oslllo-svg2\src\svg.js:155:45)
    at Svg.getOriginal (C:\Users\LBound\Desktop\Test\node_modules\oslllo-svg-fixer\src\svg.js:38:36)
    at new Svg (C:\Users\LBound\Desktop\Test\node_modules\oslllo-svg-fixer\src\svg.js:14:24)
    at C:\Users\LBound\Desktop\Test\node_modules\oslllo-svg-fixer\src\processor.js:74:19
    at new Promise (<anonymous>)
    at Processor.instance (C:\Users\LBound\Desktop\Test\node_modules\oslllo-svg-fixer\src\processor.js:72:12)
    at C:\Users\LBound\Desktop\Test\node_modules\oslllo-svg-fixer\src\processor.js:43:22
    at new Promise (<anonymous>)

Is there a way to either allow processing of these files or batch convert them to one of the allowed size formats?

Thanks

I would like to integrate this solution with another tool, and I would like to be able to pass the svg string, and receive the correct svg as a return, example:

const svg = <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
<line x1="9" y1="9" x2="15" y2="15" />
<line x1="15" y1="9" x2="9" y2="15" />
</svg>

const svgCorrected = await SVGFixer(svg, options).fix()

console.log(svgCorrected);
// <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.620 2.025 C 4.212 2.105,4.087 2.139,3.870 2.227 C 2.989 2.585,2.321 3.364,2.076 4.320 C 1.993 4.647,1.992 19.351,2.076 19.677 C 2.357 20.776,3.117 21.553,4.260 21.915 C 4.439 21.971,5.243 21.979,11.820 21.990 C 16.818 21.998,19.268 21.989,19.453 21.960 C 20.643 21.777,21.620 20.876,21.924 19.680 C 22.007 19.352,22.008 4.648,21.924 4.323 C 21.617 3.126,20.660 2.233,19.480 2.043 C 19.234 2.003,4.819 1.986,4.620 2.025 M19.340 4.066 C 19.455 4.105,19.603 4.201,19.701 4.299 C 20.025 4.623,20.000 3.977,20.000 12.000 C 20.000 20.023,20.025 19.377,19.701 19.701 C 19.377 20.025,20.023 20.000,12.000 20.000 C 3.975 20.000,4.623 20.025,4.298 19.700 C 3.974 19.376,3.998 20.028,4.010 11.918 L 4.020 4.700 4.131 4.511 C 4.256 4.298,4.449 4.136,4.670 4.057 C 4.793 4.013,6.104 4.003,11.983 4.002 C 18.548 4.000,19.162 4.006,19.340 4.066 M8.643 8.069 C 8.291 8.193,8.000 8.614,8.000 9.000 C 8.000 9.080,8.030 9.234,8.066 9.343 C 8.123 9.517,8.276 9.685,9.354 10.770 L 10.577 12.000 9.354 13.230 C 8.276 14.315,8.123 14.483,8.066 14.657 C 7.936 15.046,8.021 15.423,8.299 15.701 C 8.577 15.979,8.954 16.064,9.343 15.934 C 9.517 15.877,9.685 15.724,10.770 14.646 L 12.000 13.423 13.230 14.646 C 14.315 15.724,14.483 15.877,14.657 15.934 C 15.046 16.064,15.423 15.979,15.701 15.701 C 15.979 15.423,16.064 15.046,15.934 14.657 C 15.877 14.483,15.724 14.315,14.646 13.230 L 13.423 12.000 14.646 10.770 C 15.724 9.685,15.877 9.517,15.934 9.343 C 16.064 8.954,15.979 8.577,15.701 8.299 C 15.423 8.021,15.046 7.936,14.657 8.066 C 14.483 8.123,14.315 8.276,13.230 9.354 L 12.000 10.577 10.770 9.354 C 9.685 8.276,9.517 8.123,9.343 8.066 C 9.102 7.985,8.877 7.986,8.643 8.069 " stroke="none" fill="black" fill-rule="evenodd"></path></svg>

would it be possible?

Hi guys,

Is there a way to do the opposite? I mean I want to convert fills to strokes ?

Thank you.

I want to use this package badly because I'm having the same issue it tries to resolve but I cant download it because I cant install canvas using node 12. How are you able to install?

This thing converts a stroke into a png and then vectorizes it using potrace.

It just works with 1 specified file.
Not working with whole folder

Hi I am getting Missing required arguments: source, destination error when running: npm run oslllo-svg-fixer

JS File:
const SVGFixer = require('oslllo-svg-fixer');

const options = {
showProgressBar: true,
throwIfDestinationDoesNotExist: true,
};

SVGFixer('./svg', './updated-svg', options);

Pls let me know if I am missing anything

If user want change the output filename, for eg. oslllo-svg-fixer -s \!.svg -d fixed/exclamationmark.svg
will produce error:

ERR: destination path fixed/exclamationmark.svg does not exist.

STACK: TypeError: destination path fixed/exclamationmark.svg does not exist.
    at Object.invalidPathError (~/.nvm/versions/node/v16.13.2/lib/node_modules/oslllo-svg-fixer/src/error.js:27:10)
    at new Location (~/.nvm/versions/node/v16.13.2/lib/node_modules/oslllo-svg-fixer/src/location.js:21:19)
...

so maybe check if destination has ext? path.parse(destination).ext before check exists /src/location.js#L19

The fixed svg path data is empty. I believe the style definition file:none is the causer. May I know, if it possible to fix such type of svgs?

Input

<svg id="icns"
  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
  <defs>
    <style>.cls-1{fill:none;stroke:#00a3e0;stroke-linecap:round;stroke-linejoin:round;}</style>
  </defs>
  <circle class="cls-1" cx="17.63" cy="25.78" r="2.6"/>
  <path class="cls-1" d="m14.04,31.97c0-1.98,1.61-3.59,3.59-3.59s3.59,1.61,3.59,3.59h-7.18Z"/>
  <line class="cls-1" x1="11.78" y1="8.4" x2="11.78" y2="31.97"/>
  <path class="cls-1" d="m4,13.61c0-4.3,3.48-9.61,7.78-9.61s7.78,5.31,7.78,9.61-3.48,7.78-7.78,7.78-7.78-3.48-7.78-7.78Z"/>
  <line class="cls-1" x1="7.47" y1="14.26" x2="11.78" y2="17.73"/>
  <line class="cls-1" x1="11.78" y1="13.21" x2="16.09" y2="11.03"/>
  <line class="cls-1" x1="27.37" y1="27.09" x2="27.37" y2="31.97"/>
  <path class="cls-1" d="m22.74,23.85c0-2.56,2.07-13.71,4.63-13.71s4.63,11.15,4.63,13.71-2.07,3.23-4.63,3.23-4.63-.68-4.63-3.23Z"/>
</svg>

Output

<svg id="icns" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
  <path d="" stroke="none" fill-rule="evenodd" fill="black"></path>
</svg>

Example

Source svg

<svg class="bi bi-archive-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M12.643 15C13.979 15 15 13.845 15 12.5V5H1v7.5C1 13.845 2.021 15 3.357 15h9.286zM6 7a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1H6zM.8 1a.8.8 0 0 0-.8.8V3a.8.8 0 0 0 .8.8h14.4A.8.8 0 0 0 16 3V1.8a.8.8 0 0 0-.8-.8H.8z"/>
</svg>

Outputs

Expected SVG	Produced SVG

This is also true when height and width are in px or rem as well.

I have an issue with some SVGs. After fixing these SVGs the viewBox is not filled with the path. It seems that the path is 80% smaller than the viewbox.

Input SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 13.44"><path d="M9.5,13.44C3.88,13.44.22,7.23.07,7a.5.5,0,0,1,0-.5C.22,6.21,3.88,0,9.5,0s9.28,6.21,9.43,6.47a.5.5,0,0,1,0,.5C18.78,7.23,15.12,13.44,9.5,13.44ZM1.09,6.72c.73,1.13,4,5.72,8.41,5.72s7.68-4.59,8.41-5.72C17.18,5.59,13.94,1,9.5,1S1.82,5.59,1.09,6.72Z" style="fill:#282828"/><path d="M9.5,9.89a3.17,3.17,0,1,1,3.2-3.17A3.19,3.19,0,0,1,9.5,9.89Zm0-5.34a2.17,2.17,0,1,0,2.2,2.17A2.19,2.19,0,0,0,9.5,4.55Z" style="fill:#282828"/></svg>

Output SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="13.444" viewBox="0 0 19 13.444"><path d="M6.135 1.958 C 4.880 2.110,3.633 2.708,2.421 3.740 C 2.113 4.002,1.496 4.621,1.212 4.953 C 0.814 5.418,0.391 5.988,0.127 6.414 C -0.049 6.699,-0.048 6.742,0.149 7.055 C 0.602 7.774,1.302 8.636,1.925 9.239 C 3.232 10.504,4.565 11.231,5.998 11.459 C 6.358 11.516,7.212 11.516,7.572 11.459 C 8.996 11.232,10.336 10.504,11.633 9.250 C 12.256 8.648,13.038 7.686,13.431 7.036 C 13.570 6.808,13.589 6.728,13.537 6.593 C 13.495 6.482,13.160 5.971,12.936 5.675 C 11.551 3.844,9.998 2.647,8.367 2.153 C 7.691 1.948,6.836 1.873,6.135 1.958 M7.181 2.647 C 8.918 2.797,10.699 3.951,12.224 5.914 C 12.452 6.208,12.778 6.680,12.778 6.716 C 12.778 6.779,12.300 7.439,11.948 7.862 C 11.001 8.999,9.889 9.890,8.845 10.349 C 7.037 11.144,5.217 10.890,3.445 9.597 C 2.823 9.143,2.180 8.531,1.620 7.859 C 1.256 7.423,0.790 6.777,0.792 6.712 C 0.795 6.640,1.390 5.835,1.742 5.428 C 3.449 3.456,5.340 2.489,7.181 2.647 M6.459 4.479 C 5.960 4.557,5.508 4.787,5.162 5.138 C 4.964 5.338,4.864 5.475,4.750 5.699 C 4.553 6.088,4.471 6.532,4.517 6.949 C 4.625 7.912,5.302 8.677,6.258 8.915 C 6.556 8.990,7.051 8.985,7.353 8.905 C 8.288 8.656,8.946 7.899,9.052 6.949 C 9.175 5.850,8.445 4.811,7.353 4.531 C 7.107 4.468,6.683 4.443,6.459 4.479 M7.317 5.261 C 7.801 5.438,8.186 5.857,8.313 6.344 C 8.359 6.522,8.359 6.912,8.313 7.090 C 8.169 7.642,7.705 8.094,7.149 8.224 C 6.958 8.269,6.612 8.269,6.423 8.225 C 5.857 8.091,5.397 7.640,5.255 7.079 C 5.207 6.888,5.207 6.546,5.255 6.355 C 5.372 5.892,5.743 5.462,6.175 5.292 C 6.426 5.193,6.511 5.179,6.830 5.187 C 7.100 5.194,7.156 5.202,7.317 5.261 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>

Could not find a declaration file for module 'oslllo-svg-fixer'. 'c:/Users/username/Desktop/projectName/node_modules/oslllo-svg-fixer/src/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/oslllo-svg-fixer if it exists or add a new declaration (.d.ts) file containing declare module 'oslllo-svg-fixer';

I am a beginner at javascript and am confused by this error when importing this library. I haven't gotten this error importing any other javascript libraries and have been stuck on this for a few days.

I tried what it suggested and no luck..

1. Here is the SVG of a star

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M20.9369 8.94814L15.2816 8.47436L13.0733 3.45452C12.676 2.5408 11.3206 2.5408 10.9233 3.45452L8.71497 8.48564L3.07141 8.94814C2.04318 9.02711 1.62254 10.268 2.4054 10.9222L6.69357 14.5094L5.40829 19.8339C5.1746 20.804 6.26125 21.5711 7.14926 21.0522L11.9983 18.232L16.8473 21.0634C17.7353 21.5823 18.822 20.8153 18.5883 19.8451L17.303 14.5094L21.5912 10.9222C22.374 10.268 21.9651 9.02711 20.9369 8.94814Z"
    fill="#E7E7E7" />
</svg>

Preview,

After fixing up this SVG, it is generating this,

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="" stroke="none" fill="black" fill-rule="evenodd"></path>
</svg>

2. If I just change the fill color to darker color, like this

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M20.9369 8.94814L15.2816 8.47436L13.0733 3.45452C12.676 2.5408 11.3206 2.5408 10.9233 3.45452L8.71497 8.48564L3.07141 8.94814C2.04318 9.02711 1.62254 10.268 2.4054 10.9222L6.69357 14.5094L5.40829 19.8339C5.1746 20.804 6.26125 21.5711 7.14926 21.0522L11.9983 18.232L16.8473 21.0634C17.7353 21.5823 18.822 20.8153 18.5883 19.8451L17.303 14.5094L21.5912 10.9222C22.374 10.268 21.9651 9.02711 20.9369 8.94814Z"
    fill="#1900f5" />
</svg>

Preview,

It is working fine with this SVG, the output is this

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M11.672 2.814 C 11.409 2.888,11.175 3.054,11.045 3.259 C 10.984 3.355,10.443 4.555,9.842 5.927 C 9.241 7.298,8.735 8.436,8.718 8.455 C 8.700 8.474,7.402 8.595,5.833 8.723 C 4.001 8.872,2.908 8.978,2.778 9.017 C 2.518 9.097,2.266 9.314,2.129 9.574 C 2.041 9.744,2.022 9.832,2.022 10.080 C 2.022 10.401,2.094 10.594,2.291 10.802 C 2.345 10.858,3.354 11.712,4.534 12.699 C 5.714 13.687,6.680 14.513,6.680 14.535 C 6.680 14.557,6.390 15.773,6.035 17.237 C 5.593 19.067,5.391 19.970,5.391 20.125 C 5.392 20.724,5.902 21.199,6.546 21.200 C 6.912 21.200,6.830 21.242,9.711 19.565 L 12.002 18.230 14.491 19.684 C 17.272 21.309,17.249 21.299,17.705 21.186 C 18.032 21.105,18.300 20.919,18.459 20.661 C 18.557 20.503,18.581 20.416,18.592 20.184 C 18.603 19.931,18.535 19.614,17.962 17.246 C 17.609 15.786,17.320 14.570,17.320 14.543 C 17.320 14.517,18.233 13.731,19.350 12.798 C 20.466 11.865,21.483 11.005,21.609 10.886 C 21.967 10.548,22.073 10.179,21.940 9.733 C 21.869 9.494,21.617 9.191,21.395 9.077 C 21.185 8.970,21.018 8.952,17.960 8.698 C 16.497 8.576,15.290 8.464,15.276 8.448 C 15.263 8.433,14.770 7.322,14.181 5.980 C 13.593 4.638,13.065 3.453,13.008 3.347 C 12.771 2.906,12.182 2.671,11.672 2.814 "
    stroke="none" fill="black" fill-rule="evenodd"></path>
</svg>

3. Same case with an SVG with Gradient fill

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g clip-path="url(#clip0)">
    <path fill-rule="evenodd" clip-rule="evenodd"
      d="M21.9478 9.55776C21.8169 9.13517 21.4577 8.83502 21.0327 8.79506L15.2602 8.24811L12.9776 2.67306C12.8093 2.26448 12.426 2 12.0001 2C11.5742 2 11.1909 2.26448 11.0226 2.67401L8.73996 8.24811L2.96651 8.79506C2.54231 8.83598 2.18402 9.13517 2.05234 9.55776C1.92065 9.98035 2.04227 10.4439 2.36317 10.736L6.72652 14.7292L5.43987 20.6434C5.34572 21.0782 5.50746 21.5277 5.85324 21.7885C6.03909 21.9287 6.25654 22 6.47581 22C6.66487 22 6.85241 21.9468 7.02071 21.8417L12.0001 18.7363L16.9776 21.8417C17.3418 22.0704 17.801 22.0495 18.146 21.7885C18.4919 21.5269 18.6535 21.0773 18.5594 20.6434L17.2727 14.7292L21.6361 10.7368C21.957 10.4439 22.0795 9.98115 21.9478 9.55776V9.55776Z"
      fill="url(#paint0_linear)" />
  </g>
  <defs>
    <linearGradient id="paint0_linear" x1="12" y1="19.5" x2="12" y2="1.16667" gradientUnits="userSpaceOnUse">
      <stop stop-color="#5B4308" />
      <stop offset="1" stop-color="#E5A40A" />
    </linearGradient>
    <clipPath id="clip0">
      <rect width="20" height="20" fill="white" transform="translate(2 2)" />
    </clipPath>
  </defs>
</svg>

Preview,

The output, in this case,

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M5.614 8.560 C 3.136 8.798,2.786 8.840,2.625 8.917 C 2.095 9.174,1.876 9.852,2.147 10.394 C 2.247 10.593,2.524 10.862,4.480 12.658 C 6.645 14.645,6.700 14.699,6.694 14.838 C 6.691 14.916,6.408 16.260,6.064 17.825 C 5.619 19.855,5.440 20.745,5.440 20.928 C 5.440 21.707,6.245 22.224,6.921 21.879 C 7.010 21.834,8.181 21.112,9.524 20.275 C 10.986 19.363,11.992 18.759,12.033 18.770 C 12.070 18.780,13.228 19.492,14.607 20.354 C 16.502 21.538,17.163 21.931,17.316 21.967 C 17.730 22.062,18.172 21.862,18.415 21.468 C 18.508 21.317,18.536 21.220,18.550 20.990 C 18.566 20.728,18.504 20.411,17.921 17.747 C 17.566 16.123,17.281 14.771,17.288 14.743 C 17.294 14.714,18.299 13.775,19.520 12.656 C 21.478 10.860,21.753 10.593,21.853 10.394 C 22.124 9.852,21.905 9.174,21.375 8.918 C 21.215 8.840,20.858 8.798,18.307 8.556 L 15.420 8.281 11.920 8.285 L 8.420 8.290 5.614 8.560 "
    stroke="none" fill="black" fill-rule="evenodd"></path>
</svg>

Preview,

I am not able to understand why it is happening, Can anyone help me out with this?

When using a viewbox that doesn't has min-x & -y as 0 the outputted svg code is offset to the center of the svg.
The original viewbox is copied, however, it should be changed to "0 0 w h" in order to be displayed correctly.

for example:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-270 -270 540 540" fill="none" stroke="#000000" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"><g><circle cx="0" cy="0" r="250" class="fill65535" /><circle cx="0" cy="0" r="150" class="fill255" /><circle cx="0" cy="0" r="250" /><circle cx="0" cy="0" r="150" /></g></svg>

results in

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-270 -270 540 540" fill="none" stroke="#000000" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"><path d="M256.905 10.281 C 198.361 13.127,142.394 35.861,98.280 74.714 C 53.736 113.946,23.877 167.123,13.791 225.180 C 8.714 254.399,8.714 285.601,13.791 314.820 C 28.004 396.635,81.074 467.164,155.925 503.713 C 200.196 525.330,248.921 533.804,298.485 528.506 C 362.734 521.639,422.705 490.325,465.733 441.180 C 488.966 414.644,506.488 383.836,517.405 350.325 C 534.246 298.631,534.246 241.369,517.405 189.675 C 501.908 142.108,473.221 100.286,434.160 68.317 C 395.643 36.792,347.942 16.815,298.485 11.497 C 285.567 10.107,269.904 9.650,256.905 10.281 M279.720 30.247 C 303.364 31.304,323.463 34.955,345.330 42.163 C 383.798 54.844,418.040 76.857,445.832 106.771 C 467.022 129.579,482.804 154.878,494.099 184.140 C 510.356 226.255,514.232 273.313,505.131 318.060 C 497.128 357.406,478.949 394.791,453.074 425.115 C 444.982 434.598,435.278 444.340,425.939 452.355 C 397.631 476.649,364.258 493.838,327.645 502.981 C 290.739 512.198,249.965 512.246,212.940 503.118 C 167.070 491.810,126.308 467.824,94.168 433.229 C 68.250 405.331,49.620 372.309,39.169 335.745 C 26.369 290.961,27.085 241.587,41.170 197.640 C 52.275 162.993,70.033 132.592,94.393 106.522 C 123.082 75.820,157.494 54.038,197.640 41.170 C 223.429 32.905,252.531 29.032,279.720 30.247 M265.005 110.064 C 236.057 110.959,208.094 119.613,183.658 135.239 C 164.664 147.383,147.383 164.664,135.239 183.658 C 122.286 203.914,113.913 227.189,111.124 250.695 C 109.700 262.692,109.701 277.004,111.128 289.305 C 113.825 312.551,122.293 336.097,135.239 356.342 C 147.371 375.316,164.684 392.629,183.658 404.761 C 203.958 417.742,227.533 426.206,250.830 428.877 C 263.297 430.307,276.501 430.305,289.170 428.872 C 317.212 425.699,345.400 414.111,368.145 396.404 C 399.590 371.924,420.927 336.472,427.644 297.540 C 429.288 288.013,429.904 280.502,429.904 270.000 C 429.904 259.498,429.288 251.987,427.644 242.460 C 423.231 216.886,412.396 192.397,396.404 171.855 C 368.561 136.090,326.652 113.595,282.015 110.455 C 277.602 110.145,268.874 109.944,265.005 110.064 M281.340 130.538 C 298.970 131.996,314.988 136.362,330.969 144.066 C 359.144 157.647,382.353 180.856,395.934 209.031 C 405.336 228.535,409.853 248.321,409.853 270.000 C 409.853 288.704,406.583 305.507,399.562 322.873 C 386.785 354.482,361.772 381.120,330.955 395.938 C 311.354 405.363,291.687 409.853,270.000 409.853 C 248.321 409.853,228.535 405.336,209.031 395.934 C 180.856 382.353,157.647 359.144,144.066 330.969 C 134.651 311.439,130.147 291.708,130.147 270.000 C 130.147 248.308,134.658 228.546,144.066 209.031 C 157.653 180.843,180.843 157.653,209.031 144.066 C 222.796 137.430,236.644 133.277,251.910 131.206 C 259.731 130.145,272.956 129.845,281.340 130.538 " stroke="none" fill="black" fill-rule="evenodd"></path></svg>

Hello,

when I run the library via node (I have not tested via CLI) I get this warning:

(process:16016): GLib-GIO-WARNING **: 18:37:43.785: Unexpectedly, UWP app `microsoft.windowscommunicationsapps_16005.11629.20316.0_x64__8wekyb3d8bbwe' (AUMId `microsoft.win
dowscommunicationsapps_8wekyb3d8bbwe!microsoft.windowslive.mail') supports 1 extensions but has no verbs

It seems to be working anyway, but the warning itself is annoying. Any way this can be fixed or silenced?

Thanks

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)

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

Version details

Package version: 3.0.0
node version: 16.13.2

Issue

Running oslllo-svg-fixer or importing the package into a .js file throws the error:

$ node -v
v16.13.2

$ oslllo-svg-fixer
/project_path/node_modules/piscina/dist/src/index.js:804
class Piscina extends events_1.EventEmitterAsyncResource {
                               ^

TypeError: Class extends value undefined is not a constructor or null
    at Object.<anonymous> (/home/linds/Code/gomi/lindsay/fix-svg/node_modules/piscina/dist/src/index.js:804:32)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/home/linds/Code/gomi/lindsay/fix-svg/node_modules/oslllo-svg-fixer/src/processor.js:6:17)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)

Root cause

It seems that the version of piscina package used in the project no longer supports node v16 or earlier, due to using a built-in version of EventEmitterAsyncResource.

Workaround

The fix is simply to use node v18 or higher:

$ node -v
v18.12.1

$ oslllo-svg-fixer
Usage: oslllo-svg-fixer [source] [destination] [options]

Options:
      --version                   Show version number                  [boolean]
  -s, --source                    path containing SVG(s).    [string] [required]
  -d, --destination               path to store fixed SVG(s).[string] [required]
      --strict-destination, --sd  throw if destination path does not exist.
                                                       [boolean] [default: true]
      --show-progress, --sp       show progress bar in CLI.
                                                       [boolean] [default: true]
      --trace-resolution, --tr    resolution of trace image: larger == higher
                                  quality and slower processing
                                                         [number] [default: 600]
      --help                      Show help                            [boolean]

Missing required arguments: source, destination

No issue with this myself, but it might be worth updating the documentation. Hopefully anyone else who runs into this will find this issue.

First of all: great project! It is helping me a lot...

I was wondering why there is a check on the NODE_ENV environment variable inside the osllo/validator package. I have set that for my environment needs and I have to manually reset that when I want to use this package... Is that necessary to determine that it is not a node environment?

I am getting:

Error:
Something went wrong installing the "sharp" module