Skip to main content

sortDefsChildren

Default

Sorts all children in the <defs> element. This does not reduce the size of the SVG, but may improve how compression algorithms perform on it.

To group similar nodes together, elements are sorted by the following attributes:

  • Frequency
  • Element name length
  • Element name

Here is a demonstration of SVGs that have been gzipped by NGINX using the default compression level of 1.

SVGUnsorted ¹Sorted ²Reduced (%)
Arch Linux Logo2.61 kB2.61 kB0 kB (0%)
Blobs13.89 kB13.88 kB0.01 kB (0.1%)
Isometric Madness123.87 kB120.09 kB3.78 kB (3.1%)
tldr-pages Banner791 B786 B5 B (0.6%)
Wikipedia Logo53.96 kB53.87 kB0.09 kB (0.2%)

¹ Uses the default plugins preset excluding sortAttr and sortDefsChildren. ² Uses the default plugins preset as-is.

Usage

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

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: [
    "sortDefsChildren"
  ]
}

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