prefixIds

Prefix element IDs and class names with the filename or another arbitrary string. This is useful for reducing the likeliness of ID conflicts when multiple vectors are inlined into the same document.

Prefer Reproducible IDs

It's acceptable to generate IDs that have no relation to the node or file they're for, such as through a counter, random number generator, or UUID. Consider the following SVGO config:

svgo.config.js

let prefixCounter = 0;

module.exports = {
  plugins: [
    {
      name: 'prefixIds',
      params: {
        delim: '',
        prefix: () => prefixCounter++,
      },
    },
  ],
};

However, a solution like this can not gurantee a reproducible prefix. Unpredictable IDs can pose an issue for tooling, namely React, and anything that depends on it like Next.js and Docusaurus.

With unpredictable IDs, if you're prerendering or use SSR (Server-Side Rendering), the client-side and server-side HTML may mismatch, leading to errors on client-side and regenerating the tree.

For this reason, it's preferred to use reproducible prefixes where possible. Consider using the filename or node as a seed to produce a shorter string, rather than generating something from scratch.

Usage

Basic

svgo.config.js

module.exports = {
  plugins: [
    "prefixIds"
  ]
}

Parameters

svgo.config.js

module.exports = {
  plugins: [
    {
      name: "prefixIds",
      params: {
        delim: "__",
        prefixIds: true,
        prefixClassNames: true
      }
    }
  ]
}

Parameters

delim

Content to insert between the prefix and original value.

prefix

Either a string or a function that resolves to a string.

prefixIds

If to prefix id attributes.

prefixClassNames

If to prefix classes in the class attribute.

Demo

Live Editor

const svg = `
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox=" 0 0  150 100 " width="150">
  <!-- Created with love! -->
  <defs>
    <ellipse cx="50" cy="50.0" rx="50.00" ry="auto" fill="black" id="circle"/>
  </defs>
  <g>
    <use href="#circle" transform="skewX(16)"/>
    <rect id="useless" width="0" height="0" fill="#ff0000"/>
  </g>
</svg>
`;

const svgoConfig = {
  js2svg: { indent: 2, pretty: true },
  plugins: [
    "prefixIds"
  ]
}

render(<SvgoPreview svg={svg} svgoConfig={svgoConfig}/>);

Result

Loading...