Skip to main content

sortAttrs

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.

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

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...