SVGO v3
Improvements and fixes
- fixed
datauri
option whenmultipass
is not enabled - improved default preset warnings
Breaking channges
- Node.js 14+ is required for version
- stable package is replaced with native stable sort (required node 12+)
Config
Typescript types are exposed out of the box. No longer need to install @types/svgo
// svgo.config.js
/**
* @type {import('svgo').Config}
*/
export default {
// svgo configuration
}
Active flag is no longer supported
export default {
plugins: [
{
name: 'removeDoctype',
active: true
},
{
name: 'removeComments',
active: false
}
]
}
extendDefaultPlugins
is removed, preset-default
plugin should be used instead
when need to customize plugins defaults
export default {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
// plugins customization
}
}
}
]
}
Enabled sortAttrs plugin by default to get better gzip compression.
<svg>
- <rect fill-opacity="" stroke="" fill="" stroke-opacity="" />
+ <rect fill="" fill-opacity="" stroke="" stroke-opacity="" />
</svg>
Can be disabled if necessary
export default {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
sortAttrs: false
}
}
}
]
}
cleanupIDs plugin is renamed to cleanupIds
export default {
plugins: [
'cleanupIds'
]
}
// or
export default {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
cleanupIds: {}
}
}
}
]
}
Removed cleanupIds plugin "prefix" param, prefixIds should be used instead
export default {
plugins: [
'cleanupIds',
{
name: 'prefixIds',
params: {
prefix: 'my-prefix'
}
}
]
}
Public API
Removed width and height from optimization result.
const { width, height } = optimize(svg).info
Can be found with custom plugin
let width = null
let height = null
const plugin = {
name: 'find-size',
fn: () => {
return {
element: {
enter: (node, parentNode) => {
if (parentNode.type === 'root') {
width = node.attributes.width
height = node.attributes.height
}
}
}
}
}
}
optimize(svg, {
plugins: ['preset-default', plugin]
})
Removed error and modernError from optimization result
const {data, error, modernError } = optimize(svg)
Now all errors are thrown, parsing error can be checked by name
try {
const { data } = optimize(svg)
} catch (error) {
if (error.name === 'SvgoParserError') {
// formatted error
error.toString()
} else {
// runtime error
}
}
Custom plugins
Removed full
, perItem
and perItemReverse
plugin types.
visitor
is the only supported plugin api so plugin.type
is no longer required.
Removed plugin.active
flag.
Removed plugin.params
used as default params, destructuring with defaults can be used instead
name
and fn
are only required now
const plugin = {
name: 'my-custom-plugin',
fn: (root, params) => {
const { myParam = true } = params
return {}
}
}
Removed createContentItem
and JSAPI class from nodes.
All nodes are now plain objects with one exception.
parentNode need to be defined to not break builtin plugins.
const plugin = {
name: 'my-custom-plugin',
fn: () => {
return {
element: {
enter: (node) => {
if (node === 'g') {
const child = {
type: 'element',
name: 'g',
attributes: {},
children: []
}
Object.defineProperty(child, 'parentNode', {
writable: true,
value: node,
})
node.children.push(child)
}
}
}
}
}
}
Thanks to @istarkov, @boidolr, @deining, @ranman, @mondeja, @liamcmitchell-sc, @rogierslag, @kriskowal, @hugolpz and @TrySound