Skip to content

Commit

Permalink
docs: add documentation for all commands (#1808)
Browse files Browse the repository at this point in the history
  • Loading branch information
SethFalco authored Nov 7, 2023
1 parent 5aad38b commit 43df633
Show file tree
Hide file tree
Showing 56 changed files with 2,005 additions and 248 deletions.
38 changes: 38 additions & 0 deletions docs/01-index.mdx
Original file line number Diff line number Diff line change
@@ -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>
86 changes: 86 additions & 0 deletions docs/02-preset-default.mdx
Original file line number Diff line number Diff line change
@@ -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'
]
};
```
34 changes: 34 additions & 0 deletions docs/03-plugins/add-attributes-to-svg-elements.mdx
Original file line number Diff line number Diff line change
@@ -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
39 changes: 39 additions & 0 deletions docs/03-plugins/add-classes-to-svg-element.mdx
Original file line number Diff line number Diff line change
@@ -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
39 changes: 39 additions & 0 deletions docs/03-plugins/cleanup-attrs.mdx
Original file line number Diff line number Diff line change
@@ -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
26 changes: 26 additions & 0 deletions docs/03-plugins/cleanup-enable-background.mdx
Original file line number Diff line number Diff line change
@@ -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
58 changes: 58 additions & 0 deletions docs/03-plugins/cleanup-ids.mdx
Original file line number Diff line number Diff line change
@@ -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
38 changes: 38 additions & 0 deletions docs/03-plugins/cleanup-list-of-values.mdx
Original file line number Diff line number Diff line change
@@ -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
Loading

0 comments on commit 43df633

Please sign in to comment.