Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Where is the config file? #1329

Closed
sbking opened this issue Feb 17, 2021 · 15 comments
Closed

Where is the config file? #1329

sbking opened this issue Feb 17, 2021 · 15 comments

Comments

@sbking
Copy link

sbking commented Feb 17, 2021

The how it works page has a broken link to .svgo.yml. Where is this default config file?

@svg svg deleted a comment from MrSweGyii Feb 17, 2021
@TrySound
Copy link
Member

Sorry, docs need update. Here the list of plugins. Though it specifies order of builtin plugins. Default is set by each plugin with active field.
https://github.com/svg/svgo/blob/master/lib/svgo/config.js#L5-L55
https://github.com/svg/svgo/blob/master/plugins/addAttributesToSVGElement.js#L5

@SmartFinn
Copy link

SmartFinn commented Feb 18, 2021

@TrySound will be nice to see the default config as a separate file. I tried to convert the old yalm config to the new format but it doesn't work as expected and I don't what I do wrong.

svgo.config.js
{
  // full: true,
  // multipass: true,
  plugins: [
    { name: 'removeDoctype' },
    { name: 'removeXMLProcInst' },
    { name: 'removeComments' },
    { name: 'removeMetadata' },
    { name: 'removeEditorsNSData' },
    { name: 'removeUselessDefs' },
    {
      name: 'sortAttrs',
      params: {
        order: [
          'id',
          'fill', 'stroke',
          'opacity',
          'style', 'class',
          'width', 'height',
          'x', 'x1', 'x2',
          'y', 'y1', 'y2',
          'cx', 'cy',
          'rx', 'ry', 'r',
          'transform',
          'marker',
          'points',
          'd',
        ]
      }
    },
    {
      // rounds numeric values to the fixed precision
      // removes default ‘px’ units
      // y="749.936002px" --> y="749.936"
      name: 'cleanupNumericValues',
      params: {
        floatPrecision: 3,
        leadingZero: true,
        defaultPx: true,
        convertToPx: false,
      }
    },
    {
      // rounds list of values to the fixed precision
      // viewBox="0 0 16px 16px" --> viewBox="0 0 16 16"
      name: 'cleanupListOfValues',
      params: {
        floatPrecision: 2,
        leadingZero: true,
        defaultPx: true,
        convertToPx: false,
      }
    },
    {
      // converts colors: rgb() to #rrggbb
      name: 'convertColors',
      params: {
        shorthex: false,
        shortname: false,
      }
    },
    { name: 'convertEllipseToCircle' },
    { name: 'removeViewBox' },
    { name: 'cleanupEnableBackground' },
    {
      // removes hidden elements (zero sized, with absent attributes)
      name: 'removeHiddenElems',
      params: {
        opacity0: false
      }
    },
    { name: 'removeEmptyText' },
    { name: 'removeEmptyAttrs' },
    { name: 'removeEmptyContainers' },
    { name: 'removeUnusedNS' },
    { name: 'removeTitle' },
    { name: 'removeDesc' },
    { name: 'cleanupAttrs' },
  ]

  // configure the indent (default 4 spaces) used by `--pretty` here:
  // @see https://github.com/svg/svgo/blob/master/lib/svgo/js2svg.js#L6 for more config options
  // js2svg: { pretty: true, indent: 1 }
}

@TrySound
Copy link
Member

Show me please how your config looked before

@TrySound
Copy link
Member

Also could you show which svg files are incorrectly converted? There was a bug which broke plugins order.
Like this #1333
Fixed in 2.0.1

@TrySound
Copy link
Member

TrySound commented Feb 18, 2021

Btw you can replace { name: 'removeDoctype' }, with 'removeDoctype'.

@SmartFinn
Copy link

@TrySound

I am already tested on 2.0.1.

Also could you show which svg files are incorrectly converted?

Any of them. Seems svgo uses the default config instead of my. At least params in sortAttrs are ignored.

I used the following command for testing with the config file above:

