RFC: Defining a General Preset for SVG Sprites

We're planning to add a preset for SVG sprites.

It's come up twice in the past when the out-of-the-box experience of SVGO yielded unexpected results:

There are 2, or maybe 3 things that I want to do:

Define a preset-sprites preset aimed as SVG sprites.
Add documentation to svgo.dev that explicitly recommends the preset for SVG sprites.
(Maybe) Define the core characteristics of an SVG sprite, and if it's worth changing the default behavior of SVGO if the input looks like one (i.e. if the file only contains <symbol>s). For example, one or more of the following:
- Use preset-sprites instead of preset-default automatically.
- Log a warning, and ask the user to explicitly configure SVGO to remove ambiguity.

However, I personally am neither a user nor maintainer of an SVG icon set or sprite sheet. So before diving into this, would anyone that is like to give feedback.

In particular, what plugins do you believe can be safely enabled or must be disabled, baring in mind the aim of the preset is to optimize as much as reasonable, while being generic/safe. So, we don't want to only make the optimal config for a single project, but a reasonably optimized and safe config that should work across projects.

I looked into this briefly in the past only looking at plugins to disable, and proposed this:

const plugins = [
  {
    name: 'preset-default',
    params: {
      overrides: {
        removeHiddenElems: false, // don't remove invisible elements
        removeUselessDefs: false, // don't remove unused symbols
        cleanupIds: false // don't remove symbol ids
      }
    }
  }
];

— https://github.com/svg/svgo/issues/1962#issuecomment-1941354629

In one of the issues reported to SVGO, a user used the following plugins:

const plugins: [
  {
    name: 'preset-default',
    params: {
      overrides: {
        removeHiddenElems: false,
        cleanupIds: false,
      },
    },
  },
];

— https://github.com/svg/svgo/issues/1896#issuecomment-1866798474

Bootstrap uses the following plugins:

const plugins = [
  {
    "name": "preset-default",
    "params": {
      "overrides": {
        "removeUnknownsAndDefaults": {
          "keepDataAttrs": false,
          "keepRoleAttr": true
        },
        "removeViewBox": false
      }
    }
  },
  "cleanupListOfValues",
  "removeXMLNS",
  {
    "name": "removeAttrs",
    "params": {
      "attrs": [
        "clip-rule",
        "fill"
      ]
    }
  }
];

— https://github.com/twbs/icons/blob/main/svg-sprite.json

Some examples of popular SVG sprites:

There is no pressure for anyone to chime in, but just CC-ing some individuals as I suspect you'll have valuable input:

@XhmikosR
@robmadole

svg / svgo

RFC: Defining a General Preset for SVG Sprites #2035