Svgo: How does the config work?

[ccorcos]

Its not clear how to specify the config in Node.js. Here's what I have, but its not entirely working -- especially the removeAttrs

var config = {
  cleanupAttrs: true,
  removeDoctype: true,
  removeXMLProcInst: true,
  removeComments: true,
  removeMetadata: true,
  removeTitle: true,
  removeDesc: true,
  removeUselessDefs: true,
  removeEditorsNSData: true,
  removeEmptyAttrs: true,
  removeHiddenElems: true,
  removeEmptyText: true,
  removeEmptyContainers: true,
  removeViewBox: false,
  cleanUpEnableBackground: true,
  convertStyleToAttrs: true,
  convertColors: true,
  convertPathData: true,
  convertTransform: true,
  removeUnknownsAndDefaults: true,
  removeNonInheritableGroupAttrs: true,
  removeUselessStrokeAndFill: true,
  removeUnusedNS: true,
  cleanupIDs: true,
  cleanupNumericValues: true,
  moveElemsAttrsToGroup: true,
  moveGroupAttrsToElems: true,
  collapseGroups: true,
  removeRasterImages: false,
  mergePaths: true,
  convertShapeToPath: true,
  sortAttrs: true,
  transformsWithOnePath: false,
  removeDimensions: true,
  removeAttrs: '(stroke|fill)',
  addClassesToSVGElement: true
}

[GreLI]

See how it works. There must be an array of plugins under the plugins key.

[ccorcos]

Ah. I see. A little awkward, but it works :)

var config = {
  plugins: [{
    cleanupAttrs: true,
  }, {
    removeDoctype: true,
  },{
    removeXMLProcInst: true,
  },{
    removeComments: true,
  },{
    removeMetadata: true,
  },{
    removeTitle: true,
  },{
    removeDesc: true,
  },{
    removeUselessDefs: true,
  },{
    removeEditorsNSData: true,
  },{
    removeEmptyAttrs: true,
  },{
    removeHiddenElems: true,
  },{
    removeEmptyText: true,
  },{
    removeEmptyContainers: true,
  },{
    removeViewBox: false,
  },{
    cleanUpEnableBackground: true,
  },{
    convertStyleToAttrs: true,
  },{
    convertColors: true,
  },{
    convertPathData: true,
  },{
    convertTransform: true,
  },{
    removeUnknownsAndDefaults: true,
  },{
    removeNonInheritableGroupAttrs: true,
  },{
    removeUselessStrokeAndFill: true,
  },{
    removeUnusedNS: true,
  },{
    cleanupIDs: true,
  },{
    cleanupNumericValues: true,
  },{
    moveElemsAttrsToGroup: true,
  },{
    moveGroupAttrsToElems: true,
  },{
    collapseGroups: true,
  },{
    removeRasterImages: false,
  },{
    mergePaths: true,
  },{
    convertShapeToPath: true,
  },{
    sortAttrs: true,
  },{
    transformsWithOnePath: false,
  },{
    removeDimensions: true,
  },{
    removeAttrs: {attrs: '(stroke|fill)'},
  }]
}

[GreLI]

An order of plugins execution is important, that's why an array is needed.

[ccorcos]

oh, interesting. I never thought of that. I'm building a plugin for meteor to do this stuff. It would be great if you're README has some examples of a standard set of optimizers.

[DavidWells]

👍 this thread helped me after a long long search for how to configure SVGO

[GreLI]

@DavidWells, where did you search in the first place? Do you have any suggestions?

[DavidWells]

I was searching around in these issues and inside https://github.com/mrsum/webpack-svgstore-plugin but this thread helped me get the config working.

What @ccorcos posted worked and altering the config option he provided actually changes my sprite output now! =)

I'm using svgo via the 'webpack-svgstore-plugin' package.

My webpack now looks like:

var path = require('path')
var fs = require('fs')
var webpack = require('webpack')
var packageInfo = require('./package')
var SvgStore = require('webpack-svgstore-plugin')

// define local variables
var distPath = path.join(__dirname, 'src', 'sprite')
var sourcePath = path.join(__dirname, 'src', 'assets')

var config = {
  entry: {
    index: path.join(__dirname, 'src', 'dummy-entry.js'),
  },
  output: {
    path: distPath,
    filename: '[name].js',
    chunkFilename: '[chunkhash].[id].js',
    publicPath: '/lib/'
  },
  resolve: {
      extensions: ['', '.js'],
  },
  plugins: [
    new SvgStore(path.join(sourcePath, '**/*.svg'), path.join('svg'), {
      svg: {
        xmlns: 'http://www.w3.org/2000/svg',
        style: 'position:absolute; width: 0; height: 0'
      },
      name: 'sprite.svg',
      chunk: 'index',
      prefix: '',
      svgoOptions: {
        plugins: [{
          cleanupAttrs: true,
        }, {
          removeDoctype: true,
        },{
          removeXMLProcInst: true,
        },{
          removeComments: true,
        },{
          removeMetadata: true,
        },{
          removeTitle: true,
        },{
          removeDesc: true,
        },{
          removeUselessDefs: true,
        },{
          removeEditorsNSData: true,
        },{
          removeEmptyAttrs: true,
        },{
          removeHiddenElems: true,
        },{
          removeEmptyText: true,
        },{
          removeEmptyContainers: true,
        },{
          removeViewBox: false,
        },{
          cleanUpEnableBackground: true,
        },{
          convertStyleToAttrs: true,
        },{
          convertColors: true,
        },{
          /* https://github.com/svg/svgo/blob/master/plugins/convertPathData.js#L9-L26 */
          convertPathData: false,
        },{
          convertTransform: true,
        },{
          removeUnknownsAndDefaults: true,
        },{
          removeNonInheritableGroupAttrs: true,
        },{
          removeUselessStrokeAndFill: true,
        },{
          removeUnusedNS: true,
        },{
          cleanupIDs: true,
        },{
          cleanupNumericValues: true,
        },{
          moveElemsAttrsToGroup: true,
        },{
          moveGroupAttrsToElems: true,
        },{
          collapseGroups: true,
        },{
          removeRasterImages: false,
        },{
          mergePaths: true,
        },{
          convertShapeToPath: true,
        },{
          sortAttrs: true,
        },{
          transformsWithOnePath: false,
        },{
          removeDimensions: true,
        },{
          removeAttrs: {attrs: '(stroke|fill)'},
        }]
      }
    })
  ],
  module: {
    loaders: [
      {
        test: /\.js/,
        loaders: ['babel']
      }
    ]
  }
}

module.exports = config

[ShayanZafar]

This should be in the examples section under the Node Module examples!

[6a68]

Is there a config example for non-plugin config arguments, like useShortTags? Trying to work around #209 for Safari

[ghost]

With @6a68 - how do you pass/set the useShortTags config ??

[clepore]

Since I had the same question, myself, and wasn't finding any documentation on it, I debugged the package and was able to come up with this syntax that works:

new svgo({
    js2svg: { useShortTags: false },
    plugins: [
      { removeViewBox: false },
      ...
    ]

[Tofandel]

This plugin options api is terrible... There should be a way to change some plugins settings without having to redefine all of the plugins used...