What is SVGO and how to use it to not remove the viewBox?

About

Svgo ¹⁾ is a svg Minifier written in Javascript

You can use it:

• with the SvgOmg webapp
• via your package manager as cli
• and other bundler, plugins

Example: How to not remove the viewBox by default

The following config file disables the removeViewBox option. Why? Because without any viewBox, you will not be able to resize it via CSS.

// Svgo deletes by default the viewbox
// https://github.com/svg/svgo/blob/main/README.md#default-preset
module.exports = {
    plugins: [
        {
            name: 'preset-default',
            params: {
                overrides: {
                    removeViewBox: false
                },
            },
        },
    ],
};

• We can call the cli with yarn dlx. For instance, with the Boostrap icons.

yarn dlx svgo ..\..\node_modules\bootstrap-icons\icons\filetype-png.svg -o filetype-png.svg