Optimize SVG Sprites

[danielghirasim]

Is your feature request related to a problem? Please describe.
It would be nice if you could use SVG Sprites with SVGO.

Describe the solution you'd like
SVG Sprites like below are optimized

<svg xmlns="http://www.w3.org/2000/svg" > <symbol id="test" viewBox="0 0 512 512"> <path d="..."></path> </symbol> </svg>

Describe alternatives you've considered
Currently my SVG Sprite is not optimized but there is one online tool that can optimize/minify it https://www.svgminify.com/

Additional context
The SVG sprite example is one inspired from Font Awesome pro version 5.13.3 solid.svg SVG Sprite

[SethFalco]

Hey! Thanks for the feature request.

Just want to verify that we're experiencing the same thing here. When you say we "SVG sprite is not optimized", can you clarify what actually happens?

I've tested what happens with the Font Awesome 6 Solid SVG sprites, which throws the entire file away. This kind of makes sense given none of the symbols were used, therefore they all get removed, but indeed we should make it easier to work with sprites.

For now, a config like this should work for SVG sprites:

export default {
  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
        }
      }
    }
  ]
}

This takes Font Awesome 6 Solid down from 834.976 KiB to 808.786 KiB.

In general, we do support optimizing sprite packs though, but it's not obvious how to handle them. I think it'd be better to keep the default behavior as it is, but introduce documentation or a preset specific to this use-case.

Are your SVG sprites available publically so I can review the structure and how SVGO processes it?

[danielghirasim]

Hello,

I Apologize for not including all the details.

I first tried using it through grunt-svgmin plugin then I went straight to using SVGO because it was giving me an empty svg file.

After using the config you provided it did actually work and it reduced the size from 80kb to ~70kb.

Thank you for clarifying!

P.S.: Unfortunately I cannot provide the SVG Sprite used since it's using Font Awesome Pro and some custom SVGs specific to the closed source project I am working on

[XhmikosR]

You could try using https://github.com/twbs/icons/blob/main/bootstrap-icons.svg, although the file is supposed to be already optimized through svg-sprite: https://github.com/twbs/icons/blob/main/svg-sprite.json

I agree, a preset or clear instructions would help many people!