Add Classes to Elements

Overrides the class attribute in the outer most <svg> element, omitting duplicates or null classes if found in your configuration.

WARNING

If there is no class attribute to begin with, it will be added. However, if the there were already classes assigned, these are removed and replaced with the classes configured in this plugin.

If you have a standalone SVG, this is not an optimization and will increase the size of the SVG document. This plugin is only relavent when considering multiple SVGs that may be inlined a parent document.

By adding classes, if the parent document is aware, you can share styles across all inlined SVG elements.

Usage

module.exports = {
  plugins: ["addClassesToSVGElement"],
};

module.exports = {
  plugins: ["addClassesToSVGElement"],
};

Parameters

classNamesAdds the specified class names to the outer most <svg> element.

classNameAdds the specified class name to the outer most <svg> element. If classNames is specified, this is ignored.

Usage example

module.exports = {
  plugins: [
    {
      name: "addClassesToSVGElement",
      params: {
        classNames: null
      }
    }
  ]
}

module.exports = {
  plugins: [
    {
      name: "addClassesToSVGElement",
      params: {
        classNames: null
      }
    }
  ]
}

Demo

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="60" height="60" fill="red" /> </svg>{ plugins: [ "addClassesToSVGElement" ] }<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect x="20" y="20" width="60" height="60" fill="red"/></svg>

Implementation

https://github.com/svg/svgo/blob/main/plugins/addClassesToSVGElement.js