reusePaths

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 removeXlink plugin towards the end of your pipeline to convert references to xlink:href to the SVG 2 href attribute.

Usage

svgo.config.js
module.exports = {
  plugins: [
    "reusePaths"
  ]
}

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="/?originalUrl=https%3A%2F%2Fsvgo.dev%2F%26quot%3B%23circle%26quot%3B%2520transform%3D%26quot%3BskewX(16)%26quot%3B%2F">
    <rect id="useless" width="0" height="0" fill="#ff0000"/>
  </g>
</svg>
`;

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

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

Result