ben-eb/gulp-svgmin

After svgo 4.1.0, plugin options are being ignored.

adleviton opened this issue ยท 10 comments

After upgrading to gulp-svgmin@4.1.0, and with the provided example below, taken from the ReadMe, my svg viewbox is still getting removed:

    // Alter the default list of plugins.
    plugins: [
      // You can enable a plugin with just its name.
      'sortAttrs',
      {
        name: 'removeViewBox',
        // Disable a plugin by setting active to false.
        active: false,
      },
      {
        name: 'cleanupIDs',
        // Add plugin options.
        params: {
          minify: true,
        }
      },
    ],

+1

You need change

      {
        name: 'removeViewBox',
        // Disable a plugin by setting active to false.
        active: false,
      },

to

      {
        removeViewBox: false,
      },

@ademaro Ok, but why is it stated differently in the docs? Or is this just a workaround you found out?

rejas commented

Maybe the docs are not UP-TO-DATE?

Thanks @ademaro, that seems to work.

I want to activate the plugin convertStyleToAttrs which is not part of the default presets. According to the svgo documentation at https://github.com/svg/svgo#configuration I have to do something like:

    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false,
          removeUnknownsAndDefaults: false,
        },
      },
    },
    // enable builtin plugin not included in default preset
    'convertStyleToAttrs',
  ]

Unfortunately nothing is happening and the styles arent't converted to attributes. Does anyone have an idea on how to configure that? If I do it like @ademaro suggested the console tells me to:

You are trying to enable convertStyleToAttrs which is not part of preset.
Try to put it before or after preset, for example

plugins: [
  {
    name: 'preset-default',
  },
  'cleanupListOfValues'
]

I really think that this might be a bug.

Hi!

I've also had some hard time making it work, and I also thought it was a bug. But it actually does work as explained in the current documentation.
What is true though is that the default behavior is maybe not very intuitive, as you would expect to be able by default to pass plugins options the same way you would do for the SVGO library.

The "full" flag param is key to have it work the way I would have expected.

@ben-eb Maybe this param could be renamed to something so that would make its purpose clearer ? Like "finalPluginsList" or something like that ?


For everyone having the same issue, here is a full explanation as I understand it.

You have 3 main possibilities to define plugins options :

  1. Making an external config file :
    -A svgo.config.js at the root of the project detected by this package and passed directly to SVGO.

    .pipe(svgmin({
      // This is ignored if there is a svgo.config.files at the root
        plugins: [
          'cleanupListOfValues'
        ]
     }));
    • A custom config file located somewhere else: you must then specify its path (relative to root) with the "configFile" options
    .pipe(svgmin({
        configFile: 'images/svg/config.js',
       // This is ignored if the config file is found
       plugins: [
           'cleanupListOfValues'
       ]
     }));
  2. Setting the "plugins" options to an array of objects
    In this case, every objects in the array are considered to be an override of the plugins included in SVGO's preset-default.

.pipe(svgmin({
   // This is ignored if there is a svgo.config.files
   plugins: [
      // Will be added to the overrides of preset-default
      { removeViewBox: false },
      { cleanupAttrs: false },

      // Everything below will be ignored if it is not an object AND/OR if it is NOT part of plugins included in the preset-default.
      'removeXMLNS',
      'removeDimensions',
   ]
 }));
  1. Setting the "full" flag option to true
    With that flag, the whole "plugins" array is passed "as is" to SVGO, then you can add other SVGO built-in plugins as well as custom plugins.
.pipe(svgmin({
   // This is ignored if there is a svgo.config.files

   full: true // This should be set so that the plugins list is passed directly to SVGO
   plugins: [
      // You can declare the preset-default, override some of its plugins settings, and then extend it with other built-in plugins
      {
           name: 'preset-default',
           params: {
               overrides: {
                   removeViewBox: false
               }
           }
       },

       // Everything below will be added and will extend the preset-default 
      'removeDimensions',  // Activate a plugin just by mentioning it

      // or add an object with name and params for the plugins if necessary
      {
           name: 'removeAttrs',
           params: {
               attrs: '(fill|stroke)'
           }
       },
   ]
 }));

Looks like we need to update the documentation, it was missed in #124. Happy to accept a pull request for that. ๐Ÿ‘

@ben-eb Sure thing, I'll try and have a look and send you a PR