search

oslllo / svg-fixer

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

Output SVG is smaller than the ViewBox #48

Closed adrianengel closed 3 years ago

adrianengel commented 3 years ago

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>

Ghustavh97 commented 3 years ago

@adrianengel Thanks for the issue, it looks like the input svg already has a single path attribute so I am wondering why it needs fixing? Where is it not working?

adrianengel commented 3 years ago

@adrianengel Thanks for the issue, it looks like the input svg already has a single path attribute so I am wondering why it needs fixing? Where is it not working?

Oh sorry. This is my input SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="19" height="13.444" viewBox="0 0 19 13.444"><defs><style>.a{fill:none;stroke:#282828;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}</style></defs><g transform="translate(0.5 0.5)"><path class="a" d="M2,11.222S5.6,5,11,5s9,6.222,9,6.222-3.6,6.222-9,6.222S2,11.222,2,11.222Z" transform="translate(-2 -5)"/><ellipse class="a" cx="2.7" cy="2.667" rx="2.7" ry="2.667" transform="translate(6.3 3.556)"/></g></svg>

We are using your script to optimize all SVGs in our ReactApp. So a npm script is running a loop through all SVGs. If you open the output SVG in Illustrator you can see that the ViewBox ist bigger than the path inside.

Ghustavh97 commented 3 years ago

the ViewBox ist bigger than the path inside.

@adrianengel Did you mean the ViewBox is bigger than? Like this?

Edit: actually op is correct, the icon is smaller than the viewBox. I mistook ist for is instead of isn't.

b

Also is this a public icon pack or a custom in house one? because broken samples would be appreciated.

adrianengel commented 3 years ago

Yes! The Icon pack was build in house. do you need more samples? I can send you all SVGs via mail for debugging.

Ghustavh97 commented 3 years ago

@adrianengel yes please send then to my email, you will find it on my profile.

Ghustavh97 commented 3 years ago

@adrianengel please try v1.3.1 did not receive the samples so sorry if I missed any edge cases that may be in the pack, but this issue should be fixed now.