Svgo: removeDimensions no longer works in version 1.0

Created on 8 Dec 2017  路  7Comments  路  Source: svg/svgo

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

Most helpful comment

With the following config, dimensions are not removed:

removeViewBox: false,
removeDimensions: true,

All 7 comments

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) 
})
Was this page helpful?
0 / 5 - 0 ratings

Related issues

SebKay picture SebKay  路  5Comments

happyPanghu picture happyPanghu  路  3Comments

onlymega picture onlymega  路  6Comments

gregberge picture gregberge  路  3Comments

ai picture ai  路  5Comments