Sort Defs Children 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.

SVG	Unsorted ¹	Sorted ²	Reduced (%)
Arch Linux Logo	2.61 kB	2.61 kB	0 kB (0%)
Blobs	13.89 kB	13.88 kB	0.01 kB (0.1%)
Isometric Madness	123.87 kB	120.09 kB	3.78 kB (3.1%)
tldr-pages Banner	791 B	786 B	5 B (0.6%)
Wikipedia Logo	53.96 kB	53.87 kB	0.09 kB (0.2%)

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

Usage

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

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

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