Better SVGR / SVGO default configs

[slorber]

Motivation

If you are an SVGR / SVGO expert, please help us find better defaults.

In #10677 we are creating a new @docusaurus/plugin-svgr plugin that you can now configure through plugin/preset options.

This plugin moves this core feature to a dedicated plugin:

import DocusaurusSvg from './docusaurus.svg';

<DocusaurusSvg />;

https://docusaurus.io/docs/markdown-features/assets#inline-svgs

This offers you escape hatches for when the default SVGR / SVGO config does not fit your needs.

But we'd still like to improve the Docusaurus SVGR / SVGO default configs

These configs define how you import and use SVG files in your React code, and changing those can break or fix existing sites by altering what gets rendered and how SVG components are converted to React components.

This would be a breaking change in an upcoming major version of Docusaurus (v4 for example).

We'd like to find defaults that work well for most sites and reduce the need for users to customize those configs. Optimizations should rather be safe and avoid potential SVG ids/class/whatever conflicts.

Current configs

These are the historical configs we use in Docusaurus v3:

const DefaultSVGOConfig: SVGOConfig = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeTitle: false,
          removeViewBox: false,
        },
      },
    },
  ],
};

const DefaultSVGRConfig: SVGRConfig = {
  prettier: false,
  svgo: true,
  svgoConfig: DefaultSVGOConfig,
  titleProp: true,
};

Related links

• Multiple inline SVGs on a page can clash #8297
• Unable to import SVG generated by Lucidchart failing with "SyntaxError: unknown file: Namespace tags are not supported by default" #10636
• chore: tailor svgo config for inline svgs #10205
• chore: load or create svgo.config.js #10211
• feat(svgr): create new Docusaurus SVGR plugin #10677

[hrumhurum]

SVGO project is notable for having some unsafe optimizations turned on by default, so this indeed creates problems.

This is what I have to use most of the times when embedding freestanding SVGs:

module.exports = {
  plugins: [
    {
      name: "preset-default",
      params: {
        overrides: {
          // Workaround SVGO issues by turning off particular optimizations.
          inlineStyles: false,
          removeUnknownsAndDefaults: false,
          convertShapeToPath: false
        }
      }
    }
  ]
};

Just my 2 cents. I tried to communicate about some of those issues to the SVGO project but they stay open indefinitely.