Fixed svg path data is empty

[KarunaLakshman]

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>

[cinder92]

same issue here

input

<svg width="5" height="10" viewBox="0 0 5 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.5 1L4.5 5L0.5 9" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

output

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

[Ghustavh97]

Sorry for the late reply, super busy. Yes fill="none" is the issue. The issue might be here https://github.com/oslllo/svg-fixer/blob/23d4ff8af84bc76b02914100a3dbd3bc53dd38a8/src/svg.js#L161C1-L170, it only checks for the path element to see if fill is set to none and does not check other elements such as svg or style in the examples that you provided. I do not have an ETA for a fix right now since i'm busy with other stuff on my end right now, but I would be happy to review a PR with a fix if anyone wants to push one.

[slutske22]

Having the same problem, fill: transparent; seems to be a good compromise fix.

[wangsyiiz]

Is there anyone still on watching for this issue? I'm not sure it has been fixed, but I found this issue is not occurred every time even the svg included fill="none". I mean it can be reproduced on the same svg, but it not occurred on every svg

[Ghustavh97]

@wangsyiiz what is the icon?

[Ghustavh97]

Ok, for anyone still running into this issue, make sure your SVG is black and not any other color, I changed @KarunaLakshman 's svg stroke attribute from stroke:#00a3e0; to stroke:#000; and the svg rendered well.

Here is the fixed svg.

