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="#circle" transform="skewX(16)"/> <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
Loading...