docs: add documentation for all commands (#1808)

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>

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'
+  ]
+};
+```

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 HTML document.
+
+:::
+
+## Usage
+
+<PluginUsage/>
+
+### Parameters
+
+<PluginParams/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/addAttributesToSVGElement.js

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

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

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

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

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