svgo --config=svgo.config.js --multipass --pretty --indent 1 -i nautilus@32x32.svg
Result with v2.0.1
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
 <rect width="25" height="28" x="4" y="4" rx="2" ry="2" opacity=".2"/>
 <rect width="26" height="30" x="3" y="1" rx="2" ry="2" fill="#5097fa"/>
 <rect width="6" height="2" x="13" y="16" rx="1" ry="1" opacity=".2"/>
 <rect width="6" height="2" x="13" y="15" rx="1" ry="1" fill="#fff"/>
 <rect width="6" height="2" x="13" y="25" rx="1" ry="1" opacity=".2"/>
 <rect width="6" height="2" x="13" y="24" rx="1" ry="1" fill="#fff"/>
 <rect width="6" height="2" x="13" y="6" rx="1" ry="1" opacity=".2"/>
 <rect width="6" height="2" x="13" y="5" rx="1" ry="1" fill="#fff"/>
 <path fill="#3877d5" d="M3 10h26v1H3zm0 10h26v1H3z"/>
 <path d="M5 1c-1.108 0-2 .892-2 2v1c0-1.108.892-2 2-2h22c1.108 0 2 .892 2 2V3c0-1.108-.892-2-2-2z" opacity=".1" fill="#fff"/>
 <path d="M3 27v2c0 1.108.892 2 2 2h22c1.108 0 2-.892 2-2v-2c0 1.108-.892 2-2 2H5c-1.108 0-2-.892-2-2z" fill="#3877d5"/>
</svg>
Result with v1.3.2
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" version="1.1">
 <rect style="opacity:0.2" width="25" height="28" x="4" y="4" rx="2" ry="2"/>
 <rect style="fill:#5097fa" width="26" height="30" x="3" y="1" rx="2" ry="2"/>
 <rect style="opacity:0.2" width="6" height="2" x="13" y="16" rx="1" ry="1"/>
 <rect style="fill:#ffffff" width="6" height="2" x="13" y="15" rx="1" ry="1"/>
 <rect style="opacity:0.2" width="6" height="2" x="13" y="25" rx="1" ry="1"/>
 <rect style="fill:#ffffff" width="6" height="2" x="13" y="24" rx="1" ry="1"/>
 <rect style="opacity:0.2" width="6" height="2" x="13" y="6" rx="1" ry="1"/>
 <rect style="fill:#ffffff" width="6" height="2" x="13" y="5" rx="1" ry="1"/>
 <rect style="fill:#3877d5" width="26" height="1" x="3" y="10"/>
 <rect style="fill:#3877d5" width="26" height="1" x="3" y="20"/>
 <path style="opacity:0.1;fill:#ffffff" d="M 5,1 C 3.892,1 3,1.892 3,3 V 4 C 3,2.892 3.892,2 5,2 H 27 C 28.108,2 29,2.892 29,4 V 3 C 29,1.892 28.108,1 27,1 Z"/>
 <path style="fill:#3877d5" d="M 3,27 V 29 C 3,30.108 3.892,31 5,31 H 27 C 28.108,31 29,30.108 29,29 V 27 C 29,28.108 28.108,29 27,29 H 5 C 3.892,29 3,28.108 3,27 Z"/>
</svg>

If I understood correctly in 2.0.0 any {plugins: [..]} options should disable the defaults, like full: true in v1.

@TrySound
Copy link
Member

Gotcha! module.exports = {...} is missing in svgo.config.js. In node module without exports is treated as empty object. This is why you did not get an error.

@SmartFinn
Copy link

@TrySound Excellent! This is why a separate configuration is needed for the example. I had no idea that it was necessary.

Thanks.

@TrySound
Copy link
Member

Sure, will try to fix docs soon

@XhmikosR
Copy link
Contributor

I'm also hitting this issue. Not sure my config now makes sense for v2.x:

svgo.yml
# https://github.com/svg/svgo/blob/master/docs/how-it-works/en.md
# replace default config

multipass: true
#full: true

# https://github.com/svg/svgo/blob/master/lib/svgo/js2svg.js#L6 for more config options

js2svg:
  pretty: true
  indent: 2