<svg id="icns" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path d="M11.212 3.547 C 8.270 3.783,5.269 6.663,4.052 10.417 C 3.304 12.724,3.331 14.800,4.134 16.764 C 5.247 19.485,7.782 21.440,10.668 21.802 L 11.250 21.875 11.280 27.041 C 11.309 32.015,11.314 32.212,11.424 32.334 C 11.572 32.497,11.933 32.503,12.128 32.345 L 12.270 32.231 12.286 27.044 L 12.303 21.857 12.754 21.819 C 13.555 21.751,14.588 21.445,15.472 21.011 C 17.693 19.922,19.345 17.787,19.890 15.300 C 20.025 14.679,20.075 13.155,19.982 12.462 C 19.487 8.779,17.101 5.300,14.194 4.025 C 13.262 3.616,12.292 3.461,11.212 3.547 M12.894 4.647 C 14.018 4.919,15.004 5.516,16.020 6.537 C 16.820 7.342,17.346 8.082,17.898 9.180 C 18.575 10.525,18.921 11.706,19.008 12.967 C 19.098 14.278,18.923 15.385,18.453 16.479 C 17.474 18.757,15.387 20.393,12.958 20.787 C 12.646 20.838,12.370 20.880,12.345 20.880 C 12.320 20.880,12.300 19.220,12.300 17.191 L 12.300 13.502 14.387 12.455 C 15.930 11.682,16.496 11.370,16.554 11.261 C 16.703 10.983,16.434 10.500,16.131 10.500 C 16.075 10.500,15.207 10.918,14.202 11.430 C 13.198 11.941,12.360 12.360,12.340 12.360 C 12.321 12.360,12.297 11.413,12.287 10.255 L 12.270 8.149 12.128 8.035 C 11.913 7.860,11.559 7.881,11.404 8.078 C 11.281 8.235,11.280 8.278,11.280 12.460 L 11.280 16.684 9.448 15.212 C 8.131 14.154,7.574 13.740,7.464 13.740 C 7.249 13.740,6.960 14.043,6.960 14.268 C 6.960 14.495,7.007 14.537,9.376 16.440 L 11.280 17.970 11.280 19.425 C 11.280 20.549,11.263 20.880,11.205 20.880 C 11.013 20.879,10.038 20.683,9.674 20.572 C 6.851 19.709,4.863 17.281,4.552 14.316 C 4.291 11.818,5.441 8.733,7.397 6.684 C 8.865 5.146,10.372 4.447,12.024 4.537 C 12.318 4.553,12.710 4.602,12.894 4.647 M26.713 9.815 C 26.063 10.138,25.332 11.138,24.763 12.478 C 23.302 15.918,21.915 22.983,22.344 24.799 C 22.498 25.452,22.716 25.845,23.185 26.316 C 23.497 26.629,23.732 26.801,24.072 26.964 C 24.626 27.230,25.501 27.461,26.142 27.511 C 26.399 27.531,26.671 27.560,26.745 27.575 L 26.880 27.602 26.880 29.901 L 26.880 32.199 27.019 32.330 C 27.168 32.470,27.469 32.502,27.661 32.399 C 27.869 32.288,27.899 31.955,27.900 29.746 L 27.900 27.602 28.035 27.577 C 28.109 27.563,28.440 27.521,28.770 27.484 C 30.743 27.263,31.972 26.383,32.376 24.900 C 32.638 23.940,32.391 21.516,31.707 18.322 C 30.980 14.930,30.049 12.230,29.151 10.907 C 28.400 9.801,27.526 9.409,26.713 9.815 M27.779 10.812 C 28.104 11.011,28.665 11.937,29.122 13.027 C 30.110 15.387,31.174 19.982,31.450 23.087 C 31.561 24.333,31.415 24.990,30.899 25.577 C 30.274 26.287,28.895 26.633,26.976 26.561 C 24.842 26.481,23.804 25.969,23.388 24.793 C 23.163 24.155,23.242 22.845,23.648 20.460 C 24.618 14.768,26.397 10.277,27.521 10.686 C 27.593 10.713,27.709 10.769,27.779 10.812 M17.100 22.720 C 17.017 22.733,16.788 22.801,16.590 22.870 C 15.009 23.422,14.149 25.199,14.696 26.781 C 14.859 27.251,15.018 27.500,15.433 27.936 L 15.782 28.302 15.396 28.552 C 14.891 28.878,14.292 29.532,14.017 30.055 C 13.741 30.579,13.560 31.276,13.560 31.810 C 13.560 32.522,13.171 32.460,17.636 32.460 L 21.471 32.460 21.603 32.295 C 21.721 32.146,21.731 32.082,21.700 31.640 C 21.660 31.054,21.438 30.354,21.132 29.851 C 20.856 29.396,20.228 28.763,19.794 28.503 L 19.460 28.304 19.730 28.057 C 20.366 27.474,20.711 26.671,20.711 25.770 C 20.711 24.858,20.423 24.180,19.766 23.549 C 19.077 22.887,18.054 22.569,17.100 22.720 M18.491 23.871 C 18.931 24.084,19.294 24.443,19.507 24.875 C 19.675 25.217,19.698 25.322,19.698 25.761 C 19.698 26.175,19.671 26.320,19.536 26.615 C 19.326 27.076,18.960 27.451,18.510 27.667 C 18.203 27.814,18.077 27.840,17.657 27.840 C 16.996 27.840,16.612 27.694,16.197 27.286 C 15.729 26.825,15.570 26.440,15.570 25.770 C 15.570 25.304,15.592 25.185,15.732 24.900 C 15.951 24.455,16.395 24.030,16.835 23.845 C 17.139 23.717,17.263 23.699,17.701 23.716 C 18.078 23.730,18.285 23.771,18.491 23.871 M18.247 28.951 C 19.252 29.075,20.492 30.276,20.623 31.253 L 20.656 31.500 17.613 31.500 L 14.570 31.500 14.613 31.305 C 14.759 30.626,15.214 29.936,15.810 29.490 C 16.244 29.165,16.696 28.984,17.220 28.925 C 17.608 28.882,17.718 28.885,18.247 28.951 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>

I tried to work on a fix but it might taker longer than I thought because of all the edge cases I'm running into. I'm short on time right now so until I can push out a fix this should work to solve this issue for now.

[wangsyiiz]

@wangsyiiz what is the icon?

I'm apologize I didn't reply this asap.
Per my discover, this issue is caused by if the svg fill rule is 'even-odd', once I converted the icon from 'even-odd' to 'non-zero', the new converted svg can be fixed perfect.