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.

Sign up for GitHub

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

Jump to bottom

Output SVG is smaller than the ViewBox #48

Closed
adrianengel opened this issue May 25, 2021 · 6 comments · Fixed by #49
Closed

Output SVG is smaller than the ViewBox #48

adrianengel opened this issue May 25, 2021 · 6 comments · Fixed by #49
Labels
bug Something isn't working good first issue Good for newcomers

Comments

@adrianengel
Copy link

adrianengel commented May 25, 2021 •
edited
Loading

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
Copy link
Contributor

@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?

@Ghustavh97 Ghustavh97 added good first issue Good for newcomers needs more info Needs more information labels May 25, 2021
@adrianengel
Copy link
Author

@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.

@adrianengel adrianengel reopened this May 26, 2021
@Ghustavh97
Copy link
Contributor

Ghustavh97 commented May 26, 2021 •
edited
Loading

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
Copy link
Author

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

@Ghustavh97
Copy link
Contributor

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

@Ghustavh97 Ghustavh97 changed the title SVG path not big enough for ViewBox Output SVG is smaller than the ViewBox May 27, 2021
Ghustavh97 added a commit that referenced this issue May 27, 2021
@Ghustavh97
fix: output svg being smaller than viewBox (#48)
f658614 
This would happen when the width and height attributes were not equal
therefore throwing off the scale when is was passed to the tracing
algorithm.
@Ghustavh97 Ghustavh97 linked a pull request May 27, 2021 that will close this issue
fix: output svg being smaller than viewBox (#48) #49
Merged
Ghustavh97 added a commit that referenced this issue May 27, 2021
@Ghustavh97
Merge pull request #49 from oslllo/fix-48
9548949 
fix: output svg being smaller than viewBox (#48)
@Ghustavh97 Ghustavh97 added bug Something isn't working and removed needs more info Needs more information labels May 27, 2021
@Ghustavh97
Copy link
Contributor

@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.

Ghustavh97 added a commit to oslllo/svg2 that referenced this issue Jul 14, 2021
@Ghustavh97
fix: Svg2.AUTO outputting wrong dimensions on resize()
fbd2431 
This was causing viewBox size issues with the svg when one of its
dimensions was resized using the Svg2.AUTO constant

eg. instance.resize({ width: 10, height: Svg2.AUTO })

related: oslllo/svg-fixer#48
@Ghustavh97 Ghustavh97 mentioned this issue Jul 14, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working good first issue Good for newcomers
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: output svg being smaller than viewBox (#48) oslllo/svg-fixer
2 participants
@Ghustavh97 @adrianengel