After upgrading to 1.0 I found that all of my width and heights came back when running svgo.
Here is a sample svg before optimization:
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="13" viewBox="0 0 16 13">
<g fill="#9494AD" fill-rule="evenodd">
<path d="M16 .65c0-.39-.267-.65-.667-.65H.667C.267 0 0 .26 0 .65v1.3c0 .39.267.65.667.65h14.666c.4 0 .667-.26.667-.65V.65zM16 5.85c0-.39-.267-.65-.667-.65H.667c-.4 0-.667.26-.667.65v1.3c0 .39.267.65.667.65h14.666c.4 0 .667-.26.667-.65v-1.3zM16 11.05c0-.39-.267-.65-.667-.65H.667c-.4 0-.667.26-.667.65v1.3c0 .39.267.65.667.65h14.666c.4 0 .667-.26.667-.65v-1.3z"/>
</g>
</svg>
and here is after:
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="13"><path d="M16 .65c0-.39-.267-.65-.667-.65H.667C.267 0 0 .26 0 .65v1.3c0 .39.267.65.667.65h14.666c.4 0 .667-.26.667-.65V.65zm0 5.2c0-.39-.267-.65-.667-.65H.667c-.4 0-.667.26-.667.65v1.3c0 .39.267.65.667.65h14.666c.4 0 .667-.26.667-.65v-1.3zm0 5.2c0-.39-.267-.65-.667-.65H.667c-.4 0-.667.26-.667.65v1.3c0 .39.267.65.667.65h14.666c.4 0 .667-.26.667-.65v-1.3z" fill-rule="evenodd"/></svg>
Notice the width and height are present in optimization, even though viewBox was set.
Here is the json config file I am setting, in case that is perhaps affecting this?
{
"plugins": [
{
"removeAttrs": {
"attrs": [
"fill",
"opacity"
]
}
},
{
"removeTitle": true
},
{
"removeDesc": true
},
{
"cleanupIDs": true
},
{
"removeDimensions": true
}
]
}
Thanks in advance for the help
removeDimensions works in presence of viewBox. In v1.0.0 removeViewBox is enabled by default, so disable it first (as noted in readme).
@GreLI, Thanks, I missed the fact that the defaults changed. After updating the config by setting removeViewBox to false, it works as it did before. May I suggest adding any explicit default changes to the 1.0 changelog, just as a safety net for those like me whom overlooked it in the readme =)
Agree with @djgerhab -- would be nice to spell out the default changes in the Changelog. Might also be helpful to include in README Plugins section a default column to let us know the defaults i.e.
| Plugin | Default | Description |
| ------ | ------- | ----------- |
| cleanupAttrs | true | attributes from newlines, trailing, and repeating spaces |
What if I want to remove both? removeDimensions should NOT depend on removeViewBox. If I explicitly set removeDimensions, I want them to be removed, independently from viewbox.
With the following config, dimensions are not removed:
removeViewBox: false,
removeDimensions: true,
Same happens here, with this SVG:
<svg width="123" height="86" viewBox="0 0 123 86" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.7164 7.87903C27.0502 7.87903 28.1474 8.99581 28.1474 10.3225C28.1474 11.649 27.0502 12.7659 25.7164 12.7659C24.384 12.7659 23.2969 11.649 23.2969 10.3225C23.2969 8.99581 24.384 7.87903 25.7164 7.87903Z" fill="#BFD4C3"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.0521 7.87903C18.3846 7.87903 19.4716 8.99581 19.4716 10.3225C19.4716 11.649 18.3846 12.7659 17.0521 12.7659C15.7198 12.7659 14.6211 11.6616 14.6211 10.3225C14.6211 8.98319 15.7198 7.87903 17.0521 7.87903Z" fill="#FFCEA8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.37633 7.87903C9.70878 7.87903 10.7958 8.99581 10.7958 10.3225C10.7958 11.649 9.70878 12.7659 8.37633 12.7659C7.04399 12.7659 5.94531 11.6616 5.94531 10.3225C5.94531 8.98319 7.04399 7.87903 8.37633 7.87903Z" fill="#EBB3B3"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M101.187 0C106.029 0 110 3.99941 110 8.86761V63.1419C110 68.0206 106.029 72.0224 101.187 72.0224C101.187 72.0224 13.6415 72.0224 8.8 72.0224C3.95847 72.0224 0 68.018 0 63.1419V8.86761C0 4.00211 3.95847 0 8.8 0H101.187ZM101.187 2.57781H8.8C5.35329 2.57781 2.55814 5.40676 2.55814 8.86761V17.3486H107.442V8.86761C107.442 5.40934 104.634 2.57781 101.187 2.57781ZM107.442 19.9264H2.55814V63.1419C2.55814 66.6177 5.35329 69.4446 8.8 69.4446H101.187C104.634 69.4446 107.442 66.6151 107.442 63.1419V19.9264Z" fill="#0288D1"/>
<path d="M121.751 66.5465C121.751 76.2989 113.85 84.2037 104.106 84.2037C94.3614 84.2037 86.4609 76.2989 86.4609 66.5465C86.4609 56.7941 94.3614 48.8894 104.106 48.8894C113.85 48.8894 121.751 56.7941 121.751 66.5465Z" fill="white" stroke="#0288D1" stroke-width="2"/>
<path d="M113.161 75.6086L113.059 72.0043L106.292 65.1955C106.497 64.6013 106.612 63.9658 106.612 63.3029C106.612 60.0893 104.024 57.4845 100.831 57.4845C97.6376 57.4845 95.0488 60.0893 95.0488 63.3029C95.0488 66.5158 97.6376 69.1212 100.831 69.1212C101.375 69.1212 101.9 69.0398 102.4 68.8982L103.849 70.3565H106.714V72.8282H109.886V75.6086H113.161ZM99.398 63.6626C98.4085 63.6626 97.6068 62.8557 97.6068 61.8604C97.6068 60.8646 98.4085 60.0583 99.398 60.0583C100.388 60.0583 101.189 60.8646 101.189 61.8604C101.189 62.8557 100.388 63.6626 99.398 63.6626Z" fill="#0288D1"/>
</svg>
Any suggestion?
Update everyone:
SVGO wasn't working as said before, but I was using it through svg-sprite.
I tried the same SVG but this time using SVGO isolated only and it worked fine!
// [email protected]
const svgo = new Svgo({
plugins: [
{ removeViewBox: false },
{ removeDimensions: true },
]
})
// const svgContent = the SVG I shared on the previous comment
svgo.optimize(svgContent).then((result) => {
// both width and height were removed!
console.log(result.data)
})
Most helpful comment
With the following config, dimensions are not removed: