removeDimensions isn't removing width or height

[scottsandersdev]

Describe the bug I've setup svgo as a node script to optimize our svg assets as a pre-commit hook, but one of the plugins I tested had no impact on the file. I have a simple config to test things out -

module.exports = {
  plugins: ["removeDimensions"],
};

But after running the script, the width and height are still on the svg. Am I missing something?

<svg width="104" height="34" viewBox="0 0 104 34" xmlns="http://www.w3.org/2000/svg"><rect width="102" height="32" rx="16" transform="translate(1 1)" fill="#FFF" stroke="#000" fill-rule="evenodd"/></svg>

Desktop (please complete the following information):

• SVGO Version 2.8.0
• NodeJs Version 4.17.6
• OS: macOS Big Sur

[metamorfoso]

A workaround I found in the meantime is to also explicitly disable removeViewBox:

plugins: [
    {
      name: 'removeViewBox',
      active: false,
    },
    'removeDimensions',
  ],

I'm not sure if it's a bug or an undocumented requirement (I didn't see it in the docs or release notes, but it's possible I missed it).

Anyway, the workaround seems to be giving the kind of output I'd expect for removeDimensions. That is if the presence of a viewbox property is acceptable in your case. It seems there has to be either a viewbox or width & height -- I don't know enough about SVGs to say whether this makes sense.

I got the idea from the docs for svgr, which has svgo as a dependency: https://react-svgr.com/docs/migrate/#svgo

...you have to remove viewBox by yourself if you use a custom SVGO config with --icon or --no-dimensions option.

[AlpayY]

@metamorfoso

A workaround I found in the meantime is to also explicitly disable removeViewBox

This is already mentioned in the description of the plugin, so not a bug and already documented.

[wqjiao]

@scottsandersdev Have you solved your problem？I had the same problem

[vgtmhl]

Same problem here, I followed the readme that suggests to disable removeViewBox first, but it's still not working:

module.exports = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false,
        },
      },
    },
    'removeDimensions',
  ],
}

Does not remove height and width from the svg, even if a viewBox is present

[TrySound]

Please post an example

[vgtmhl]

@TrySound thanks for coming back to me so quickly:)

Sure, running svgo with those config against the source SVG:

  <svg
    width="1em"
    height="1em"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    stroke='#FFF'>
    <path d="M20.2505 20.2505H3.75049" strokeLinecap="round" strokeLinejoin="round" />
    <path
      d="M13.5 7.5V16.5C13.5 16.9142 13.8358 17.25 14.25 17.25H18C18.4142 17.25 18.75 16.9142 18.75 16.5V7.5C18.75 7.08579 18.4142 6.75 18 6.75H14.25C13.8358 6.75 13.5 7.08579 13.5 7.5Z"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M9.75 3H6C5.58579 3 5.25 3.33579 5.25 3.75V16.5C5.25 16.9142 5.58579 17.25 6 17.25H9.75C10.1642 17.25 10.5 16.9142 10.5 16.5V3.75C10.5 3.33579 10.1642 3 9.75 3Z"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>

Produces the following target SVG:

  <svg
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    stroke='#FFF'>
    <path
      d="M20.25 20.25H3.75M13.5 7.5v9c0 .414.336.75.75.75H18a.75.75 0 0 0 .75-.75v-9a.75.75 0 0 0-.75-.75h-3.75a.75.75 0 0 0-.75.75ZM9.75 3H6a.75.75 0 0 0-.75.75V16.5c0 .414.336.75.75.75h3.75a.75.75 0 0 0 .75-.75V3.75A.75.75 0 0 0 9.75 3Z"
      stroke="#000"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>

In both, viewBox, height and width are present.

My expectations is that by turning removeViewBox to false and removeDimensions to true, then the viewbox would be preserved and height and width would be removed

[TrySound]

Im away from computer next few days. Checked only with svgomg and all worked. The only thing I see could go wrong is config not loaded by svg. How do you run it?

[vgtmhl]

I am using it via svgr CLI, to create TSX components out of svg files: svgr -d src/components/icons_new --template src/icons/template.js --icon --typescript src/icons_new

I believe the configs are loaded because if I change some configs in svgo.config.js, then the output does change (e.g. if I remove preset-default, then no optimization is done on the SVG content. But in the destination svg above, where the preset-default is enabled, the svg is indeed optimized)

---

template.js from the CLI command is:

function template({ componentName, jsx, props }, { tpl }) {
  return tpl`
    import { SVGProps } from 'react'
    import { ExtraSvgProps } from 'interfaces/Icon'
    const ${componentName} = (props: SVGProps<SVGSVGElement> & ExtraSvgProps) => ${jsx}
    export default ${componentName}
`
}

module.exports = template

[TrySound]

Alright, there is a chance svgr customize your svg with this --icon flag. Could you pls check with svgo cli.

[TrySound]

Btw you can also look at svgo-jsx https://github.com/svg/svgo-components/tree/main/packages/svgo-jsx

[vgtmhl]

Actually yes, you are very correct, that is exactly what that --icon flag does, from https://www.npmjs.com/package/@svgr/cli:

--icon -> use "1em" as width and height

Now it works like a charm, thanks you so much:D

[SethFalco]

Looks like everything was resolved here, so I'll close the issue.

The initial problem with needing to disable removeViewbox is already documented, and the other issue that kept the 1em dimensions was SVGR.

Feel free to comment or open a new issue if I've missed anything.