0
# SVGO
1

2
SVGO (SVG Optimizer) is a comprehensive Node.js library and command-line tool for optimizing SVG vector graphics files. It removes redundant information, editor metadata, comments, hidden elements, and suboptimal values without impacting visual rendering through a powerful plugin architecture with over 50 built-in optimization plugins.
3

4
## Package Information
5

6
- **Package Name**: svgo
7
- **Package Type**: npm
8
- **Language**: JavaScript with TypeScript definitions
9
- **Installation**: `npm install svgo`
10

11
## Core Imports
12

13
**Node.js (recommended):**
14

15
```javascript
16
import { optimize, loadConfig } from "svgo";
17
```
18

19
**Browser:**
20

21
```javascript
22
import { optimize } from "svgo/browser";
23
```
24

25
**CommonJS:**
26

27
```javascript
28
const { optimize, loadConfig } = require("svgo");
29
```
30

31
## Basic Usage
32

33
```javascript
34
import { optimize } from "svgo";
35

36
// Basic optimization
37
const result = optimize('<svg><rect width="100" height="100"/></svg>');
38
console.log(result.data); // Optimized SVG string
39

40
// With configuration
41
const result = optimize(svgString, {
42
  multipass: true,
43
  plugins: [
44
    'preset-default',
45
    {
46
      name: 'removeAttrs',
47
      params: {
48
        attrs: ['data-*']
49
      }
50
    }
51
  ]
52
});
53
```
54

55
## Architecture
56

57
SVGO is built around several key components:
58

59
- **Core Optimizer**: The `optimize` function that processes SVG input through plugin pipelines
60
- **Plugin Architecture**: 50+ built-in plugins organized in categories (cleanup, removal, conversion, style, path manipulation)
61
- **AST System**: XML Abstract Syntax Tree (XAST) for precise SVG manipulation
62
- **Configuration System**: Flexible plugin configuration with presets and custom parameters
63
- **Multi-format Support**: Node.js, browser, and CLI interfaces with various output formats
64

65
## Capabilities
66

67
### Core Optimization
68

69
Main SVG optimization functionality that processes SVG strings through configurable plugin pipelines with support for multiple passes and various output formats.
70

71
```javascript { .api }
72
function optimize(input: string, config?: Config): Output;
73

74
interface Config {
75
  path?: string;
76
  multipass?: boolean;
77
  floatPrecision?: number;
78
  plugins?: PluginConfig[];
79
  js2svg?: StringifyOptions;
80
  datauri?: DataUri;
81
}
82

83
interface Output {
84
  data: string;
85
}
86
```
87

88
[Core Optimization](./core-optimization.md)
89

90
### Configuration Management
91

92
Configuration loading and management system for SVGO settings, supporting automatic config file discovery and custom configuration options.
93

94
```javascript { .api }
95
function loadConfig(configFile?: string, cwd?: string): Promise<Config | null>;
96
```
97

98
[Configuration](./configuration.md)
99

100
### Plugin System
101

102
Comprehensive plugin architecture with 50+ built-in plugins for SVG optimization, organized into categories like cleanup, removal, conversion, and styling operations.
103

104
```javascript { .api }
105
interface Plugin<P = any> {
106
  (root: XastRoot, params: P, info: PluginInfo): Visitor | null | void;
107
}
108

109
interface PluginConfig {
110
  name: string;
111
  params?: any;
112
  fn?: Plugin;
113
}
114

115
interface BuiltinPlugin<Name extends string, Params> {
116
  name: Name;
117
  description?: string;
118
  fn: Plugin<Params>;
119
}
120
```
121

122
[Plugin System](./plugins.md)
123

124
### AST Manipulation
125

126
XML Abstract Syntax Tree manipulation utilities for querying, modifying, and traversing SVG document structures with CSS selector support.
127

128
```javascript { .api }
129
function querySelector(node: XastParent, selector: string, parents?: Map<XastNode, XastParent>): XastChild | null;
130
function querySelectorAll(node: XastParent, selector: string, parents?: Map<XastNode, XastParent>): XastChild[];
131
```
132

133
[AST Manipulation](./ast-manipulation.md)
134

135
### Data URI Utilities
136

137
SVG Data URI encoding and decoding utilities for converting SVG strings to and from various Data URI formats (base64, URL-encoded, unencoded).
138

139
```javascript { .api }
140
function encodeSVGDatauri(str: string, type?: DataUri): string;
141
function decodeSVGDatauri(str: string): string;
142

143
type DataUri = 'base64' | 'enc' | 'unenc';
144
```
145

146
[Data URI Utilities](./data-uri.md)
147

148
### Utility Functions
149

