RFC: Defining a General Preset for SVG Sprites

[SethFalco]

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:

• bug: svg "sprites" are broken when using svgo #1896
• Optimize SVG Sprites #1962

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
      }
    }
  }
];

— #1962 (comment)

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,
      },
    },
  },
];

— #1896 (comment)

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:

• Bootstrap
• Font Awesome

---

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