Missing title and desc elements after svgo optimization

Question

When optimizing SVG files with svgo, the default configuration enables the removeTitle and removeDesc plugins, which strip <title> and <desc> elements from the output. This behavior can inadvertently remove accessibility information that assistive technologies rely on.

The project has discussed whether the defaults should be changed to preserve these elements, but no consensus has been reached. Users must currently disable the plugins manually via CLI flags or a configuration file, which adds overhead and may lead to inconsistent accessibility preservation across workflows.

Should svgo change its default behavior to retain <title> and <desc> elements? What would be the typical file‑size impact of keeping these elements in optimized SVGs? Are there configuration patterns that provide a reliable middle ground between accessibility and optimization without requiring per‑project overrides?

Zoha · Answer

To prevent SVGO from stripping accessibility metadata, you must explicitly disable the removeTitle and removeDesc plugins in your configuration. By default, SVGO prioritizes the smallest possible file size, which includes the removal of these non-visual elements.

Configuration Solutions

The most reliable way to ensure accessibility across a project is to use a svgo.config.js file. This avoids the need for repetitive CLI flags and ensures consistency across different developer environments and CI/CD pipelines.

Using a Configuration File

Create a svgo.config.js in your project root with the following structure:

module.exports = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeTitle: false,
          removeDesc: false,
        },
      },
    },
  ],
};

Using the CLI

For one-off optimizations, you can disable these plugins via the command line:

svgo input.svg -p removeTitle=false -p removeDesc=false

Impact and Trade-offs

File Size Impact

The impact on file size is typically negligible. Unlike path data or complex gradients, <title> and <desc> elements contain plain text. In most production SVGs, keeping these elements adds only a few dozen to a few hundred bytes, which is an acceptable trade-off for WCAG accessibility compliance.

The Accessibility Middle Ground

Rather than relying on per-project overrides, the most sustainable pattern is to treat svgo.config.js as a version-controlled asset. This establishes a "project standard" for optimization that balances byte-reduction with the requirement that screen readers can identify the image's purpose.

Verification

To verify your configuration is working, run the following check:

Create a test SVG containing both <title>Hello</title> and <desc>Description</desc>.
Run your SVGO command or build script.
Open the output file in a text editor to confirm the tags persist.

Diagnostic Note: If elements are still missing after applying these settings, please specify if you are using a wrapper (like vite-plugin-svgo or webpack-svgo), as these may have their own internal default overrides.

Missing title and desc elements after svgo optimization

1 answer