ben-eb / gulp-svgmin

Minify SVG files with gulp.
MIT License
341 stars 35 forks source link

After svgo 4.1.0, plugin options are being ignored. #125

Open adleviton opened 2 years ago

adleviton commented 2 years ago

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,
        }
      },
    ],
hisbvdis commented 2 years ago

+1

hisbvdis commented 2 years ago

@rejas

ademaro commented 2 years ago

You need change

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

to

      {
        removeViewBox: false,
      },
szuelch commented 2 years ago

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

rejas commented 2 years ago

Maybe the docs are not UP-TO-DATE?

adleviton commented 2 years ago

Thanks @ademaro, that seems to work.

szuelch commented 2 years ago

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.

jonTravens commented 2 years ago

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',
    ]
    }));
  3. 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)'
           }
       },
    ]
    }));
ben-eb commented 2 years ago

Looks like we need to update the documentation, it was missed in https://github.com/ben-eb/gulp-svgmin/pull/124. Happy to accept a pull request for that. 👍

jonTravens commented 2 years ago

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