150
Advanced utility functions for security checking, reference detection, and numeric precision handling, commonly used in custom plugins and advanced SVG processing workflows.
151

152
```javascript { .api }
153
function hasScripts(node: XastElement): boolean;
154
function includesUrlReference(body: string): boolean;
155
function findReferences(attribute: string, value: string): string[];
156
function toFixed(num: number, precision: number): number;
157
```
158

159
[Utility Functions](./utility-functions.md)
160

161
### CLI Interface
162

163
Command-line interface for batch SVG optimization with support for file/folder processing, recursive operations, and extensive configuration options.
164

165
```bash
166
svgo [INPUT...] [OPTIONS]
167
```
168

169
[CLI Interface](./cli.md)
170

171
### Constants and Collections
172

173
Library version information and comprehensive SVG specification data used by plugins and advanced applications.
174

175
```javascript { .api }
176
const VERSION: string;
177
const _collections: SVGCollections;
178

179
interface SVGCollections {
180
  elemsGroups: Record<string, Set<string>>;
181
  attrsGroups: Record<string, Set<string>>;
182
  elems: Record<string, ElementSpec>;
183
  colorsNames: Record<string, string>;
184
  colorsShortNames: Record<string, string>;
185
  colorsProps: Set<string>;
186
  referencesProps: Set<string>;
187
  inheritableAttrs: Set<string>;
188
  editorNamespaces: Set<string>;
189
  textElems: Set<string>;
190
  pathElems: Set<string>;
191
}
192

193
interface ElementSpec {
194
  attrsGroups: Set<string>;
195
  attrs: Set<string>;
196
  defaults: Record<string, string>;
197
  deprecated: Set<string>;
198
  contentGroups: Set<string>;
199
}
200
```
201

202
## Types
203

204
```javascript { .api }
205
// Core types
206
interface XastRoot {
207
  type: 'root';
208
  children: XastChild[];
209
}
210

211
interface XastElement {
212
  type: 'element';
213
  name: string;
214
  attributes: Record<string, string>;
215
  children: XastChild[];
216
}
217

218
interface XastText {
219
  type: 'text';
220
  value: string;
221
}
222

223
interface XastComment {
224
  type: 'comment';
225
  value: string;
226
}
227

228
interface XastCdata {
229
  type: 'cdata';
230
  value: string;
231
}
232

233
interface XastInstruction {
234
  type: 'instruction';
235
  name: string;
236
  value: string;
237
}
238

239
interface XastDoctype {
240
  type: 'doctype';
241
  name: string;
242
  data: {
243
    doctype: string;
244
  };
245
}
246

247
type XastChild = XastElement | XastText | XastComment | XastCdata | XastInstruction | XastDoctype;
248
type XastParent = XastRoot | XastElement;
249
type XastNode = XastRoot | XastChild;
250

251
// Plugin types
252
interface PluginInfo {
253
  path?: string;
254
  multipassCount: number;
255
}
256

257
interface Visitor {
258
  doctype?: VisitorNode<XastDoctype>;
259
  instruction?: VisitorNode<XastInstruction>;
260
  comment?: VisitorNode<XastComment>;
261
  cdata?: VisitorNode<XastCdata>;
262
  text?: VisitorNode<XastText>;
263
  element?: VisitorNode<XastElement>;
264
  root?: VisitorRoot;
265
}
266

267
interface VisitorNode<Node> {
268
  enter?: (node: Node, parentNode: XastParent) => void | symbol;
269
  exit?: (node: Node, parentNode: XastParent) => void;
270
}
271

272
interface VisitorRoot {
273
  enter?: (node: XastRoot, parentNode: null) => void;
274
  exit?: (node: XastRoot, parentNode: null) => void;
275
}
276

277
// Output formatting
278
interface StringifyOptions {
279
  doctypeStart?: string;
280
  doctypeEnd?: string;
281
  procInstStart?: string;
282
  procInstEnd?: string;
283
  tagOpenStart?: string;
284
  tagOpenEnd?: string;
285
  tagCloseStart?: string;
286
  tagCloseEnd?: string;
287
  tagShortStart?: string;
288
  tagShortEnd?: string;
289
  attrStart?: string;
290
  attrEnd?: string;
291
  commentStart?: string;
292
  commentEnd?: string;
293
  cdataStart?: string;
294
  cdataEnd?: string;
295
  textStart?: string;
296
  textEnd?: string;
297
  indent?: number | string;
298
  regEntities?: RegExp;
299
  regValEntities?: RegExp;
300
  encodeEntity?: (char: string) => string;
301
  pretty?: boolean;
302
  useShortTags?: boolean;
303
  eol?: 'lf' | 'crlf';
304
  finalNewline?: boolean;
305
}