0
# imagemin-svgo
1
2
imagemin-svgo is an imagemin plugin that integrates SVGO (SVG Optimizer) for optimizing SVG images. It provides a bridge between the imagemin image processing pipeline and SVGO's SVG optimization capabilities, allowing developers to compress and optimize SVG files by removing unnecessary metadata, comments, and redundant code while maintaining visual fidelity.
3
4
## Package Information
5
6
- **Package Name**: imagemin-svgo
7
- **Package Type**: npm
8
- **Language**: JavaScript (ES Modules)
9
- **Installation**: `npm install imagemin-svgo`
10
11
## Core Imports
12
13
```javascript
14
import imageminSvgo from 'imagemin-svgo';
15
```
16
17
Note: This package uses ES modules and requires Node.js 18+ with module support. For CommonJS environments, use dynamic import:
18
19
```javascript
20
const imageminSvgo = (await import('imagemin-svgo')).default;
21
```
22
23
## Basic Usage
24
25
```javascript
26
import imagemin from 'imagemin';
27
import imageminSvgo from 'imagemin-svgo';
28
29
// Basic optimization with default settings
30
await imagemin(['images/*.svg'], {
31
destination: 'build/images',
32
plugins: [
33
imageminSvgo()
34
]
35
});
36
37
// With custom SVGO options
38
await imagemin(['images/*.svg'], {
39
destination: 'build/images',
40
plugins: [
41
imageminSvgo({
42
plugins: [{
43
name: 'removeViewBox',
44
active: false
45
}]
46
})
47
]
48
});
49
50
console.log('SVG images optimized');
51
```
52
53
## Architecture
54
55
imagemin-svgo follows the imagemin plugin architecture pattern:
56
57
- **Plugin Factory**: The default export is a factory function that accepts SVGO options and returns an imagemin-compatible plugin function
58
- **Plugin Function**: The returned function processes individual file buffers asynchronously
59
- **SVGO Integration**: Internally uses SVGO's `optimize()` function with automatic SVG validation via `is-svg`
60
- **Buffer Handling**: Accepts both Buffer and string inputs, always returns Buffer outputs for consistency with imagemin
61
62
## Capabilities
63
64
### SVG Optimization Plugin
65
66
Creates an imagemin-compatible plugin for optimizing SVG files using SVGO.
67
68
```javascript { .api }
69
/**
70
* Creates an imagemin plugin for SVG optimization using SVGO
71
* @param {SvgoOptions} [options] - SVGO configuration options with multipass: true by default
72
* @returns {function} - Imagemin plugin function that processes SVG buffers
73
*/
74
function imageminSvgo(options?: SvgoOptions): (buffer: Buffer | string) => Promise<Buffer>
75
```
76
77
The returned plugin function has the following signature:
78
79
```javascript { .api }
80
/**
81
* Process SVG buffer or string through SVGO optimization
82
* @param {Buffer|string} buffer - SVG content to optimize (non-SVG content returned unchanged)
83
* @returns {Promise<Buffer>} - Optimized SVG as Buffer, or original buffer if not valid SVG
84
*/
85
(buffer: Buffer | string) => Promise<Buffer>
86
```
87
88
**Parameters:**
89
90
- `options` (Object, optional): SVGO configuration options
91
- `multipass` (boolean, default: `true`): Enable multiple optimization passes
92
- `plugins` (Array, optional): Array of SVGO plugin configurations
93
- All other SVGO configuration options are supported
94
95
**Returns:**
96
- Function that accepts a Buffer or string and returns a Promise<Buffer>
97
98
**Behavior:**
99
- Non-SVG content is returned unchanged (validated using `is-svg` package)
100
- Input can be either Buffer or string format
101
- Output is always a Buffer containing optimized SVG content
102
- Uses SVGO internally with multipass optimization enabled by default
103
104
### Usage Examples
105
106
**Direct plugin usage:**
107
```javascript
108
import imageminSvgo from 'imagemin-svgo';
109
110
// Create optimizer with options
111
const optimizer = imageminSvgo({
112
plugins: [{
113
name: 'preset-default',
114
}, {
115
name: 'removeScriptElement',
116
active: true,
117
}]
118
});
119
120
// Process SVG content
121
const svgBuffer = Buffer.from('<svg><script></script></svg>');
122
const optimized = await optimizer(svgBuffer);
123
console.log(optimized.toString()); // <svg/>
124
```
125
126
**Plugin configuration examples:**
127
```javascript
128
// Disable viewBox removal
129
imageminSvgo({
130
plugins: [{
131
name: 'removeViewBox',
132
active: false
133
}]
134
})
135
136
// Custom plugin configuration
137
imageminSvgo({
138
plugins: [{
139
name: 'preset-default',
140
params: {
141
overrides: {
142
removeUnknownsAndDefaults: {
143
keepDataAttrs: false,
144
keepAriaAttrs: false
145
}
146
}
147
}
148
}]
149
})
150
151
// Minimal optimization
152
imageminSvgo({
153
plugins: ['preset-default']
154
})
155
```
156
157
## Types
158
159
```javascript { .api }
160
interface SvgoOptions {
161
/** Enable multiple optimization passes (default: true) */
162
multipass?: boolean;
163
/** Array of SVGO plugin configurations */
164
plugins?: PluginConfig[];
165
/** Additional SVGO configuration options */
166
[key: string]: any;
167
}
168
169
interface PluginConfig {
170
/** Plugin name */
171
name: string;
172
/** Whether plugin is active (default: true) */
173
active?: boolean;
174
/** Plugin-specific parameters */
175
params?: object;
176
}
177
```
178
179
## Error Handling
180
181
The plugin gracefully handles various input scenarios:
182
183
- **Non-SVG content**: Validated by `is-svg` package and returned unchanged as the original buffer
184
- **Invalid/malformed SVG**: May pass through SVGO without throwing errors (SVGO's internal error handling)
185
- **Buffer vs String input**: Automatically converts string input to Buffer internally for processing
186
- **Empty or null input**: Handled by underlying SVGO error handling
187
188
Note: SVGO may not always throw proper errors for malformed SVG content, as observed in the package's test suite.
189
190
## Dependencies
191
192
- **is-svg** (^5.0.1): SVG content validation
193
- **svgo** (^3.3.2): Core SVG optimization engine