diff --git a/docs/01-index.mdx b/docs/01-index.mdx
new file mode 100644
index 000000000..29151ed01
--- /dev/null
+++ b/docs/01-index.mdx
@@ -0,0 +1,38 @@
+---
+title: Introduction
+slug: "introduction"
+---
+
+SVGO (short for SVG Optimizer) is a Node.js library and command-line application for optimizing SVG files.
+
+SVG files, especially those exported from vector editors, usually contain a lot of redundant information. This includes editor metadata, comments, hidden elements, default or suboptimal values, and other stuff that can be safely removed or converted without affecting the rendering result.
+
+## Installation
+
+### System Requirements
+
+* [Node.js 14](https://nodejs.org/) or later
+
+<Tabs>
+  <TabItem value="npm" label="npm" default>
+
+```sh
+npm install -g svgo
+```
+
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+
+```sh
+yarn global add svgo
+```
+
+  </TabItem>
+  <TabItem value="pnpm" label="pnpm">
+
+```sh
+pnpm add -g svgo
+```
+
+  </TabItem>
+</Tabs>
diff --git a/docs/02-preset-default.mdx b/docs/02-preset-default.mdx
new file mode 100644
index 000000000..a6407836f
--- /dev/null
+++ b/docs/02-preset-default.mdx
@@ -0,0 +1,86 @@
+---
+title: Preset Default
+---
+
+SVGO runs with a default preset that has the plugin ID `preset-default`. This is the default set of plugins that are used when not explicitly specified or overridden elsewhere.
+
+:::info
+
+If you aren't using SVGO directly, like through [SVGR](https://github.com/gregberge/svgr), the default plugins may be different from the default preset.
+
+:::
+
+## Plugins List
+
+The following plugins are included in `preset-default`, in the order that they're executed:
+
+* [Remove Doctype](/docs/plugins/remove-doctype/)
+* [Remove XML Declaration](/docs/plugins/remove-xml-proc-inst/)
+* [Remove Comments](/docs/plugins/remove-comments/)
+* [Remove Metadata](/docs/plugins/remove-metadata/)
+* [Remove Editor Namespace Data](/docs/plugins/remove-editors-ns-data/)
+* [Cleanup Attributes](/docs/plugins/cleanup-attrs/)
+* [Merge Styles](/docs/plugins/merge-styles/)
+* [Inline Styles](/docs/plugins/inline-styles/)
+* [Minify Styles](/docs/plugins/minify-styles/)
+* [Cleanup IDs](/docs/plugins/cleanup-ids/)
+* [Remove Useless Defs](/docs/plugins/remove-useless-defs/)
+* [Cleanup Numeric Values](/docs/plugins/cleanup-numeric-values/)
+* [Convert Colors](/docs/plugins/convert-colors/)
+* [Remove Unknowns and Defaults](/docs/plugins/remove-unknowns-and-defaults/)
+* [Remove Non-inheritable Group Attributes](/docs/plugins/remove-non-inheritable-group-attrs/)
+* [Remove Useless Stroke and Fill](/docs/plugins/remove-useless-stroke-and-fill/)
+* [Remove ViewBox](/docs/plugins/remove-viewbox/)
+* [Cleanup Enable Background](/docs/plugins/cleanup-enable-background/)
+* [Remove Hidden Elements](/docs/plugins/remove-hidden-elems/)
+* [Remove Empty Text](/docs/plugins/remove-empty-text/)
+* [Convert Shape to Path](/docs/plugins/convert-shape-to-path/)
+* [Convert Ellipse to Circle](/docs/plugins/convert-ellipse-to-circle/)
+* [Move Element Attributes to Group](/docs/plugins/move-elems-attrs-to-group/)
+* [Move Group Attributes to Element](/docs/plugins/move-group-attrs-to-elem/)
+* [Collapse Groups](/docs/plugins/collapse-groups/)
+* [Convert Path Data](/docs/plugins/convert-path-data/)
+* [Convert Transform](/docs/plugins/convert-transform/)
+* [Remove Empty Attributes](/docs/plugins/remove-empty-attrs/)
+* [Remove Empty Containers](/docs/plugins/remove-empty-containers/)
+* [Remove Unused Namespaces](/docs/plugins/remove-unused-namespaces/)
+* [Merge Paths](/docs/plugins/merge-paths/)
+* [Sort Attributes](/docs/plugins/sort-attrs/)
+* [Sort Defs Children](/docs/plugins/sort-defs-children/)
+* [Remove Title](/docs/plugins/remove-title/)
+* [Remove Description](/docs/plugins/remove-desc/)
+
+## Disable a Plugin
+
+Sometimes a specific plugin might not be appropriate for your workflow. You can continue using `preset-default` while disabling any plugin by using the `overrides` parameter.
+
+In `overrides`, reference the plugin ID and set it to `false` to disable it:
+
+```js
+module.exports = {
+  plugins: [
+    {
+      name: 'preset-default',
+      params: {
+        overrides: {
+          removeViewBox: false,
+        },
+      },
+    },
+  ],
+};
+```
+
+Alternatively, you can also drop `default-preset` entirely, and configure your own plugin pipeline from scratch, with only the desireable plugins:
+
+```js
+module.exports = {
+  plugins: [
+    'removeDoctype',
+    'removeXMLProcInst',
+    'minifyStyles',
+    'sortAttrs',
+    'sortDefsChildren'
+  ],
+};
+```
diff --git a/docs/03-plugins/add-attributes-to-svg-elements.mdx b/docs/03-plugins/add-attributes-to-svg-elements.mdx
new file mode 100644
index 000000000..6fdf0fa05
--- /dev/null
+++ b/docs/03-plugins/add-attributes-to-svg-elements.mdx
@@ -0,0 +1,34 @@
+---
+title: Add Attributes to Elements
+svgo: 
+  pluginId: addAttributesToSVGElement
+  parameters:
+    attributes:
+      description: Attributes to add to the <code>&lt;svg&gt;</code> element. If key/value pairs are passed, the attributes and added with the paired value. If an array is passed, attributes are added with no key associated with them.
+      default: null
+    attribute:
+---
+
+Adds attributes to the outer most [`<svg>`](https://developer.mozilla.org/docs/Web/SVG/Element/svg) element in the document. This is not an optimization and will increase the size of SVG documents.
+
+:::danger
+
+This plugin is only safe to use when a map of key/value pairs is passed. If you pass an array of keys to declare empty attributes, this will produce an malformed SVG that's only usable inline an HTML5 document.
+
+:::
+
+## Usage
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/addAttributesToSVGElement.js
diff --git a/docs/03-plugins/add-classes-to-svg-element.mdx b/docs/03-plugins/add-classes-to-svg-element.mdx
new file mode 100644
index 000000000..121c58ea6
--- /dev/null
+++ b/docs/03-plugins/add-classes-to-svg-element.mdx
@@ -0,0 +1,39 @@
+---
+title: Add Classes to SVG
+svgo:
+  pluginId: addClassesToSVGElement
+  parameters:
+    classNames:
+      description: Adds the specified class names to the outer most <code>&lt;svg&gt;</code> element.
+      default: null
+    className:
+      description: Adds the specified class name to the outer most <code>&lt;svg&gt;</code> element. If <code>classNames</code> is specified, this is ignored.
+---
+
+Overrides the `class` attribute in the outer most `<svg>` element, omitting duplicates or null classes if found in your configuration.
+
+:::caution
+
+If there is no `class` attribute to begin with, it will be added. However, if the there were already classes assigned, these are removed and replaced with the classes configured in this plugin.
+
+:::
+
+If you have a standalone SVG, this is not an optimization and will increase the size of the SVG document. This plugin is only relavent when considering multiple SVGs that may be inlined a parent document.
+
+By adding classes, if the parent document is aware, you can share styles across all inlined SVG elements. 
+
+## Usage
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/addClassesToSVGElement.js
diff --git a/docs/03-plugins/cleanup-attrs.mdx b/docs/03-plugins/cleanup-attrs.mdx
new file mode 100644
index 000000000..722f6b974
--- /dev/null
+++ b/docs/03-plugins/cleanup-attrs.mdx
@@ -0,0 +1,39 @@
+---
+title: Cleanup Attributes
+svgo:
+  pluginId: cleanupAttrs
+  defaultPlugin: true
+  parameters:
+    newlines:
+      description: Replace instances of a newline with a single whitespace.
+      type: boolean
+      default: true
+    trim:
+      description: Trim whitespace characters from the start and end of attribute values.
+      type: boolean
+      default: true
+    spaces:
+      description: Replace all instances of 2 or more whitespace characters with a single whitespace.
+      type: boolean
+      default: true
+---
+
+Removes redundant whitespaces from attribute values.
+
+This will not modify the attribute keys, nor remove them if the value becomes empty after optimization.
+
+## Usage
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/cleanupAttrs.js
diff --git a/docs/03-plugins/cleanup-enable-background.mdx b/docs/03-plugins/cleanup-enable-background.mdx
new file mode 100644
index 000000000..3ec405433
--- /dev/null
+++ b/docs/03-plugins/cleanup-enable-background.mdx
@@ -0,0 +1,26 @@
+---
+title: Cleanup Enable Background
+svgo:
+  pluginId: cleanupEnableBackground
+  defaultPlugin: true
+---
+
+Removes the [`enable-background`](https://developer.mozilla.org/docs/Web/SVG/Attribute/enable-background) attribute, unless it's used in a [`<filter>`](https://developer.mozilla.org/docs/Web/SVG/Element/filter).
+
+:::info
+
+Some browsers don't support `enable-background`, so it's best to avoid that attribute regardless.
+
+:::
+
+## Usage
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/cleanupEnableBackground.js
diff --git a/docs/03-plugins/cleanup-ids.mdx b/docs/03-plugins/cleanup-ids.mdx
new file mode 100644
index 000000000..a135be76d
--- /dev/null
+++ b/docs/03-plugins/cleanup-ids.mdx
@@ -0,0 +1,58 @@
+---
+title: Cleanup IDs
+svgo:
+  pluginId: cleanupIds
+  parameters:
+    remove:
+      description: If to remove all unreferenced IDs.
+      default: true
+    minify:
+      description: If to minify referenced IDs.
+      default: true
+    preserve:
+      description: Elements with one of these IDs will be ignored.
+      default: []
+    preservePrefixes:
+      description: Elements with an ID that starts with one of these prefixes will be ignored.
+      default: []
+    force:
+      description: This plugin normally does nothing if a <code>&lt;script&gt;</code> or <code>&lt;style&gt;</code> element is found. Setting this to true will bypass that behaviour, which may result in destructive changes.
+      default: false
+  defaultPlugin: true
+---
+
+Removes unused IDs, and minifys IDs that are referenced by other elements.
+
+By default, we back off from removing and minifying IDs if a `<script>` or `<style>` element is present in the document. You can bypass this behavior by setting the `force` parameter to `true`.
+
+:::info
+
+Between v2 and v3, the plugin ID was renamed from `cleanupIDs` to `cleanupIds`, if you've recently migrated and having issues, please double-check the capitalization!
+
+:::
+
+:::caution
+
+This plugin has been known to cause problems when inlining multiple SVGs in the same parent document. Due to the predictable algorithm used to minify IDs, separate documents that are run though SVGO may end up with clashing IDs.
+
+You can work around this by enabling the [**Prefix IDs**](/docs/plugins/prefix-ids/) plugin. Alternatively, you can set the `minify` parameter to `false`, however this will not resolve the issue if your SVGs already had clashing IDs to start with.
+
+See [facebook/docusaurus#8297](https://github.com/facebook/docusaurus/issues/8297) for more context.
+
+:::
+
+## Usage
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/cleanupIds.js
diff --git a/docs/03-plugins/cleanup-list-of-values.mdx b/docs/03-plugins/cleanup-list-of-values.mdx
new file mode 100644
index 000000000..ecb6ba60e
--- /dev/null
+++ b/docs/03-plugins/cleanup-list-of-values.mdx
@@ -0,0 +1,38 @@
+---
+title: Cleanup List of Values
+svgo:
+  pluginId: cleanupListOfValues
+  parameters:
+    floatPrecision:
+      description: Number of decimal places to round to, using conventional rounding rules.
+      default: 3
+    leadingZero:
+      description: If to trim leading zeros.
+      default: true
+    defaultPx:
+      description: If to remove the units when it's <code>px</code>, as this is the default if not specified.
+      default: true
+    convertToPx:
+      description: If to convert absolute units like <code>cm</code> and <code>in</code> to <code>px</code>.
+      default: true
+---
+
+# Cleanup List of Values
+
+Rounds numeric values in attributes, such as those found in [`viewBox`](https://developer.mozilla.org/docs/Web/SVG/Attribute/viewBox), [`enable-background`](https://developer.mozilla.org/docs/Web/SVG/Attribute/enable-background), and [`points`](https://developer.mozilla.org/docs/Web/SVG/Attribute/points).
+
+## Usage
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/cleanupListOfValues.js
diff --git a/docs/03-plugins/cleanup-numeric-values.mdx b/docs/03-plugins/cleanup-numeric-values.mdx
new file mode 100644
index 000000000..01822f549
--- /dev/null
+++ b/docs/03-plugins/cleanup-numeric-values.mdx
@@ -0,0 +1,37 @@
+---
+title: Cleanup Numeric Values
+svgo:
+  pluginId: cleanupNumericValues
+  defaultPlugin: true
+  parameters:
+    floatPrecision:
+      description: Number of decimal places to round to, using conventional rounding rules.
+      default: 3
+    leadingZero:
+      description: If to trim leading zeros.
+      default: true
+    defaultPx:
+      description: If to remove the units when it's <code>px</code>, as this is the default if not specified.
+      default: true
+    convertToPx:
+      description: If to convert absolute units like <code>cm</code> and <code>in</code> to <code>px</code>.
+      default: true
+---
+
+Rounds numeric values, and removes the unit when it's `px` as this is the default.
+
+## Usage
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/cleanupNumericValues.js
diff --git a/docs/03-plugins/collapse-groups.mdx b/docs/03-plugins/collapse-groups.mdx
new file mode 100644
index 000000000..db3979827
--- /dev/null
+++ b/docs/03-plugins/collapse-groups.mdx
@@ -0,0 +1,28 @@
+---
+title: Collapse Groups
+svgo:
+  pluginId: collapseGroups
+  defaultPlugin: true
+---
+
+Finds groups that effectively do nothing and flattens them, preserving the contents of the groups. 
+
+Groups can be formed using the [`<g>`](https://developer.mozilla.org/docs/Web/SVG/Element/g) element. They're used for organizing the document, or applying [presentation attributes](https://developer.mozilla.org/docs/Web/SVG/Attribute/Presentation) to all children contained in a group.
+
+:::info
+
+This plugin doesn't remove empty groups. That's handled by the [**Remove Empty Containers**](/docs/plugins/remove-empty-containers/) plugin which is enabled by default.
+
+:::
+
+## Usage
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/collapseGroups.js
diff --git a/docs/03-plugins/convert-colors.mdx b/docs/03-plugins/convert-colors.mdx
new file mode 100644
index 000000000..073fff753
--- /dev/null
+++ b/docs/03-plugins/convert-colors.mdx
@@ -0,0 +1,53 @@
+---
+title: Convert Colors
+svgo:
+  pluginId: convertColors
+  defaultPlugin: true
+  parameters:
+    currentColor:
+      description: If to convert all instances of a color to <code>currentColor</code>. This means to inherit the active foreground color, for example in HTML5 this would be the <a href="https://developer.mozilla.org/docs/Web/CSS/color" target="_blank"><code>color</code></a> property in CSS.
+      default: false
+    names2hex:
+      description: If to convert color names to the hex equivilent.
+      default: true
+    rgb2hex:
+      description: If to convert RGB colors to the hex equivilent, does ignores RGBA.
+      default: true
+    shorthex:
+      description: If to convert 6 character hex colors to the 3 character equivilents where possible.
+      default: true
+    shortname:
+      description: If to convert hex colors to the color name, if the color name is shorter then the hex equivilent.
+      default: true
+---
+
+Converts color references to the shortest equivilent.
+
+Colors can be represented in various notations, the following table showcases some equivilent colors:
+
+| Name | rgb() | #rrggbb | #rgb |
+|---|---|---|---|
+| `red` | `rgb(255, 0, 0)` | `#ff0000` | `#f00` |
+| `orange` | `rgb(255, 165, 0)` | `#ffa500` | |
+| `yellow` | `rgb(255, 255, 0)` | `#ffff00` | `#ff0` |
+| `green` | `rgb(0, 128, 0)` | `#008000` | |
+| `blue` | `rgb(0, 0, 255)` | `#0000FF` | `#00f` |
+| `purple` | `rgb(128, 0, 128)` | `#800080` | |
+
+It makes no difference which format is received by a client, and each one has wide support across browsers and image viewing software.
+
+## Usage
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/convertColors.js
diff --git a/docs/03-plugins/convert-ellipse-to-circle.mdx b/docs/03-plugins/convert-ellipse-to-circle.mdx
new file mode 100644
index 000000000..d325d4c2b
--- /dev/null
+++ b/docs/03-plugins/convert-ellipse-to-circle.mdx
@@ -0,0 +1,20 @@
+---
+title: Convert Ellipse to Circle
+svgo:
+  pluginId: convertEllipseToCircle
+  defaultPlugin: true
+---
+
+Convert non-eccentric [`<ellipse>`](https://developer.mozilla.org/docs/Web/SVG/Element/ellipse) elements to [`<circle>`](https://developer.mozilla.org/docs/Web/SVG/Element/circle) elements.
+
+## Usage
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/convertEllipseToCircle.js
diff --git a/docs/03-plugins/convert-path-data.mdx b/docs/03-plugins/convert-path-data.mdx
new file mode 100644
index 000000000..e68e89ef2
--- /dev/null
+++ b/docs/03-plugins/convert-path-data.mdx
@@ -0,0 +1,77 @@
+---
+title: Convert Path Commands
+svgo:
+  pluginId: convertPathData
+  defaultPlugin: true
+  parameters:
+    applyTransforms:
+      description: If to apply transforms.
+      default: true
+    applyTransformsStroked:
+      description: If to apply transforms to paths with a stroke.
+      default: true
+    makeArcs:
+      description: If to convert from curves to arcs when possible. This is an object with two properties, <code>threshold</code> and <code>tolerance</code>.
+    straightCurves:
+      description: If to convert curve commands that are effectively straight lines to line commands.
+      default: true
+    lineShorthands:
+      description: If to convert regular lines to an explicit horizontal or vertical line where possible.
+      default: true
+    curveSmoothShorthands:
+      description: If to convert curves to smooth curves where possible.
+      default: true
+    floatPrecision:
+      description: Number of decimal places to round to, using conventional rounding rules.
+      default: 3
+    transformPrecision:
+      description: Number of decimal places to round to, using conventional rounding rules.
+      default: 5
+    removeUseless:
+      description: Remove redundant path commands that don't draw anything.
+      default: true
+    collapseRepeated:
+      description: Collapse repeated commands when they can be merged into one.
+      default: true
+    utilizeAbsolute:
+      description: If to convert between absolute or relative coordinates, whichever is shortest.
+      default: true
+    negativeExtraSpace:
+      default: true
+    forceAbsolutePath:
+      description: If to always convert to absolute coordinates, even if it adds more bytes. 
+      default: false
+---
+
+Optimize path commands found in `<path>`, `<glyph>`, and `<missing-glyph>` elements. Path commands are the syntax used in the `d` attribute, each character represents an instruction to draw paths.
+
+:::info
+
+You can get more context on path commands on [MDN Web Docs](https://developer.mozilla.org/docs/Web/SVG/Attribute/d#path_commands).
+
+:::
+
+This plugin uses multiple techniques to either reduce the number of instructions or reduce the attribute length:
+
+* Convert between relative or absolute coordinates, whichever is shortest.
+* Convert between commands. For example, a bézier curve that behaves like a straight line might as well use a line instruction.
+* Trim redundant delimiters and leading zeros.
+* Round numeric values using conventional rounding rules.
+
+You can read more about the plugins capabilities by going through the individual parameters.
+
+## Usage
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/convertPathData.js
diff --git a/docs/03-plugins/convert-shape-to-path.mdx b/docs/03-plugins/convert-shape-to-path.mdx
new file mode 100644
index 000000000..bb84e1290
--- /dev/null
+++ b/docs/03-plugins/convert-shape-to-path.mdx
@@ -0,0 +1,31 @@
+---
+title: Convert Shape to Path
+svgo:
+  pluginId: convertShapeToPath
+  defaultPlugin: true
+  parameters:
+    convertArcs:
+      description: If to convert <code>&lt;circle&gt;</code> and <code>&lt;ellipse&gt;</code> elements to paths.
+      default: false
+    floatPrecision:
+      description: Number of decimal places to round to, using conventional rounding rules.
+      default: null
+---
+
+Convert basic shapes to [`<path>`](https://developer.mozilla.org/docs/Web/SVG/Element/path) elements.
+
+## Usage
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/convertShapeToPath.js
diff --git a/docs/03-plugins/convert-style-to-attrs.mdx b/docs/03-plugins/convert-style-to-attrs.mdx
new file mode 100644
index 000000000..75d2d722a
--- /dev/null
+++ b/docs/03-plugins/convert-style-to-attrs.mdx
@@ -0,0 +1,44 @@
+---
+title: Convert Style to Attributes
+svgo:
+  pluginId: convertStyleToAttrs
+  parameters:
+    keepImportant:
+      description: If to always keep <a href="https://developer.mozilla.org/docs/Web/CSS/important" target="_blank"><code>!important</code></a> styles.
+      type: boolean
+      default: false
+---
+
+Converts [presentation attributes](https://developer.mozilla.org/docs/Web/SVG/Attribute/Presentation) in element styles to the equvilent XML attribute.
+
+Presentation attributes can be used in both attributes and styles, but in most cases it'll take fewer bytes to use attributes. Consider the following:
+
+```xml
+<rect width="100" height="100" style="fill:red"/>
+<!-- vs -->
+<rect width="100" height="100" fill="red"/>
+```
+
+However, because the `style` attribute doesn't require quotes between values, given enough presentation attributes, it can increase the size of the document:
+
+```xml
+<rect width="100" height="100" style="fill:red;opacity:.5;stroke-dasharray:1;stroke:blue;stroke-opacity:.5"/>
+<!-- vs -->
+<rect width="100" height="100" fill="red" opacity=".5" stroke-dasharray="1" stroke="blue" stroke-opacity=".5"/>
+```
+
+## Usage
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/convertStyleToAttrs.js
diff --git a/docs/03-plugins/convert-transform.mdx b/docs/03-plugins/convert-transform.mdx
new file mode 100644
index 000000000..91e56ce84
--- /dev/null
+++ b/docs/03-plugins/convert-transform.mdx
@@ -0,0 +1,54 @@
+---
+title: Convert Transform
+svgo:
+  pluginId: convertTransform
+  defaultPlugin: true
+  parameters:
+    convertToShorts:
+      description: Convert transforms to their shorthand alternatives.
+      default: true
+    degPrecision:
+      description: Number of decimal places to round degress values to, using conventional rounding rules. Used for <code>rotate</code> and <code>skew</code>.
+    floatPrecision:
+      description: Number of decimal places to round to, using conventional rounding rules.
+      default: 3
+    transformPrecision:
+      description: Number of decimal places to round to, using conventional rounding rules.
+      default: 5
+    matrixToTransform:
+      description: If decompose matrices into simple transforms. See <a href="https://frederic-wang.fr/decomposition-of-2d-transform-matrices.html" target="_blank">Decomposition of 2D-transform matrices</a> for more context.
+      default: true
+    shortTranslate:
+      description: If to shorten references to <code>translate</code> with redundant parameters to omit them. i.e. <code>translate(10 0)</code> → <code>translate(10)</code>
+      default: true
+    shortScale:
+      description: If to shorten references to <code>scale</code> with redundant parameters to omit them. i.e. <code>scale(2 2)</code> → <code>scale(2)</code>
+      default: true
+    shortRotate:
+      description: If to shorten references to <code>rotate</code> with redundant parameters to omit them. i.e. <code>translate(cx cy) rotate(a) translate(-cx -cy)</code> → <code>rotate(a cx cy)</code>
+      default: true
+    removeUseless:
+      description: If to remove redundant transforms like <code>translate(0)</code>, <code>skewX(0)</code>, or <code>skewY(0)</code>.
+      default: true
+    collapseIntoOne:
+      description: If to multiply transforms into one.
+      default: true
+---
+
+Collapse multiple transforms into one, convert matrices to the short aliases, and much more.
+
+## Usage
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/convertTransform.js
diff --git a/docs/03-plugins/index.mdx b/docs/03-plugins/index.mdx
new file mode 100644
index 000000000..faf70a1ea
--- /dev/null
+++ b/docs/03-plugins/index.mdx
@@ -0,0 +1,17 @@
+---
+title: Plugins
+---
+
+All optimizations performed by SVGO are through the various plugins that are either built-in, or provided in your SVGO config.
+
+Built-in plugins are focused around either optimzations or compatibility. However, the plugin architecure is very flexible, so plugins can be made to do effectively anything.
+
+## Presets
+
+Presets are generalized SVGO plugin pipelines, though there is only one built-in to SVGO called [Preset Default](/docs/preset-default/).
+
+The Preset Default pipeline can be used by either:
+
+* Not defining a `plugins` property in the config.
+* Omitting the config altogether.
+* Specifying the `preset-default` plugin.
diff --git a/docs/03-plugins/inline-styles.mdx b/docs/03-plugins/inline-styles.mdx
new file mode 100644
index 000000000..323050ebf
--- /dev/null
+++ b/docs/03-plugins/inline-styles.mdx
@@ -0,0 +1,35 @@
+---
+title: Inline Styles
+svgo:
+  pluginId: inlineStyles
+  defaultPlugin: true
+  parameters:
+    onlyMatchedOnce: 
+      description: If to only inline styles if the selector matches one element.
+      default: true
+    removeMatchedSelectors:
+      description: If to remove the selector and styles from the stylesheet while inlining the styles. This does not remove selectors that did not match any elements.
+      default: true
+    useMqs:
+      description: An array of media query conditions to use, such as <code>screen</code>. An empty string signifies all selectors outside of a media query.
+    usePseudos:
+      description: What pseudo-classes and pseudo-elements to use. An empty string signifies all non-pseudo-classes and non-pseudo-elements. 
+---
+
+Move and merge styles from `<style>` elements to a respective elements `style` attributes.
+
+## Usage
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/inlineStyles.js
diff --git a/docs/03-plugins/merge-paths.mdx b/docs/03-plugins/merge-paths.mdx
new file mode 100644
index 000000000..62247576b
--- /dev/null
+++ b/docs/03-plugins/merge-paths.mdx
@@ -0,0 +1,33 @@
+---
+title: Merge Paths
+svgo:
+  pluginId: mergePaths
+  defaultPlugin: true
+  parameters:
+    force:
+      default: false
+    floatPrecision:
+      description: Number of decimal places to round to, using conventional rounding rules.
+      default: null
+    noSpaceAfterFlags:
+      description: If to omit spaces after flags. Flags are values that can only be <code>0</code> or <code>1</code> and are used by some path commands, namely <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve" target="_blank"><code>A</code> and <code>a</code></a>.
+      default: false
+---
+
+Merge multiple paths into one.
+
+## Usage
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/mergePaths.js
diff --git a/docs/03-plugins/merge-styles.mdx b/docs/03-plugins/merge-styles.mdx
new file mode 100644
index 000000000..ec114afba
--- /dev/null
+++ b/docs/03-plugins/merge-styles.mdx
@@ -0,0 +1,20 @@
+---
+title: Merge Styles
+svgo:
+  pluginId: mergeStyles
+  defaultPlugin: true
+---
+
+Merge multiple `<style>` elements into one.
+
+## Usage
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/mergeStyles.js
diff --git a/docs/03-plugins/minify-styles.mdx b/docs/03-plugins/minify-styles.mdx
new file mode 100644
index 000000000..f6f4fb4d3
--- /dev/null
+++ b/docs/03-plugins/minify-styles.mdx
@@ -0,0 +1,28 @@
+---
+title: Minify Styles
+svgo:
+  pluginId: minifyStyles
+  defaultPlugin: true
+  parameters:
+    usage:
+      description: If to collect usage data such as tags, classes, and IDs to pass to CSSO. This is an object with four properties, which are each configured with a boolean, <code>tags</code>, <code>ids</code>, <code>classes</code>, and <code>force</code>. By default, if a script is found this does not pass usage data to CSSO, but this can be overriden with <code>force</code>, which may yield destructive changes.
+      default: true
+---
+
+Minify `<style>` elements with [CSSO](https://github.com/css/csso).
+
+## Usage
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/minifyStyles.js
diff --git a/docs/03-plugins/move-elems-attrs-to-group.mdx b/docs/03-plugins/move-elems-attrs-to-group.mdx
new file mode 100644
index 000000000..315a38d2f
--- /dev/null
+++ b/docs/03-plugins/move-elems-attrs-to-group.mdx
@@ -0,0 +1,20 @@
+---
+title: Move Element Attributes to Group
+svgo:
+  pluginId: moveElemsAttrsToGroup
+  defaultPlugin: true
+---
+
+Move an elements attributes to their enclosing group.
+
+## Usage
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/moveElemsAttrsToGroup.js
diff --git a/docs/03-plugins/move-group-attrs-to-elem.mdx b/docs/03-plugins/move-group-attrs-to-elem.mdx
new file mode 100644
index 000000000..344203a83
--- /dev/null
+++ b/docs/03-plugins/move-group-attrs-to-elem.mdx
@@ -0,0 +1,20 @@
+---
+title: Move Group Attributes to Element
+svgo:
+  pluginId: moveGroupAttrsToElems
+  defaultPlugin: true
+---
+
+Move some group attributes to the contained elements.
+
+## Usage
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/moveGroupAttrsToElems.js
diff --git a/docs/03-plugins/prefix-ids.mdx b/docs/03-plugins/prefix-ids.mdx
new file mode 100644
index 000000000..1320f088b
--- /dev/null
+++ b/docs/03-plugins/prefix-ids.mdx
@@ -0,0 +1,35 @@
+---
+title: Prefix IDs
+svgo:
+  pluginId: prefixIds
+  parameters:
+    delim:
+      description: Content to insert between the prefix and original value.
+      default: "__"
+    prefix:
+      description: Either a string or a function that resolves to a string.
+    prefixIds:
+      description: If to prefix <code>id</code> attributes.
+      default: true
+    prefixClassNames:
+      description: If to prefix classes in the <code>class</code> attribute.
+      default: true
+---
+
+Prefix element IDs and class names with the filename or another arbitrary string.
+
+## Usage
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/prefixIds.js
diff --git a/docs/03-plugins/remove-attributes-by-selector.mdx b/docs/03-plugins/remove-attributes-by-selector.mdx
new file mode 100644
index 000000000..dd8b0389e
--- /dev/null
+++ b/docs/03-plugins/remove-attributes-by-selector.mdx
@@ -0,0 +1,27 @@
+---
+title: Remove Attributes by Selector
+svgo:
+  pluginId: removeAttributesBySelector
+  parameters:
+    selectors:
+      description: This is an array of objects with two properties, <code>selector</code>, and <code>attributes</code>, which represent a CSS selector and the attributes to remove respectively.
+      default: null
+---
+
+Removes specific attributes from elements that match a CSS selector.
+
+## Usage
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeAttributesBySelector.js
diff --git a/docs/03-plugins/remove-attrs.mdx b/docs/03-plugins/remove-attrs.mdx
new file mode 100644
index 000000000..6446c438d
--- /dev/null
+++ b/docs/03-plugins/remove-attrs.mdx
@@ -0,0 +1,41 @@
+---
+title: Remove Attributes
+svgo:
+  pluginId: removeAttrs
+  parameters:
+    attrs:
+      description: A selector that matches attributes.
+      default: null
+    elemSeparator:
+      description: The pattern syntax used by this plugin is <code>element:attribute:value</code>, this changes the delimeter from <code>:</code> to another string.
+      default: ":"
+    preserveCurrentColor:
+      description: If to ignore the attribute if it's set to <code>currentColor</code>.
+      default: false
+---
+
+Remove attributes from elements matching a custom syntax.
+
+The format accepted is `[ element* : attribute* : value* ]`, where:
+
+* `element`: A regular expression matching element names. An asterisk or omission matches all elements.
+* `attribute`: A regular expression matching attribute names.
+* `value`: A regular expresison matching attribute values. An asterisk or omission matches all values.
+
+For example, `path:fill` matches all `fill` attributes in `<path>` elements.
+
+## Usage
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeAttrs.js
diff --git a/docs/03-plugins/remove-comments.mdx b/docs/03-plugins/remove-comments.mdx
new file mode 100644
index 000000000..3532851d9
--- /dev/null
+++ b/docs/03-plugins/remove-comments.mdx
@@ -0,0 +1,32 @@
+---
+title: Remove Comments
+svgo:
+  pluginId: removeComments
+  defaultPlugin: true
+---
+
+Removes all XML comments from the document.
+
+XML comments are the content between the `<!--` and `-->` syntax, and do not effect rendering. From an optimization perspective, these can always be safely removed.
+
+By default, this plugin ignores comments that start with an exclamation point (`!`), as this is often used and interpretted as important information like copyright, licensing, or attribution. 
+
+For example, the following comment can be found in [Font Awesome Free](https://fontawesome.com/license/free) icons:
+
+```svg
+<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+```
+
+Removing this may be considered a breach of the license terms, as Font Awesome Free is released under [CC-BY-4.0 (Creative Commons Attribution)](https://creativecommons.org/licenses/by/4.0/), but removing the comment would strip away that attribution.
+
+## Usage
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeComments.js
diff --git a/docs/03-plugins/remove-desc.mdx b/docs/03-plugins/remove-desc.mdx
new file mode 100644
index 000000000..c92d65f54
--- /dev/null
+++ b/docs/03-plugins/remove-desc.mdx
@@ -0,0 +1,34 @@
+---
+title: Remove Description
+svgo:
+  pluginId: removeDesc
+  defaultPlugin: true
+  parameters:
+    removeAny:
+      description: By default, this plugin only removes empty or editor attribution. Enabling this removes the <code>&lt;desc&gt;</code> element indiscriminately. 
+      type: boolean
+      default: false
+---
+
+Removes the [`<desc>`](https://developer.mozilla.org/docs/Web/SVG/Element/desc) element from the document in one of the following conditions:
+
+* The `<desc>` element is empty.
+* The `<desc>` element appears to only contain editor attribution.
+
+This plugin does not remove the `<desc>` indiscriminately by default, as it is a crucial aspect of accessibility for users of assistive technologies.
+
+## Usage
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeDesc.js
diff --git a/docs/03-plugins/remove-dimensions.mdx b/docs/03-plugins/remove-dimensions.mdx
new file mode 100644
index 000000000..38bb5904e
--- /dev/null
+++ b/docs/03-plugins/remove-dimensions.mdx
@@ -0,0 +1,25 @@
+---
+title: Remove Dimensions
+svgo:
+  pluginId: removeDimensions
+---
+
+Removes the [`width`](https://developer.mozilla.org/docs/Web/SVG/Attribute/width) and [`height`](https://developer.mozilla.org/docs/Web/SVG/Attribute/height) attribute from the top-most [`<svg>`](https://developer.mozilla.org/docs/Web/SVG/Element/svg) element if specified, and replaces it with the [`viewBox`](https://developer.mozilla.org/docs/Web/SVG/Attribute/viewBox) attribute if it's missing.
+
+:::info
+
+This is effectively the opposite of the [Remove ViewBox](/docs/plugins/remove-viewbox/) plugin, you should disable that before using this one.
+
+:::
+
+## Usage
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeDimensions.js
diff --git a/docs/03-plugins/remove-doctype.mdx b/docs/03-plugins/remove-doctype.mdx
new file mode 100644
index 000000000..bee65b5ab
--- /dev/null
+++ b/docs/03-plugins/remove-doctype.mdx
@@ -0,0 +1,20 @@
+---
+title: Remove Doctype
+svgo:
+  pluginId: removeDoctype
+  defaultPlugin: true
+---
+
+Removes the [Document Type Definition](https://en.wikipedia.org/wiki/Document_type_definition), also known as the DOCTYPE, from the document.
+
+## Usage
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeDoctype.js
diff --git a/docs/03-plugins/remove-editors-ns-data.mdx b/docs/03-plugins/remove-editors-ns-data.mdx
new file mode 100644
index 000000000..8319ad8cd
--- /dev/null
+++ b/docs/03-plugins/remove-editors-ns-data.mdx
@@ -0,0 +1,34 @@
+---
+title: Remove Editor Namespace Data
+svgo:
+  pluginId: removeEditorsNSData
+  defaultPlugin: true
+  parameters:
+    additionalNamespaces:
+      description: If you want to remove additional XML namespaces, you can provide them in a list.
+      default: []
+---
+
+Removes all XML [namespaces](https://developer.mozilla.org/docs/Web/SVG/Namespaces_Crash_Course), elements, and attributes associated with popular vector editing software.
+
+This plugin is completely safe to use before redistributing your SVG or incorporating it into a larger document.
+
+The kinds of elements that are removed are usually editor specific workspace settings. You should keep a backup of your original SVG to preserve that meta-data and continue to maintain your SVG, while you serve the optimized version to users.
+
+You can find a list of removed editor namespaces in [`_collections.js`](https://github.com/search?q=repo%3Asvg%2Fsvgo+editorNamespaces&type=code), which includes software like [Inkscape](https://inkscape.org/), Adobe Illustator, and Figma.
+
+## Usage
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeEditorsNSData.js
diff --git a/docs/03-plugins/remove-elements-by-attr.mdx b/docs/03-plugins/remove-elements-by-attr.mdx
new file mode 100644
index 000000000..4fe469ed9
--- /dev/null
+++ b/docs/03-plugins/remove-elements-by-attr.mdx
@@ -0,0 +1,30 @@
+---
+title: Remove Elements by Attribute
+svgo:
+  pluginId: removeElementsByAttr
+  parameters:
+    id:
+      description: Remove elements where one of these IDs will be match the element ID.
+      default: []
+    class:
+      description: Remove elements where the <code>class</code> attribute includes at least one of these classes.
+      default: []
+---
+
+Removes arbitrary elements by ID or className.
+
+## Usage
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeElementsByAttr.js
diff --git a/docs/03-plugins/remove-empty-attrs.mdx b/docs/03-plugins/remove-empty-attrs.mdx
new file mode 100644
index 000000000..89505cfb7
--- /dev/null
+++ b/docs/03-plugins/remove-empty-attrs.mdx
@@ -0,0 +1,26 @@
+---
+title: Remove Empty Attributes
+svgo:
+  pluginId: removeEmptyAttrs
+  defaultPlugin: true
+---
+
+Remove empty attributes from elements in the document.
+
+This ignores the following attributes, as they're used for conditional rendering:
+
+* `requiredFeatures`
+* `requiredExtensions`
+* `systemLanguage`
+
+## Usage
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeEmptyAttrs.js
diff --git a/docs/03-plugins/remove-empty-containers.mdx b/docs/03-plugins/remove-empty-containers.mdx
new file mode 100644
index 000000000..3b57a8cea
--- /dev/null
+++ b/docs/03-plugins/remove-empty-containers.mdx
@@ -0,0 +1,36 @@
+---
+title: Remove Empty Containers
+svgo:
+  pluginId: removeEmptyContainers
+  defaultPlugin: true
+---
+
+Remove container elements in the document that have no children or meaningful attributes.
+
+A container, as defined in the [SVG specifications](https://www.w3.org/TR/SVG11/intro.html#TermContainerElement), is an SVG element that can have graphical child elements. Container elements include:
+
+* [`<a>`](https://developer.mozilla.org/docs/Web/SVG/Element/a)
+* [`<defs>`](https://developer.mozilla.org/docs/Web/SVG/Element/defs)
+* [`<glyph>`](https://developer.mozilla.org/docs/Web/SVG/Element/glyph)
+* [`<g>`](https://developer.mozilla.org/docs/Web/SVG/Element/g)
+* [`<marker>`](https://developer.mozilla.org/docs/Web/SVG/Element/marker)
+* [`<mask>`](https://developer.mozilla.org/docs/Web/SVG/Element/mask)
+* [`<missing-glyph>`](https://developer.mozilla.org/docs/Web/SVG/Element/missing-glyph)
+* [`<pattern>`](https://developer.mozilla.org/docs/Web/SVG/Element/pattern)
+* [`<svg>`](https://developer.mozilla.org/docs/Web/SVG/Element/svg)
+* [`<switch>`](https://developer.mozilla.org/docs/Web/SVG/Element/switch)
+* [`<symbol>`](https://developer.mozilla.org/docs/Web/SVG/Element/symbol)
+
+Despite the `<svg>` element being a container element, they are not ignored by this plugin.
+
+## Usage
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeEmptyContainers.js
diff --git a/docs/03-plugins/remove-empty-text.mdx b/docs/03-plugins/remove-empty-text.mdx
new file mode 100644
index 000000000..389d4df9f
--- /dev/null
+++ b/docs/03-plugins/remove-empty-text.mdx
@@ -0,0 +1,40 @@
+---
+title: Remove Empty Text
+svgo:
+  pluginId: removeEmptyText
+  defaultPlugin: true
+  parameters:
+    text:
+      description: Removes empty <a href="https://developer.mozilla.org/docs/Web/SVG/Element/text" target="_blank"><code>&lt;text&gt;</code></a> elements.
+      default: true
+    tspan:
+      description: Removes empty <a href="https://developer.mozilla.org/docs/Web/SVG/Element/tspan" target="_blank"><code>&lt;tspan&gt;</code></a> elements.
+      default: true
+    tref:
+      description: Removes empty <a href="https://developer.mozilla.org/docs/Web/SVG/Element/tref" target="_blank"><code>&lt;tref&gt;</code></a> elements.
+      default: true
+---
+
+Removes empty [`<text>`](https://developer.mozilla.org/docs/Web/SVG/Element/text) and [`<tspan>`](https://developer.mozilla.org/docs/Web/SVG/Element/tspan) elements, and [`<tref>`](https://developer.mozilla.org/docs/Web/SVG/Element/tref) elements that don't reference another node in the document.
+
+:::info
+
+No browsers supports `<tref>`, so it's best to avoid that element regardless.
+
+:::
+
+## Usage
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeEmptyText.js
diff --git a/docs/03-plugins/remove-hidden-elems.mdx b/docs/03-plugins/remove-hidden-elems.mdx
new file mode 100644
index 000000000..dc6a64a2e
--- /dev/null
+++ b/docs/03-plugins/remove-hidden-elems.mdx
@@ -0,0 +1,74 @@
+---
+title: Remove Hidden Elements
+svgo:
+  pluginId: removeHiddenElems
+  defaultPlugin: true
+  parameters:
+    isHidden:
+      description: Removes elements where <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/visibility" target="_blank"><code>visibility</code></a> is <code>hidden</code>, unless a child element has <code>visibility</code> set to <code>visible</code>.
+      default: true
+    displayNone:
+      description: Removes elements where <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/display" target="_blank"><code>display</code></a> is <code>none</code>.
+      default: true
+    opacity0:
+      description: Removes element where <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/opacity" target="_blank"><code>opacity</code></a> is <code>0</code>.
+      default: true
+    circleR0:
+      description: Removes <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle" target="_blank"><code>&lt;circle&gt;</code></a> elements with a <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/r" target="_blank">radius</a> of <code>0</code>.
+      default: true
+    ellipseRX0:
+      description: Removes <a href="https://developer.mozilla.org/docs/Web/SVG/Element/ellipse" target="_blank"><code>&lt;ellipse&gt;</code></a> elements where <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/rx" target="_blank"><code>rx</code></a> is <code>0</code>.
+      default: true
+    ellipseRY0:
+      description: Removes <a href="https://developer.mozilla.org/docs/Web/SVG/Element/ellipse" target="_blank"><code>&lt;ellipse&gt;</code></a> elements where <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/ry" target="_blank"><code>ry</code></a> is <code>0</code>.
+      default: true
+    rectWidth0:
+      description: Removes <a href="https://developer.mozilla.org/docs/Web/SVG/Element/rect" target="_blank"><code>&lt;rect&gt;</code></a> elements where <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/width" target="_blank"><code>width</code></a> is <code>0</code>.
+      default: true
+    rectHeight0:
+      description: Removes <a href="https://developer.mozilla.org/docs/Web/SVG/Element/rect" target="_blank"><code>&lt;rect&gt;</code></a> elements where <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/height" target="_blank"><code>height</code></a> is <code>0</code>.
+      default: true
+    patternWidth0:
+      description: Removes <a href="https://developer.mozilla.org/docs/Web/SVG/Element/pattern" target="_blank"><code>&lt;pattern&gt;</code></a> elements where <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/width" target="_blank"><code>width</code></a> is <code>0</code>.
+      default: true
+    patternHeight0:
+      description: Removes <a href="https://developer.mozilla.org/docs/Web/SVG/Element/pattern" target="_blank"><code>&lt;pattern&gt;</code></a> elements where <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/width" target="_blank"><code>height</code></a> is <code>0</code>.
+      default: true
+    imageWidth0:
+      description: Removes <a href="https://developer.mozilla.org/docs/Web/SVG/Element/image" target="_blank"><code>&lt;image&gt;</code></a> elements where <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/width" target="_blank"><code>width</code></a> is <code>0</code>.
+      default: true
+    imageHeight0:
+      description: Removes <a href="https://developer.mozilla.org/docs/Web/SVG/Element/image" target="_blank"><code>&lt;image&gt;</code></a> elements where <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/width" target="_blank"><code>height</code></a> is <code>0</code>.
+      default: true
+    pathEmptyD:
+      description: Remove <a href="https://developer.mozilla.org/docs/Web/SVG/Element/path" target="_blank"><code>&lt;path&gt;</code></a> elements where <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/d" target="_blank"><code>d</code></a> is not set or empty. Does not apply for single point paths associated with a <a href="https://developer.mozilla.org/docs/Web/SVG/Element/marker" target="_blank"><code>marker</code></a>.
+      default: true
+    polylineEmptyPoints:
+      description: Removes <a href="https://developer.mozilla.org/docs/Web/SVG/Element/polyline" target="_blank"><code>&lt;polyline&gt;</code></a> elements with no <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/points" target="_blank">points</a> defined.
+      default: true
+    polygonEmptyPoints:
+      description: Removes <a href="https://developer.mozilla.org/docs/Web/SVG/Element/polygon" target="_blank"><code>&lt;polygon&gt;</code></a> elements with no <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/points" target="_blank">points</a> defined.
+      default: true
+---
+
+Remove hidden or invisible elements from the document. This can be elements with 0 width and height defined, or elements that were just hidden with CSS.
+
+This plugin ignores non-rendering elements, such as [`<clipPath>`](https://developer.mozilla.org/docs/Web/SVG/Element/clipPath) and [`<linearGradient>`](https://developer.mozilla.org/docs/Web/SVG/Element/linearGradient), which still apply regardless of styles, unless they are unused.
+
+Refer to the paremeters for the conditions this plugin looks for. All checks enabled by default.
+
+## Usage
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeHiddenElems.js
diff --git a/docs/03-plugins/remove-metadata.mdx b/docs/03-plugins/remove-metadata.mdx
new file mode 100644
index 000000000..3ec5fb1e3
--- /dev/null
+++ b/docs/03-plugins/remove-metadata.mdx
@@ -0,0 +1,30 @@
+---
+title: Remove Metadata
+svgo:
+  pluginId: removeMetadata
+  defaultPlugin: true
+---
+
+Removes the [`<metadata>`](https://developer.mozilla.org/docs/Web/SVG/Element/metadata) element from the document.
+
+Metadata doesn't effect rendering. From an optimization perspective, these can always be safely removed.
+
+There may be cases you'd want to disable this plugin, as some SVGs include copyright and licensing information in the metadata. In particular, documents that reference the [Creative Commons](http://creativecommons.org/ns#) namespace.
+
+:::info
+
+You can learn more about referencing copyright and licensing on the [SVG Tiny 1.2 specifications](https://www.w3.org/TR/SVGTiny12/metadata.html#metadataElementExample), or by reading [The Creative Commons Rights Expression Language](https://opensource.creativecommons.org/ccrel/).
+
+:::
+
+## Usage
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeMetadata.js
diff --git a/docs/03-plugins/remove-non-inheritable-group-attrs.mdx b/docs/03-plugins/remove-non-inheritable-group-attrs.mdx
new file mode 100644
index 000000000..742c6ab98
--- /dev/null
+++ b/docs/03-plugins/remove-non-inheritable-group-attrs.mdx
@@ -0,0 +1,20 @@
+---
+title: Remove Non-inheritable Group Attributes
+svgo:
+  pluginId: removeNonInheritableGroupAttrs
+  defaultPlugin: true
+---
+
+Removes non-inheritable [presentation attributes](https://developer.mozilla.org/docs/Web/SVG/Attribute/Presentation) from groups.
+
+## Usage
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeNonInheritableGroupAttrs.js
diff --git a/docs/03-plugins/remove-off-canvas-paths.mdx b/docs/03-plugins/remove-off-canvas-paths.mdx
new file mode 100644
index 000000000..e577ffe2e
--- /dev/null
+++ b/docs/03-plugins/remove-off-canvas-paths.mdx
@@ -0,0 +1,22 @@
+---
+title: Remove Off Canvas Paths
+svgo:
+  pluginId: removeOffCanvasPaths
+---
+
+If a [`viewBox`](https://developer.mozilla.org/docs/Web/SVG/Attribute/viewBox) is present, 
+removes [`<path>`](https://developer.mozilla.org/docs/Web/SVG/Element/path) elements that are drawn outside of it.
+
+Elements with a [`transform`](https://developer.mozilla.org/docs/Web/SVG/Attribute/transform) attribute are ignored, to avoid falsely removing elements that are brought into view through styles or an animation.
+
+## Usage
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeOffCanvasPaths.js
diff --git a/docs/03-plugins/remove-raster-images.mdx b/docs/03-plugins/remove-raster-images.mdx
new file mode 100644
index 000000000..84d8572a2
--- /dev/null
+++ b/docs/03-plugins/remove-raster-images.mdx
@@ -0,0 +1,19 @@
+---
+title: Remove Raster Images
+svgo:
+  pluginId: removeRasterImages
+---
+
+Removes inline JPEGs, PNGs, and GIFs from the document.
+
+## Usage
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeRasterImages.js
diff --git a/docs/03-plugins/remove-script-elements.mdx b/docs/03-plugins/remove-script-elements.mdx
new file mode 100644
index 000000000..ba25fd74a
--- /dev/null
+++ b/docs/03-plugins/remove-script-elements.mdx
@@ -0,0 +1,27 @@
+---
+title: Remove Scripts
+svgo:
+  pluginId: removeScriptElement
+---
+
+Removes all [`<script>`](https://developer.mozilla.org/docs/Web/SVG/Element/script) elements from the document.
+
+SVGs can be interactive through JavaScript. However, unless the SVG is coming from a trusted source, it's strongly advised to strip off JavaScript to avoid [XSS](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting) attacks.
+
+:::caution
+
+This **will** break interactive or dynamic SVGs that rely on JavaScript.
+
+:::
+
+## Usage
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeScriptElement.js
diff --git a/docs/03-plugins/remove-style-element.mdx b/docs/03-plugins/remove-style-element.mdx
new file mode 100644
index 000000000..6a17ee0c9
--- /dev/null
+++ b/docs/03-plugins/remove-style-element.mdx
@@ -0,0 +1,19 @@
+---
+title: Remove Style Elements
+svgo:
+  pluginId: removeStyleElement
+---
+
+Remove all [`<style>`](https://developer.mozilla.org/docs/Web/SVG/Element/style) elements from the document.
+
+## Usage
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeStyleElement.js
diff --git a/docs/03-plugins/remove-title.mdx b/docs/03-plugins/remove-title.mdx
new file mode 100644
index 000000000..1f6b6d218
--- /dev/null
+++ b/docs/03-plugins/remove-title.mdx
@@ -0,0 +1,29 @@
+---
+title: Remove Title
+svgo:
+  pluginId: removeTitle
+  defaultPlugin: true
+---
+
+Removes the [`<title>`](https://developer.mozilla.org/docs/Web/SVG/Element/title) element from the document.
+
+This plugin may have significant accessibility implications. The purpose of `<title>` is to provide users of assistive technologies the means to get a summary of the SVG if they're not able to view it.
+
+It can be sensible to remove the `<title>` element in one of the following scenarios:
+
+*  The SVG is purly aesthetic and has no impact on the user-experience.
+* Accessibility is handled elsewhere, such as in the [`aria-label`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-label) or [`aria-describedby`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) attributes in an HTML document.
+
+Consider doing the free [Introduction to Web Accessibility](https://www.w3.org/WAI/courses/foundations-course/) course by W3Cx for more information.
+
+## Usage
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeTitle.js
diff --git a/docs/03-plugins/remove-unknowns-and-defaults.mdx b/docs/03-plugins/remove-unknowns-and-defaults.mdx
new file mode 100644
index 000000000..38234ac26
--- /dev/null
+++ b/docs/03-plugins/remove-unknowns-and-defaults.mdx
@@ -0,0 +1,46 @@
+---
+title: Remove Unknowns and Defaults
+svgo:
+  pluginId: removeUnknownsAndDefaults
+  defaultPlugin: true
+  parameters:
+    unknownContent:
+      description: If to remove elements that are not known or can't be the child of the parent element according.
+      default: true
+    unknownAttrs:
+      description: If to remove attributes that are not assignable to the respective element.
+      default: true
+    defaultAttrs:
+      description: If to remove attributes that are assigned their default value anyway.
+      default: true
+    uselessOverrides:
+      description: If to remove attributes that are being if the same value is being inherited by it's parent element anyway.
+      default: true
+    keepDataAttrs:
+      description: If to keep <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/data-*" target="_blank"><code>data-*</code></a> attributes.
+      default: true
+    keepAriaAttrs:
+      description: If to keep <a href="https://developer.mozilla.org/docs/Web/Accessibility/ARIA" target="_blank">ARIA (Accessible Rich Internet Applications)</a> attributes, used for accessibility. This excludes <code>role</code>, which is managed with the <code>keepRoleAttr</code> parameter.
+      default: true
+    keepRoleAttr:
+      description: If to keep the ARIA <a href="https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles" target="_blank"><code>role</code></a> attribute.
+      default: false
+---
+
+Removes unknown elements and attributes, as well as attributes that are set to their default value.
+
+## Usage
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeUnknownsAndDefaults.js
diff --git a/docs/03-plugins/remove-unused-namespaces.mdx b/docs/03-plugins/remove-unused-namespaces.mdx
new file mode 100644
index 000000000..d1a7295f2
--- /dev/null
+++ b/docs/03-plugins/remove-unused-namespaces.mdx
@@ -0,0 +1,26 @@
+---
+title: Remove Unused Namespaces
+svgo:
+  pluginId: removeUnusedNS
+  defaultPlugin: true
+---
+
+Removes unused namespace declarations from the document.
+
+:::caution
+
+This plugin currently only removes unused namespaces from the top-most `<svg>` element. It does not check for unused namespaces that may be present in child elements further down the document.
+
+:::
+
+## Usage
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeUnusedNS.js
diff --git a/docs/03-plugins/remove-useless-defs.mdx b/docs/03-plugins/remove-useless-defs.mdx
new file mode 100644
index 000000000..68d73f13b
--- /dev/null
+++ b/docs/03-plugins/remove-useless-defs.mdx
@@ -0,0 +1,20 @@
+---
+title: Remove Useless Defs
+svgo:
+  pluginId: removeUselessDefs
+  defaultPlugin: true
+---
+
+Removes children of [`<defs>`](https://developer.mozilla.org/docs/Web/SVG/Element/defs) element that do not have an ID to reference.
+
+## Usage
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeUselessDefs.js
diff --git a/docs/03-plugins/remove-useless-stroke-and-fill.mdx b/docs/03-plugins/remove-useless-stroke-and-fill.mdx
new file mode 100644
index 000000000..4e884f978
--- /dev/null
+++ b/docs/03-plugins/remove-useless-stroke-and-fill.mdx
@@ -0,0 +1,36 @@
+---
+title: Remove Useless Stroke and Fill
+svgo:
+  pluginId: removeUselessStrokeAndFill
+  defaultPlugin: true
+  parameters:
+    stroke:
+      description: If to remove redundant strokes.
+      default: true
+    fill:
+      description: If to remove redundant fills.
+      default: true
+    removeNone:
+      description: If to remove elements where both the <code>fill</code> and <code>stroke</code> attributes are <code>none</code>.
+      default: false
+---
+
+Removes useless `stroke` and `fill` attributes.
+
+Assigning these attributes can sometimes change nothing in the document. For example, in most cases assigning a `stoke` color is redundant if the elements [`stroke-width`](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-width) or [`stroke-opacity`](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-opacity) is `0`.
+
+## Usage
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeUselessStrokeAndFill.js
diff --git a/docs/03-plugins/remove-viewbox.mdx b/docs/03-plugins/remove-viewbox.mdx
new file mode 100644
index 000000000..ea85ba8e6
--- /dev/null
+++ b/docs/03-plugins/remove-viewbox.mdx
@@ -0,0 +1,30 @@
+---
+title: Remove ViewBox
+svgo:
+  pluginId: removeViewBox
+  defaultPlugin: true
+---
+
+Removes the [`viewBox`](https://developer.mozilla.org/docs/Web/SVG/Attribute/viewBox) attribute where it matches the documents width and height.
+
+:::danger
+
+This plugin prevents SVGs from scaling, so they will not fill their parent container, or may clip if the container is too small.
+
+Some external tools that use SVGO have also been found to override the default preset to disable this plugin by default, including [Docusaurus](https://github.com/facebook/docusaurus/blob/e17784effa2c370d81c7806c22ad19c6dce4a1cc/packages/docusaurus-utils/src/webpackUtils.ts#L127) and [SVGR](https://react-svgr.com/docs/migrate/#svgo).
+
+See [svg/svgo#1128](https://github.com/svg/svgo/issues/1128) for more context.
+
+:::
+
+## Usage
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeViewBox.js
diff --git a/docs/03-plugins/remove-xml-proc-inst.mdx b/docs/03-plugins/remove-xml-proc-inst.mdx
new file mode 100644
index 000000000..05295d15e
--- /dev/null
+++ b/docs/03-plugins/remove-xml-proc-inst.mdx
@@ -0,0 +1,32 @@
+---
+title: Remove XML Declaration
+svgo:
+  pluginId: removeXMLProcInst
+  defaultPlugin: true
+---
+
+Removes the [XML declaration](https://developer.mozilla.org/docs/Web/XML/XML_introduction#xml_declaration) from the document.
+
+The SVG language is based on XML, and is XML compatible, so editors often include an XML declaration.
+
+An XML declaration is the line at the top of an XML file to indicate document meta-data, like encoding and which version of the XML specifications it adheres to.
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+```
+
+The XML declaration is optional in [XML 1.0](https://www.w3.org/TR/REC-xml/#sec-prolog-dtd), but mandatory in the [XML 1.1](https://www.w3.org/TR/2006/REC-xml11-20060816/#sec-prolog-dtd). If the XML declaration is omitted, the document is assumed to follow the XML 1.0 specifications, which won't impact SVG documents.
+
+It can be safely removed without impacting compatibility.
+
+## Usage
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeXMLProcInst.js
diff --git a/docs/03-plugins/remove-xmlns.mdx b/docs/03-plugins/remove-xmlns.mdx
new file mode 100644
index 000000000..00e2c672b
--- /dev/null
+++ b/docs/03-plugins/remove-xmlns.mdx
@@ -0,0 +1,27 @@
+---
+title: Remove XML Namespace
+svgo:
+  pluginId: removeXMLNS
+---
+
+Removes the `xmlns` attribute from the top-most `<svg>` element in the document.
+
+This optimization is encouraged if you plan to use your SVGs inline an HTML5 document. HTML5 does not support namespaces, so these are ignored by the browser anyway.
+
+:::caution
+
+This plugin renders SVGs unusable as standalone assets or in HTML `<img>` elements.
+
+:::
+
+## Usage
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeXMLNS.js
diff --git a/docs/03-plugins/reuse-paths.mdx b/docs/03-plugins/reuse-paths.mdx
new file mode 100644
index 000000000..17bfcd63b
--- /dev/null
+++ b/docs/03-plugins/reuse-paths.mdx
@@ -0,0 +1,23 @@
+---
+title: Reuse Paths
+svgo:
+  pluginId: reusePaths
+---
+
+Creates a definition for similar paths, and swaps the [`<path>`](https://developer.mozilla.org/docs/Web/SVG/Element/path) elements to [`<use>`](https://developer.mozilla.org/docs/Web/SVG/Element/use) elements that will reference a single `<path>` definition.
+
+It looks for `<path>` elements that have the same [`d`](https://developer.mozilla.org/docs/Web/SVG/Attribute/d), [`fill`](https://developer.mozilla.org/docs/Web/SVG/Attribute/fill), and [`stroke`](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke) attribute values, then copies them into a `<path>` in the [`defs`](https://developer.mozilla.org/docs/Web/SVG/Element/defs) element, creating it if it doesn't exist.
+
+If the path contains other attributes, such as `style` or `transform`, they will be preserved in the `<use>` element that supersedes it.
+
+## Usage
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/reusePaths.js
diff --git a/docs/03-plugins/sort-attrs.mdx b/docs/03-plugins/sort-attrs.mdx
new file mode 100644
index 000000000..99f022d10
--- /dev/null
+++ b/docs/03-plugins/sort-attrs.mdx
@@ -0,0 +1,61 @@
+---
+title: Sort Attributes
+svgo:
+  pluginId: sortAttrs
+  defaultPlugin: true
+  parameters:
+    order:
+      description: An array of attribute keys to order by. Attributes not found in the array are sorted alphabetically.
+      default:
+        - "id"
+        - "width"
+        - "height"
+        - "x"
+        - "x1"
+        - "x2"
+        - "y"
+        - "y1"
+        - "y2"
+        - "cx"
+        - "cy"
+        - "r"
+        - "fill"
+        - "stroke"
+        - "marker"
+        - "d"
+        - "points"
+    xmlnsOrder:
+      description: Set to <code>'front'</code> if XML namespaces should be placed infront of all other attributes.
+      default: "front"
+---
+
+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](https://nginx.org/en/docs/http/ngx_http_gzip_module.html) using the default compression level of 1.
+
+| SVG | Unsorted ¹ | Sorted ² | Reduced (%) |
+|---|---|---|---|
+| [Arch Linux Logo](https://archlinux.org/art/) | 2.61 kB | 2.61 kB | 0 kB (0%) |
+| [Blobs](https://gitlab.gnome.org/GNOME/gnome-backgrounds/-/blob/main/backgrounds/blobs-d.svg) | 13.89 kB | 13.88 kB | 0.01 kB (0.1%) |
+| [Isometric Madness](https://inkscape.org/~Denis_Kuznetsky/%E2%98%85isometric-madness) | 123.87 kB | 120.09 kB | 3.78 kB (3.1%) |
+| [tldr-pages Banner](https://github.com/tldr-pages/tldr/blob/main/images/banner.svg) | 791 B | 786 B | 5 B (0.6%) |
+| [Wikipedia Logo](https://en.wikipedia.org/wiki/File:Wikipedia-logo-v2.svg) | 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
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/sortAttrs.js
diff --git a/docs/03-plugins/sort-defs-children.mdx b/docs/03-plugins/sort-defs-children.mdx
new file mode 100644
index 000000000..4ed5d96eb
--- /dev/null
+++ b/docs/03-plugins/sort-defs-children.mdx
@@ -0,0 +1,39 @@
+---
+title: Sort Defs Children
+svgo:
+  pluginId: sortDefsChildren
+  defaultPlugin: true
+---
+
+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](https://nginx.org/en/docs/http/ngx_http_gzip_module.html) using the default compression level of 1.
+
+| SVG | Unsorted ¹ | Sorted ² | Reduced (%) |
+|---|---|---|---|
+| [Arch Linux Logo](https://archlinux.org/art/) | 2.61 kB | 2.61 kB | 0 kB (0%) |
+| [Blobs](https://gitlab.gnome.org/GNOME/gnome-backgrounds/-/blob/main/backgrounds/blobs-d.svg) | 13.89 kB | 13.88 kB | 0.01 kB (0.1%) |
+| [Isometric Madness](https://inkscape.org/~Denis_Kuznetsky/%E2%98%85isometric-madness) | 123.87 kB | 120.09 kB | 3.78 kB (3.1%) |
+| [tldr-pages Banner](https://github.com/tldr-pages/tldr/blob/main/images/banner.svg) | 791 B | 786 B | 5 B (0.6%) |
+| [Wikipedia Logo](https://en.wikipedia.org/wiki/File:Wikipedia-logo-v2.svg) | 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
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/sortDefsChildren.js
diff --git a/docs/04-plugins-api.mdx b/docs/04-plugins-api.mdx
new file mode 100644
index 000000000..fdab8d476
--- /dev/null
+++ b/docs/04-plugins-api.mdx
@@ -0,0 +1,122 @@
+---
+title: Plugin Architecture
+---
+
+SVGO is primarily an optimizer, and is evolving as the community continue to propose or implement better optimizations.
+
+Since SVGO v2, our plugins API use the [xast](https://github.com/syntax-tree/xast) specification, and the more practical visitor pattern.
+
+A minimal plugin looks like this:
+
+```js
+export const myPlugin = {
+  name: 'myPlugin',
+  description: 'A plugin that does nothing.',
+  fn: () => {}
+}
+```
+
+It currently does nothing, but can still be referenced in your `svgo.config.js`:
+
+```js
+import { myPlugin } from './myPlugin.js';
+
+export default {
+  plugins: [
+    myPlugin
+  ]
+}
+```
+
+The visitor pattern lets you to access nodes as the parser enters and exits them, in the order that the respective tag appears.
+
+The following JavaScript shows all of the types of nodes you can implement a callback for, which all callbacks are optional.
+
+```js
+const myPlugin = {
+  name: 'pluginName',
+  description: 'A plugin that does a lot of nothing.',
+  fn: () => {
+    return {
+      root: {
+        enter: (node) => {},
+        exit: (node) => {}
+      },
+      element: {
+        enter: (node, parentNode) => {},
+        exit: (node, parentNode) => {}
+      },
+      doctype: {
+        enter: (node, parentNode) => {},
+        exit: (node, parentNode) => {}
+      },
+      instruction: {
+        enter: (node, parentNode) => {},
+        exit: (node, parentNode) => {}
+      },
+      comment: {
+        enter: (node, parentNode) => {},
+        exit: (node, parentNode) => {}
+      },
+      cdata: {
+        enter: (node, parentNode) => {},
+        exit: (node, parentNode) => {}
+      },
+      text: {
+        enter: (node, parentNode) => {},
+        exit: (node, parentNode) => {}
+      }
+    }
+  }
+}
+```
+
+Where a parent node is present, it will always be a direct child of the current node.
+
+## Common Operations
+
+Finding specific nodes to modify their attributes:
+
+```js
+const myPlugin = {
+  name: 'makeEverythingPink',
+  description: 'Change all fill attribute values to pink.',
+  fn: () => {
+    return {
+      element: {
+        enter: (node, parentNode) => {
+          if (node.attributes.fill == null) {
+            return;
+          }
+
+          node.attributes.fill = 'pink';
+        }
+      }
+    }
+  }
+}
+```
+
+Remove a node from its parent:
+
+```js
+const removeNoAttributes = {
+  name: 'removeNoAttributes',
+  description: 'Removes nodes with no attributes.',
+  fn: () => {
+    return {
+      element: {
+        enter: (node, parentNode) => {
+          if (Object.keys(node.attributes).length !== 0) {
+            return;
+          }
+
+          parentNode.children = parentNode.children.filter(
+            (child) => child !== node
+          );
+        }
+      }
+    }
+  }
+}
+```
diff --git a/plugins-api.md b/plugins-api.md
deleted file mode 100644
index e4cc79b19..000000000
--- a/plugins-api.md
+++ /dev/null
@@ -1,248 +0,0 @@
-# Definitive guide about building SVGO plugins
-
-SVGO originally is optimizer. Though not all possible optimisation are implemented
-and sometimes custom transformation are required to solve problems.
-
-SVGO v2 refreshed its plugins api with [XAST](https://github.com/syntax-tree/xast) specification and more useful visitor pattern.
-
-Basic plugin looks like this
-
-```js
-export const myPlugin = {
-  name: 'pluginName',
-  fn: () => {
-    // do nothing
-  }
-}
-```
-
-it currently does nothing but can be used in your svgo.config.js
-
-```js
-import { myPlugin } from './myPlugin.js';
-
-export default {
-  plugins: [
-    myPlugin
-  ]
-}
-```
-
-Visitor pattern allows to access all nodes in direct order from the root to the deepest one and reversed with `enter` and `exit` callbacks.
-
-```js
-const myPlugin = {
-  name: 'pluginName',
-  fn: () => {
-    return {
-      root: {
-        enter: node => { },
-        exit: node => { }
-      },
-      element: {
-        enter: node => { },
-        exit: node => { }
-      },
-      doctype: {
-        enter: node => { },
-        exit: node => { }
-      },
-      instruction: {
-        enter: node => { },
-        exit: node => { }
-      },
-      comment: {
-        enter: node => { },
-        exit: node => { }
-      },
-      cdata: {
-        enter: node => { },
-        exit: node => { }
-      },
-      text: {
-        enter: node => { },
-        exit: node => { }
-      }
-    }
-  }
-}
-```
-
-All nodes except root also have an access to parentNode
-
-```js
-const myPlugin = {
-  name: 'pluginName',
-  fn: () => {
-    return {
-      element: {
-        enter: (node, parentNode) => {
-          parentNode.children.includes(node) // true
-        },
-        exit: (node, parentNode) => {
-          parentNode.children.includes(node) // true
-        }
-      }
-    }
-  }
-}
-```
-
-## Recipes
-
-To remove node from parent create new array with children
-
-```js
-const myPlugin = {
-  name: 'pluginName',
-  fn: () => {
-    return {
-      element: {
-        enter: (node, parentNode) => {
-          parentNode.children = parentNode.children.filter((child) => child !== node);
-        }
-      }
-    }
-  }
-}
-```
-
-Find all circles with specific attribute
-
-```js
-const myPlugin = {
-  name: 'pluginName',
-  fn: () => {
-    return {
-      element: {
-        enter: (node, parentNode) => {
-          if (node.name === 'circle' && node.attributes.fill != null) {
-            node.attributes.fill = 'modify in any way'
-          }
-        }
-      }
-    }
-  }
-}
-```
-
-Collect all elements and analyze later
-
-```js
-const myPlugin = {
-  name: 'pluginName',
-  fn: () => {
-    const elements = []
-    return {
-      element: {
-        enter: (node, parentNode) => {
-          elements.push(node);
-        }
-      },
-      root: {
-        // root exit is called last
-        exit: () => {
-          for (const element of elements) {
-            // analyze and modify
-          }
-        }
-      }
-    }
-  }
-}
-```
-
-## Nodes interfaces
-
-This is the root of svg document containg all other nodes
-
-```
-XastRoot {
-  type: 'root',
-  children: Array<
-    | XastDoctype
-    | XastInstruction
-    | XastComment
-    | XastCdata
-    | XastText
-    | XastElement
-  >
-}
-```
-
-Doctype is extracted from this markup
-
-```
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-```
-
-Where name is `svg` and data.doctype is `svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"`.
-
-```
-XastDoctype {
-  type: 'doctype',
-  name: string,
-  data: {
-    doctype: string
-  }
-}
-```
-
-Instruction is usually parse from this markup
-
-```
-<?xml version="1.0" encoding="utf-8"?>
-```
-
-Where name is `xml` and value is `version="1.0" encoding="utf-8"`
-
-```
-XastInstruction {
-  type: 'instruction',
-  name: string,
-  value: string
-}
-```
-
-Any xml comments like `<!-- value -->` are parsed as the following node
-
-```
-XastComment {
-  type: 'comment',
-  value: string,
-}
-```
-
-Text nodes
-
-```
-XastCdata {
-  type: 'cdata',
-  value: string,
-}
-```
-
-```
-XastText {
-  type: 'text',
-  value: string,
-}
-```
-
-The element can contain any other node except root one
-
-```
-XastElement {
-  type: 'element',
-  name: string,
-  attributes: { [string]: string },
-  children: Array<
-    | XastDoctype
-    | XastInstruction
-    | XastComment
-    | XastCdata
-    | XastText
-    | XastElement
-  >
-}
-```