After optimization the width or height value changes
Describe the bug With some SVG files, after the optimization with SVGO, the SVG width or height attributes change their value, resulting in a different rendering.
To Reproduce
Steps to reproduce the behavior:
I try to optimize the following file with the command yarn run svgo --pretty test.svg
<svg xmlns="http://www.w3.org/2000/svg" width="127mm" height="61mm" viewBox="0 0 360 172.9134"><line x1="9.9213" y1="170.0787" x2="350.0787" y2="170.0787" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.8346" y1="162.9921" x2="2.8346" y2="9.9213" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><line x1="9.9213" y1="2.8346" x2="350.0787" y2="2.8346" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><line x1="357.1654" y1="162.9921" x2="357.1654" y2="9.9213" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><path d="M357.1654,9.9213a7.0867,7.0867,0,0,0-7.0867-7.0867" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><path d="M350.0787,170.0787a7.0866,7.0866,0,0,0,7.0867-7.0866" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><path d="M2.8346,162.9921a7.0866,7.0866,0,0,0,7.0867,7.0866" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><path d="M9.9213,2.8346A7.0867,7.0867,0,0,0,2.8346,9.9213" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><line x1="323.1496" y1="65.1969" x2="323.1496" y2="107.7165" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><line x1="317.4803" y1="107.7165" x2="317.4803" y2="65.1969" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.5977,99.9626l2.1191.6992v.8994l-6.7363-2.2881v-1.05l6.7363-2.2988v.93l-2.1191.72Zm-.68-2.209-1.9385.66c-.44.1494-.84.249-1.2295.35v.02c.3994.1.81.21,1.22.34l1.9483.66Z"/><path d="M17.4971,90.3747a4.3094,4.3094,0,0,1,.3193,1.7783,3.1477,3.1477,0,0,1-3.4082,3.3281A3.3524,3.3524,0,0,1,10.87,91.9626a3.6221,3.6221,0,0,1,.3-1.5987l.71.21a3.1621,3.1621,0,0,0-.2793,1.3594,2.5046,2.5046,0,0,0,2.7783,2.6289,2.449,2.449,0,0,0,2.708-2.5889,3.4775,3.4775,0,0,0-.2793-1.419Z"/><path d="M10.9805,86.2926h6.7363v.8692H10.9805Z"/><path d="M17.7168,84.7716H10.9805v-.9492l3.4082-2.1587a18.9925,18.9925,0,0,1,2.1884-1.2094l-.01-.02c-.8994.08-1.7188.1-2.7686.1H10.9805v-.82h6.7363v.8794l-3.418,2.1392a21.4393,21.4393,0,0,1-2.249,1.2592l.01.03c.85-.05,1.6592-.07,2.7783-.07h2.8789Z"/><path d="M339.8887,105.776a12.43,12.43,0,0,1-.14-1.8486,3.8564,3.8564,0,0,1,.84-2.7285,3.1006,3.1006,0,0,1,2.4179-.9492,3.5673,3.5673,0,0,1,2.6192.9687,4.1548,4.1548,0,0,1,.9687,2.9785,14.0985,14.0985,0,0,1-.0791,1.5791Zm5.957-.8691a5.4946,5.4946,0,0,0,.05-.88,2.5889,2.5889,0,0,0-2.8584-2.8682,2.4027,2.4027,0,0,0-2.5986,2.7286,4.95,4.95,0,0,0,.09,1.0195Z"/><path d="M346.3154,94.41a4.3082,4.3082,0,0,1,.3194,1.7783,3.1478,3.1478,0,0,1-3.4082,3.3282,3.3524,3.3524,0,0,1-3.5381-3.5186,3.62,3.62,0,0,1,.3-1.5986l.71.21a3.1639,3.1639,0,0,0-.2793,1.3594,2.5047,2.5047,0,0,0,2.7784,2.6289,2.449,2.449,0,0,0,2.708-2.5888,3.4771,3.4771,0,0,0-.2793-1.419Z"/><path d="M343.0967,85.44c2.3193,0,3.5488,1.41,3.5488,3.1284,0,1.7793-1.38,3.0283-3.4189,3.0283-2.1387,0-3.5381-1.3291-3.5381-3.1279C339.6885,86.6286,341.0977,85.44,343.0967,85.44Zm.11,5.228c1.44,0,2.7285-.78,2.7285-2.1494,0-1.38-1.2695-2.1592-2.7988-2.1592-1.3388,0-2.7383.6993-2.7383,2.1485C340.3984,89.9469,341.7275,90.6676,343.207,90.6676Z"/><path d="M339.7988,83.4372h3.9883c1.5088,0,2.1484-.67,2.1484-1.5694,0-.9995-.66-1.6391-2.1484-1.6391h-3.9883v-.8794h3.9278c2.0693,0,2.9189,1.0893,2.9189,2.5483,0,1.3794-.79,2.419-2.8789,2.419h-3.9678Z"/><path d="M340.5381,76.5573v2.0488h-.7393V73.6193h.7393v2.0586h5.9971v.8794Z"/><line x1="314.6457" y1="52.4409" x2="317.4803" y2="65.1969" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><line x1="314.6457" y1="52.4409" x2="323.1496" y2="65.1969" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><line x1="323.1496" y1="107.7165" x2="325.9843" y2="120.4724" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><line x1="317.4803" y1="107.7165" x2="325.9843" y2="120.4724" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/></svg>
and I'm getting this result:
<svg xmlns="http://www.w3.org/2000/svg" width="480" height="61mm" viewBox="0 0 360 172.913">
<path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M9.921 170.079h340.158M2.835 162.992V9.921M9.921 2.835h340.158M357.165 162.992V9.921M357.165 9.921a7.087 7.087 0 0 0-7.086-7.086M350.079 170.079a7.087 7.087 0 0 0 7.086-7.087M2.835 162.992a7.087 7.087 0 0 0 7.086 7.087M9.921 2.835A7.087 7.087 0 0 0 2.835 9.92M323.15 65.197v42.519M317.48 107.716V65.197"/>
<path d="m15.598 99.963 2.119.699v.9l-6.736-2.289v-1.05l6.736-2.299v.93l-2.12.72Zm-.68-2.21-1.939.66c-.44.15-.84.25-1.23.35v.02c.4.1.81.21 1.22.34l1.949.66ZM17.497 90.375a4.31 4.31 0 0 1 .32 1.778 3.148 3.148 0 0 1-3.409 3.328 3.352 3.352 0 0 1-3.538-3.518 3.622 3.622 0 0 1 .3-1.6l.71.21a3.162 3.162 0 0 0-.28 1.36 2.505 2.505 0 0 0 2.779 2.63 2.449 2.449 0 0 0 2.708-2.59 3.478 3.478 0 0 0-.28-1.419ZM10.98 86.293h6.737v.869H10.98ZM17.717 84.772H10.98v-.95l3.408-2.158a18.992 18.992 0 0 1 2.188-1.21l-.01-.02c-.9.08-1.719.1-2.769.1H10.98v-.82h6.737v.88l-3.418 2.139a21.44 21.44 0 0 1-2.25 1.26l.01.03c.85-.05 1.66-.07 2.78-.07h2.878ZM339.889 105.776a12.43 12.43 0 0 1-.14-1.849 3.856 3.856 0 0 1 .84-2.728 3.1 3.1 0 0 1 2.418-.95 3.567 3.567 0 0 1 2.619.97 4.155 4.155 0 0 1 .968 2.978 14.098 14.098 0 0 1-.079 1.579Zm5.957-.87a5.495 5.495 0 0 0 .05-.88 2.589 2.589 0 0 0-2.859-2.867 2.403 2.403 0 0 0-2.598 2.728 4.95 4.95 0 0 0 .09 1.02ZM346.315 94.41a4.308 4.308 0 0 1 .32 1.778 3.148 3.148 0 0 1-3.408 3.328 3.352 3.352 0 0 1-3.539-3.518 3.62 3.62 0 0 1 .3-1.599l.71.21a3.164 3.164 0 0 0-.279 1.36 2.505 2.505 0 0 0 2.779 2.629 2.449 2.449 0 0 0 2.708-2.59 3.477 3.477 0 0 0-.28-1.418ZM343.097 85.44c2.319 0 3.549 1.41 3.549 3.128 0 1.78-1.38 3.029-3.42 3.029-2.138 0-3.538-1.33-3.538-3.128 0-1.84 1.41-3.029 3.409-3.029Zm.11 5.228c1.44 0 2.728-.78 2.728-2.15 0-1.38-1.27-2.159-2.799-2.159-1.338 0-2.738.7-2.738 2.149 0 1.439 1.33 2.16 2.809 2.16ZM339.799 83.437h3.988c1.509 0 2.149-.67 2.149-1.57 0-.999-.66-1.638-2.149-1.638H339.8v-.88h3.928c2.069 0 2.919 1.09 2.919 2.549 0 1.379-.79 2.419-2.88 2.419H339.8ZM340.538 76.557v2.05h-.74v-4.988h.74v2.059h5.997v.88Z"/>
<path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m314.646 52.441 2.834 12.756M314.646 52.441l8.504 12.756M323.15 107.716l2.834 12.756M317.48 107.716l8.504 12.756"/>
</svg>
The width value is now 480, but it was 127mm. The same happens for few other files, but hundreds of other files are fine.
Expected behavior The width and height values should not change.
Desktop (please complete the following information):
- SVGO Version 2.8.0
- NodeJs Version v16.14.0
- OS: MacOS 12.2.1
Additional context
I'm using svgo with yarn inside a Ruby on Rails application in development to optimize my assets.
My SVGO configuration (svgo.config.js):
module.exports = {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
removeViewBox: false,
}
}
},
'prefixIds'
],
js2svg: {
indent: 2, // string with spaces or number of spaces. 4 by default
pretty: true, // boolean, false by default
}
}
I found something that the problematic files have in common is that in the viewbox attribute the corresponding value for the width or height (in this case 360) has no decimal point and the other value is decimal (in this case 172.9134). I don't know if it is by chance or it could be help to find the problem. Thank you very much for your support.
I just found a very similar issue, I don't know if it could be related: https://github.com/svg/svgo/issues/1080
Yeah, cleanupNumericValues is the culprit here too, so it seems your issue is a duplicate of #1080.
Thank you for the reply. I close the ticket as duplicate.