# eslint-plugin-svgo

> Optimize SVG files with SVGO via ESLint.

Latest version **0.14.0** (published 2026-09-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install eslint-plugin-svgo
pnpm add eslint-plugin-svgo
yarn add eslint-plugin-svgo
bun add eslint-plugin-svgo
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.14.0 |
| Published | 2026-09-01 |
| First published | 2024-12-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 56.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| Author | ntnyq |
| Maintainers | ntnyq |
| Keywords | eslint, eslint-plugin, svgo |

## Links

- npm: https://www.npmjs.com/package/eslint-plugin-svgo
- Repository: https://github.com/ntnyq/eslint-plugin-svgo
- Homepage: https://github.com/ntnyq/eslint-plugin-svgo#readme
- Issues: https://github.com/ntnyq/eslint-plugin-svgo/issues
- npm.io page: https://npm.io/package/eslint-plugin-svgo

## Dependencies (3)

- [svgo](https://npm.io/package/svgo.md) ^4.1.0
- [synckit](https://npm.io/package/synckit.md) ^0.11.13
- [generate-differences](https://npm.io/package/generate-differences.md) ^0.1.1

## Alternatives

- [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) — 2.9M weekly downloads
- [eslint-config-expo](https://npm.io/package/eslint-config-expo.md) — 1.5M weekly downloads
- [@matter/protocol](https://npm.io/package/@matter/protocol.md) — 63.5K weekly downloads
- [@eventcatalog/linter](https://npm.io/package/@eventcatalog/linter.md) — 24.8K weekly downloads
- [@pandacss/eslint-plugin](https://npm.io/package/@pandacss/eslint-plugin.md) — 18.7K weekly downloads

## Recent versions

- 0.14.0 (latest) — 2026-09-01
- 0.13.0 — 2026-07-26
- 0.12.0 — 2026-02-24
- 0.11.3 — 2025-09-16
- 0.11.2 — 2025-09-16
- 0.11.1 — 2025-08-08
- 0.11.0 — 2025-08-08
- 0.10.0 — 2025-07-19
- 0.9.0 — 2025-06-29
- 0.8.0 — 2025-05-09
- 0.7.2 — 2025-05-06
- 0.7.1 — 2025-04-08
- 0.7.0 — 2025-03-11
- 0.6.0 — 2025-03-03
- 0.5.2 — 2025-02-16
- … 18 more at https://npm.io/package/eslint-plugin-svgo/versions

## README

# eslint-plugin-svgo

[![CI](https://github.com/ntnyq/eslint-plugin-svgo/workflows/CI/badge.svg)](https://github.com/ntnyq/eslint-plugin-svgo/actions)
[![NPM VERSION](https://img.shields.io/npm/v/eslint-plugin-svgo.svg)](https://www.npmjs.com/package/eslint-plugin-svgo)
[![NPM DOWNLOADS](https://img.shields.io/npm/dy/eslint-plugin-svgo.svg)](https://www.npmjs.com/package/eslint-plugin-svgo)
[![CODECOV](https://codecov.io/github/ntnyq/eslint-plugin-svgo/graph/badge.svg?token=1B7879ETB6)](https://codecov.io/github/ntnyq/eslint-plugin-svgo)
[![LICENSE](https://img.shields.io/github/license/ntnyq/eslint-plugin-svgo.svg)](https://github.com/ntnyq/eslint-plugin-svgo/blob/main/LICENSE)

> An ESLint plugin that brings the power of [SVGO](https://github.com/svg/svgo) to your SVG optimization workflow.

Optimize SVG files with [SVGO](https://github.com/svg/svgo) via ESLint rules, enabling seamless integration into your development and CI/CD pipelines.

## ✨ Features

- 🚀 Full integration with SVGO v4+
- 📋 Lint SVG files with ESLint
- ⚙️ Highly configurable SVGO plugins
- 🔧 Support for external SVGO config files
- 📦 Works with ESLint's flat config format
- 🎯 TypeScript support

## Compatibility

| Package | Version  |
| ------- | -------- |
| SVGO    | v4.0.0+  |
| ESLint  | v9.5.0+  |
| Node.js | v20.0.0+ |

## 📦 Installation

Choose your package manager:

```shell
npm i eslint-plugin-svgo -D
```

```shell
yarn add eslint-plugin-svgo -D
```

```shell
pnpm add eslint-plugin-svgo -D
```

## 🚀 Quick Start

The quickest way to get started - use the recommended configuration:

```js
// eslint.config.js
import { defineConfig } from 'eslint/config'
import pluginSVGO from 'eslint-plugin-svgo'

export default defineConfig([
  // Your other configs...
  pluginSVGO.configs.recommended,
])
```

This will automatically:

- Target all `**/*.svg` files
- Enable the `svgo/svgo` rule with sensible defaults
- Use the `preset-default` SVGO plugin configuration

## 🎯 Advanced Usage

For more control over the SVGO optimization process, configure the plugin manually:

```js
// eslint.config.js
import { defineConfig } from 'eslint/config'
import { parserPlain, plugin as pluginSVGO } from 'eslint-plugin-svgo'

export default defineConfig([
  {
    name: 'svgo',
    files: ['**/*.svg'],
    ignores: ['icons/foo.svg', 'images/**/*.svg'],
    plugins: {
      svgo: pluginSVGO,
    },
    languageOptions: {
      parser: parserPlain,
    },
    rules: {
      'svgo/svgo': [
        'error',
        {
          floatPrecision: 2,
          js2svg: {
            pretty: true,
          },
          plugins: [
            'preset-default',
            {
              name: 'cleanupIds',
              params: {
                minify: false,
              },
            },
          ],
        },
      ],
    },
  },
])
```

### Plugin Configuration Options

You can configure SVGO plugins in two ways:

**1. By plugin name (using defaults):**

```js
import { defineConfig } from 'eslint/config'
import pluginSVGO from 'eslint-plugin-svgo'

export default defineConfig([
  // Your other configs...
  {
    ...pluginSVGO.configs.recommended,
    rules: {
      'svgo/svgo': [
        'error',
        {
          plugins: ['cleanupIds', 'convertColors'],
        },
      ],
    },
  },
])
```

**2. With custom parameters:**

```js
import { defineConfig } from 'eslint/config'
import pluginSVGO from 'eslint-plugin-svgo'

export default defineConfig([
  // Your other configs...
  {
    ...pluginSVGO.configs.recommended,
    rules: {
      'svgo/svgo': [
        'error',
        {
          plugins: [
            {
              name: 'cleanupIds',
              params: {
                minify: false,
              },
            },
          ],
        },
      ],
    },
  },
])
```

**3. Override preset defaults:**

```js
import { defineConfig } from 'eslint/config'
import pluginSVGO from 'eslint-plugin-svgo'

export default defineConfig([
  // Your other configs...
  {
    ...pluginSVGO.configs.recommended,
    rules: {
      'svgo/svgo': [
        'error',
        {
          plugins: [
            {
              name: 'preset-default',
              params: {
                overrides: {
                  cleanupAttrs: false,
                  cleanupIds: {
                    minify: false,
                  },
                },
              },
            },
          ],
        },
      ],
    },
  },
])
```

## 🔌 Integration Guides

### VSCode

Enable ESLint validation for SVG files by adding to your `.vscode/settings.json`:

```json
{
  "eslint.validate": ["xml", "svg"]
}
```

### Prettier

Add SVG files to your `.prettierignore` to prevent conflicts with ESLint:

```
**/*.svg
```

Or configure in `package.json`:

```json
{
  "prettier": {
    "ignorePatterns": ["**/*.svg"]
  }
}
```

## 📚 Rule Reference

### `svgo/svgo`

Optimize SVG files using SVGO.

#### Options

##### `svgoConfig`

- **Type**: `boolean | string`
- **Default**: `undefined`
- **Example**: `true` or `'./svgo.config.js'`

Use an external SVGO config file. This is useful when you need to use features that aren't JSON-schema compatible (like function-based configuration).

- `true` — Auto-load `svgo.config.mjs` or `svgo.config.js` from your project root
- `'path/to/config'` — Use a specific config file path

Behavior details:

- When `svgoConfig` is `true`, the rule auto-searches for a SVGO config file from the SVG file directory upward.
- If no external config is found with `svgoConfig: true`, the rule falls back to in-rule options (`plugins`, `floatPrecision`, etc.).
- When `svgoConfig` is a string path, that path must exist and be loadable, otherwise the rule reports an optimization error.
- When an external config is loaded successfully, other rule options (except `path`) are ignored.

##### `reportMode`

- **Type**: `'diff' | 'summary'`
- **Default**: `'diff'`

Choose how diagnostics are reported when SVG can be optimized:

- `'diff'` — Report each text diff as a separate ESLint message (detailed)
- `'summary'` — Report a single ESLint message with a full-file autofix (quiet CI output)

Set `ESLINT_PLUGIN_SVGO_DEBUG=1` (or `DEBUG=eslint-plugin-svgo`) to include error stacks in diagnostic messages.

##### `path`

- **Type**: `string`
- **Default**: `context.filename`

Override the file path. Some plugins (like `prefixIds`) use this for context.

##### `multipass`

- **Type**: `boolean`
- **Default**: `false`

Enable multiple optimization passes to ensure all optimizations are fully applied.

##### `floatPrecision`

- **Type**: `number`
- **Default**: `3`

Set precision for floating-point numbers in the output (e.g., `2` converts `1.234` to `1.23`). This is passed to plugins that support it.

##### `datauri`

- **Type**: `'base64' | 'enc' | 'unenc'`
- **Default**: `undefined`

Output format for Data URIs:

- `'base64'` — Base64 encoded
- `'enc'` — URL-encoded
- `'unenc'` — Unencoded

##### `js2svg`

- **Type**: `object`
- **Default**: `undefined`

Options for rendering the optimized SVG from the AST. See [SVGO's js2svg documentation](https://github.com/svg/svgo/blob/main/lib/types.d.ts) for all available options.

Common options:

```js
import { defineConfig } from 'eslint/config'
import pluginSVGO from 'eslint-plugin-svgo'

export default defineConfig([
  // Your other configs...
  {
    ...pluginSVGO.configs.recommended,
    rules: {
      'svgo/svgo': [
        'error',
        {
          js2svg: {
            pretty: true, // Add newlines and indentation
            indent: 2, // Indentation size
            eol: 'lf', // Line ending style
            finalNewline: true, // Add final newline
          },
        },
      ],
    },
  },
])
```

> **Unsupported options**: `regEntities`, `regValEntities`, `encodeEntity` (require functions)

##### `plugins`

- **Type**: `array`
- **Default**: `['preset-default']`

List of SVGO plugins to apply. See [SVGO's plugin documentation](https://svgo.dev/docs/plugins/) for available plugins and their parameters.

**Example configuration:**

```js
import { defineConfig } from 'eslint/config'
import pluginSVGO from 'eslint-plugin-svgo'

export default defineConfig([
  // Your other configs...
  {
    ...pluginSVGO.configs.recommended,
    rules: {
      'svgo/svgo': [
        'error',
        {
          plugins: [
            'preset-default',
            'removeDoctype',
            {
              name: 'cleanupIds',
              params: {
                minify: false,
              },
            },
          ],
        },
      ],
    },
  },
])
```

## ⚠️ JSON Schema Limitations

ESLint rule options must be JSON schema compatible, which means **functions** and **regular expressions** cannot be used directly in rule options. However, you can work around this using [external config files](#svgoconfig).

### Unsupported Features in Rule Options

**js2svg:**

- `regEntities` — function
- `regValEntities` — function
- `encodeEntity` — function

**plugins:**

- `prefixIds.prefix` — function (use `boolean` or `string` instead)
- `addClassesToSVGElement.className` — function (use `string` instead)
- `convertColors.currentColor` — regexp (use `boolean` or `string` instead)
- `removeComments.preservePatterns` — regexp (use `boolean` or `string` instead)

### Solution: Use External Config

For advanced configurations requiring functions or regexes, create an external config file:

```js
// svgo.config.mjs
export default {
  plugins: [
    'preset-default',
    {
      name: 'prefixIds',
      params: {
        prefix: node => `svg-${node.attributes.id}`,
      },
    },
  ],
}
```

Then reference it in your ESLint config:

```js
import { defineConfig } from 'eslint/config'
import pluginSVGO from 'eslint-plugin-svgo'

export default defineConfig([
  // Your other configs...
  {
    ...pluginSVGO.configs.recommended,
    rules: {
      'svgo/svgo': ['error', { svgoConfig: './svgo.config.mjs' }],
    },
  },
])
```

> **Tip**: External config files are the most flexible way to configure SVGO with all its advanced features.

## 💡 Common Examples

### Basic SVG Optimization

```js
import { defineConfig } from 'eslint/config'
import pluginSVGO from 'eslint-plugin-svgo'

export default defineConfig([
  // Your other configs...
  {
    ...pluginSVGO.configs.recommended,
    rules: {
      'svgo/svgo': 'error',
    },
  },
])
```

### With Custom Float Precision

```js
import { defineConfig } from 'eslint/config'
import pluginSVGO from 'eslint-plugin-svgo'

export default defineConfig([
  // Your other configs...
  {
    ...pluginSVGO.configs.recommended,
    rules: {
      'svgo/svgo': [
        'error',
        {
          floatPrecision: 2,
        },
      ],
    },
  },
])
```

### Pretty-Printed SVG Output

```js
import { defineConfig } from 'eslint/config'
import pluginSVGO from 'eslint-plugin-svgo'

export default defineConfig([
  // Your other configs...
  {
    ...pluginSVGO.configs.recommended,
    rules: {
      'svgo/svgo': [
        'error',
        {
          js2svg: {
            pretty: true,
            indent: 2,
          },
        },
      ],
    },
  },
])
```

### Disable Specific Plugins

```js
import { defineConfig } from 'eslint/config'
import pluginSVGO from 'eslint-plugin-svgo'

export default defineConfig([
  // Your other configs...
  {
    ...pluginSVGO.configs.recommended,
    rules: {
      'svgo/svgo': [
        'error',
        {
          plugins: [
            {
              name: 'preset-default',
              params: {
                overrides: {
                  removeDoctype: false,
                  removeComments: false,
                },
              },
            },
          ],
        },
      ],
    },
  },
])
```

### Using External Config

```js
import { defineConfig } from 'eslint/config'
import pluginSVGO from 'eslint-plugin-svgo'

export default defineConfig([
  // Your other configs...
  {
    ...pluginSVGO.configs.recommended,
    rules: {
      'svgo/svgo': ['error', { svgoConfig: true }],
    },
  },
])
```

With `svgo.config.mjs`:

```js
export default {
  multipass: true,
  floatPrecision: 2,
  plugins: [
    'preset-default',
    'removeDoctype',
    {
      name: 'cleanupIds',
      params: { minify: false },
    },
  ],
}
```

## 💖 Acknowledgments

- [antfu/eslint-plugin-format](https://github.com/antfu/eslint-plugin-format) — Inspiration for plugin structure
- [SVGO](https://github.com/svg/svgo) — The powerful SVG optimization library
- [ESLint](https://eslint.org/) — Pluggable linting utility

## 📄 License

[MIT](./LICENSE) License © 2024-PRESENT [ntnyq](https://github.com/ntnyq)

---
_Source: https://npm.io/package/eslint-plugin-svgo · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._