plugins:
  - cleanupAttrs: true
  - cleanupEnableBackground: true
  - cleanupIDs: true
  - cleanupListOfValues: true
  - cleanupNumericValues: true
  - collapseGroups: true
  - convertColors: true
  - convertPathData:
      noSpaceAfterFlags: false
  - convertShapeToPath: true
  - convertStyleToAttrs: true
  - convertTransform: true
  - inlineStyles: true
  - mergePaths:
      noSpaceAfterFlags: false
  - minifyStyles: true
  - moveElemsAttrsToGroup: true
  - moveGroupAttrsToElems: true
  - removeAttrs:
      attrs:
        - "data-name"
        - "fill"
        - "clip-rule"
  - removeComments: true
  - removeDesc: true
  - removeDoctype: true
  - removeEditorsNSData: true
  - removeEmptyAttrs: true
  - removeEmptyContainers: true
  - removeEmptyText: true
  - removeHiddenElems: true
  - removeMetadata: true
  - removeNonInheritableGroupAttrs: true
  - removeTitle: true
  - removeUnknownsAndDefaults:
      keepRoleAttr: true
  - removeUnusedNS: true
  - removeUselessDefs: true
  - removeUselessStrokeAndFill: true
  - removeViewBox: false
  - removeXMLNS: false
  - removeXMLProcInst: true
  - sortAttrs: true
svgo.config.js
'use strict'

const { extendDefaultPlugins } = require('svgo')

module.exports = {
  multipass: true,
  js2svg: {
    pretty: true,
    indent: 2
  },
  plugins: extendDefaultPlugins([
    {
      name: 'cleanupAttrs'
    },
    {
      name: 'cleanupEnableBackground'
    },
    {
      name: 'cleanupIDs'
    },
    {
      name: 'cleanupListOfValues'
    },
    {
      name: 'cleanupNumericValues'
    },
    {
      name: 'collapseGroups'
    },
    {
      name: 'convertColors'
    },
    {
      name: 'convertPathData',
      params: {
        noSpaceAfterFlags: false
      }
    },
    {
      name: 'convertShapeToPath'
    },
    {
      name: 'convertStyleToAttrs'
    },
    {
      name: 'convertTransform'
    },
    {
      name: 'inlineStyles'
    },
    {
      name: 'mergePaths',
      params: {
        noSpaceAfterFlags: false
      }
    },
    {
      name: 'minifyStyles'
    },
    {
      name: 'moveElemsAttrsToGroup'
    },
    {
      name: 'moveGroupAttrsToElems'
    },
    {
      name: 'removeAttrs',
      params: {
        attrs: [
          'data-name',
          'fill',
          'clip-rule'
        ]
      }
    },
    {
      name: 'removeComments'
    },
    {
      name: 'removeDesc'
    },
    {
      name: 'removeDoctype'
    },
    {
      name: 'removeEditorsNSData'
    },
    {
      name: 'removeEmptyAttrs'
    },
    {
      name: 'removeEmptyContainers'
    },
    {
      name: 'removeEmptyText'
    },
    {
      name: 'removeHiddenElems'
    },
    {
      name: 'removeMetadata'
    },
    {
      name: 'removeNonInheritableGroupAttrs'
    },
    {
      name: 'removeTitle'
    },
    {
      name: 'removeUnknownsAndDefaults',
      params: {
        keepRoleAttr: true
      }
    },
    {
      name: 'removeUnusedNS'
    },
    {
      name: 'removeUselessDefs'
    },
    {
      name: 'removeUselessStrokeAndFill'
    },
    {
      name: 'removeViewBox',
      active: false
    },
    {
      name: 'removeXMLNS',
      active: false
    },
    {
      name: 'removeXMLProcInst'
    },
    {
      name: 'sortAttrs'
    }
  ])
}

@TrySound
Copy link
Member

Please guys see #1337 and tell if you have any questions

@XhmikosR
Copy link
Contributor

The problem I hit is that with the above config, doing this doesn't seem to have any effect:

  plugins: extendDefaultPlugins([
    //...
    {
      name: 'removeViewBox',
      active: false // or true I get the same result
    }
    //...
  ])

I've probably misunderstood something...

@TrySound
Copy link
Member

@XhmikosR Please check 2.0.2. Maybe errors were swallowed.

@XhmikosR
Copy link
Contributor

@TrySound thanks, I tested 2.0.2 too but the same thing happens. It turns out it was my custom script to blame and not the svgo config :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants