Skip to content

Reuse Paths

Creates a definition for similar paths, and swaps the <path> elements to <use> elements that will reference a single <path> definition.

It looks for <path> elements that have the same d, fill, and stroke attribute values, then copies them into a <path> in the defs element, creating it if it doesn't exist.

If the path contains other attributes, such as style or transform, they will be preserved in the <use> element that supersedes it.

TIP

If you only need SVG 2 or inline HTML compatibility, it's recommended to include the Remove Xlink plugin towards the end of your pipeline to convert references to xlink:href to the SVG 2 href attribute.

Usage

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

Demo

Implementation

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