Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

attributeSort

Attribute ordering strategy.

Type"none" | "canonical" | "alphabetical"
Default"canonical"

Values

"none"

Preserve the original attribute order:

<!-- input -->
<svg>
  <rect y="20" x="10" height="50" width="100" fill="#ff0000" id="box" />
</svg>
<!-- output — order unchanged -->
<svg>
  <rect y="20" x="10" height="50" width="100" fill="#ff0000" id="box" />
</svg>

"canonical" (default)

Sort attributes in SVG-idiomatic order (id, class, positional, dimensional, presentation, etc.):

<!-- input -->
<svg>
  <rect y="20" x="10" height="50" width="100" fill="#ff0000" id="box" />
</svg>
<!-- output -->
<svg>
  <rect id="box" x="10" y="20" width="100" height="50" fill="#ff0000" />
</svg>

"alphabetical"

Sort attributes in strict alphabetical order:

<!-- input -->
<svg>
  <rect y="20" x="10" height="50" width="100" fill="#ff0000" id="box" />
</svg>
<!-- output -->
<svg>
  <rect fill="#ff0000" height="50" id="box" width="100" x="10" y="20" />
</svg>

Config

{
  "svg": {
    "attributeSort": "canonical"
  }
}