Sort Attributes

Default

Sorts attributes in all elements in the document. This does not reduce the size of the SVG, but improves readability and may improve how compression algorithms perform on it.

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

Basic

svgo.config.js

module.exports = {
  plugins: [
    "sortAttrs"
  ]
}

Parameters

svgo.config.js

module.exports = {
  plugins: [
    {
      name: "sortAttrs",
      params: {
        order: ["id","width","height","x","x1","x2","y","y1","y2","cx","cy","r","fill","stroke","marker","d","points"],
        xmlnsOrder: "front"
      }
    }
  ]
}

Parameters

order

An array of attribute keys to order by. Attributes not found in the array are sorted alphabetically.

xmlnsOrder

Set to 'front' if XML namespaces should be placed infront of all other attributes.

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

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

Result

Loading...

Implementation

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