SVGO - removeAttrs not working? Wildcard for Svgo not working too?

Question

Hello I just begin to work with Svgs and in order to make a sprite that I can edit from css I first needed to clean multiple svg.

Here is my starting image I did from Adobe Illustrator

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 324.52 400"><defs><linearGradient id="a" x1="56.83" x2="325" y1="391.32" y2="8.34" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0b1b70"/><stop offset=".2" stop-color="#0c3276"/><stop offset=".6" stop-color="#106e87"/><stop offset="1" stop-color="#15ae99"/></linearGradient></defs><path d="M41.26 400c-2.35.03-62.36-123.55-33.36-165.65 28.28-46.59 132.7-88.48 166.8-108.13C213.48 103.87 295.76 23.03 296.63 1.98c.91-21.87 36.33 143.22-20.71 174.85 0 0 28.28-2.88 48.31-31.06 0 0 10.68 161.84-100.08 179.45-110.53 17.58-163.14 6.94-182.9 74.77Z" style="fill:url(#a);stroke-width:0"/><path d="M101.44 225h122m-122 18.5h122m-122 19h122" style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:8px"/></svg>

I downloaded svgo version 3.0.4, I did my config file like this

module.export = {
  plugins: [
    "removeStyleElement",
    "removeViewBox",
    {name: "removeAttrs",
      params: {
        attrs: '(style|viewBox)'
      }
    }
  ]
}

And It seems after running my command "svgo filename.svg --config=configfile.js"

the

style="fill:url(#a);stroke-width:0"

from my doesn't go away from my svg as well as my viewBox from ... I'm a bit lost I guess, if you can bring light on me would be thankful!!

2nd part of the problem, I tried to do the command as

"svgo *.svg --config=configfile.js"

but the wildcard wasn't recognize and I got an error of this type:

Error displayed is (Error: Error: no such file or directory 'C:\Users\X\Documents\svgo*.svg'.

It that supported anymore with svgo command? To precise, I already was in the folder of my svg files with the command prompt and it works if i replace * with any name from my svg file.

I tried to look on documentation of svgo, on stackoverflow threads if there wasn't any answer or others commands I could try.

I expect to be able to remove on multiple svg file the style & viewBox attributes with svgo in order to get a sprite that i can use and configure from css.

Answer 1

I'm answering with quotes since this is technically two questions, so to separate my answers.

doesn't go away from my svg as well as my viewBox from

You've made a mistake while doing module.exports. It's module.exports, not module.export!

Once you've address that typo, everything should work fine.

Due of this, you weren't actually exporting a config at all, so as far as SVGO was concerned, you didn't pass a configuration and so it used the default configuration.

See: What is the purpose of Node.js module.exports and how do you use it?

Here is how your config should look:

svgo.config.js

module.exports = {
  plugins: [
    "removeStyleElement",
    "removeViewBox",
    {
      name: "removeAttrs",
      params: {
        attrs: '(style|viewBox)'
      }
    }
  ]
}

Error displayed is (Error: Error: no such file or directory 'C:\Users\X\Documents\svgo*.svg'.

This error is because you forgot to put a space between svgo and *.svg, so your operating system thought you were running the command svgo*.svg which didn't exist.

However, in general the problem you're having is that SVGO accepts a list of files as an argument, not a glob (i.e. *.svg). In POSIX-compliant shells like Bash, globs are resolved by the shell and passed to the program, so individual programs don't have to.

What you did would've worked on Linux, macOS, or on Windows if you were using Git BASH, for example.

Both Command Prompt and PowerShell don't expand globs as you'd expect, and SVGO doesn't resolve them internally, so this doesn't work.

What you can do instead is use the --folder/-f argument to pass a directory of SVGs to SVGO.

svgo -f . --config=rmstyle.js