Skip to content

chore(deps): update dependency svgo to v4 #421

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
renovate wants to merge 1 commit into
base: main
Choose a base branch
from
Open

chore(deps): update dependency svgo to v4 #421

renovate wants to merge 1 commit into from

Conversation

@renovate
Copy link
Contributor

@renovate renovate bot commented Nov 26, 2025 •
edited
Loading

This PR contains the following updates:

Package Change Age Confidence
svgo (source) 2.8.0 → 4.0.0 age confidence

Release Notes

svg/svgo (svgo)

v4.0.0

Compare Source

Banner celebrating the release of SVGO v4.0.0. Includes the SVGO mascot drawing on a chalkboard with the changes in default plugins. For example, removeViewBox was moved from default plugins to available plugins.

Illustration by Vukory

It's been just over a year since our first release candidate, but I believe we can now release SVGO v4.0.0 with confidence! Thank you to all contributors who tested our RC builds and reported issues back up, this really smoothed out the process.

We actually wanted to do the release sooner, but it was a challenge to find the right time to publish a major release, since that means setting time aside to support users through migrations, helping downstream projects migrate, being available to fix or document things that users found to have an unexpected impact by this release, etc. I appreciate everyone's patience, and now that this is done, we can hopefully increase the pace of development again and tackle that backlog of old bugs. ^-^'

Breaking Changes

Please refer to the Migration Guide from v3 to v4 for a more concise version! This section is more verbose as it delves into the motivation of changes too.

Dropped Support for Node.js v14

Node.js v14 is no longer supported by the Node.js team, including security support, since 30 April 2023. Node.js v16 is no longer supported either, but as some are still using it, we'll save dropping support for Node.js v16 for the next major release.

This allows us to update our dependencies to more recent versions and to access more modern Node.js APIs.

Node.js v14 may still work at the time of this release, but we'll no longer be testing against v14 from now on.

Default Plugins

Both removeViewBox and removeTitle have been disabled by default. Both have been major pain points for users and don't make sense to enable in most cases. Other libraries wrapping SVGO have also been disabling these plugins by default, such as Docusaurus and SVGR.

  • removeViewBox removes the scalability of SVGs.
  • removeTitle reduces accessibility, which preserving accessibility is more important than optimization.

If you would like either of these plugins enabled, you can do so by configuring it in the SVGO config, see the README for more context, however please read the warnings described in the documentation of the plugins first:

  export default {
    plugins: [
      'preset-default', // built-in plugins enabled by default
+     'removeViewBox',
+     'removeTitle',
    ],
  };
removeScriptElement → removeScripts

The removeScriptElement plugin has been renamed to removeScripts, to more accurately reflect what the plugin does. It does not only remove the <script> tag, but also event handlers and script URIs from links.

To migrate, amend your SVGO config to refer to removeScripts instead if you use that plugin.

  export default {
    plugins: [
      'preset-default', // built-in plugins enabled by default
-     'removeScriptElement',
+     'removeScripts',
    ],
  };
Imports/Exports

We now enforce boundaries between the intended public API and any internal structures/helpers. This is the biggest change in SVGO's JavaScript API and will enable maintainers and users to have a mutual understanding of what is public API and what isn't.

There are two ways to import SVGO:

  • svgo — for normal usage, such as scripts or server-side applications.
  • svgo/browser — for browser usage.

If you use the browser bundle, you must amend how you import SVGO:

- import { optimize } from 'svgo/dist/svgo.browser.js';
+ import { optimize } from 'svgo/browser';

For ESM/browser, you must use named imports:

// ESM and Browser, named exports
import { VERSION } from 'svgo';
console.log(VERSION);  // 4.0.0-rc.0

// ESM and Browser, import all
import * as svgo from 'svgo/browser';
console.log(svgo.VERSION); // 4.0.0-rc.0

// Common JS, default export
const svgo = require('svgo');
console.log(svgo.VERSION);  // 4.0.0-rc.0

// CommonJS, named exports
const { VERSION } = require('svgo');
console.log(VERSION); // 4.0.0-rc.0

We support 3 environments, ESM, Common JS, and browser. The only functional difference is that the loadConfig function is not exported in the browser bundle.

If you depended on a helper that we haven't declared as public, then you are encouraged to implement it yourself, or dig into our source and copy it over to your project.

Importing Plugins

If you import/require the array of built-in plugins, or a single plugin during runtime, this is now a top-level export instead:

// builtin.mjs - get an array of all built-in plugins
- import { builtin } from 'svgo/lib/builtin';
+ import { builtinPlugins } from 'svgo'

// plugin.mjs - get a single plugin
- import presetDefault from 'svgo/plugins/preset-default';
+ import { builtinPlugins } from 'svgo';
+ const prefixDefault = builtinPlugins.find(plugin => plugin.name === 'preset-default');

// plugin-map.mjs - get all plugins as a map using the plugin name as a key
import { builtinPlugins } from 'svgo';
const pluginMap = builtinPlugins.reduce((acc, val) => acc.set(val.name, val), new Map());
Selector Helpers

The XastNode#parentNode property was declared legacy and pending removal for v4, but was still used internally. The remaining instances have now been removed, which required a refactor of the selector helpers.

This effects custom plugins that use any of the following functions, where the selector (2nd) argument could reference parent or sibling nodes (i.e. div > span):

  • querySelectorAll
  • querySelector
  • matches

Previously, these functions had the context of the whole node tree, even if a child node was passed to it. It no longer has that context by default. The new API for these functions is as follows:

// applies `selector` with the context of the `childNode` and its descendants
const nodes = querySelectorAll(childNode, selector);

// applies `selector` with the context of the entire node tree relative from `childNode`
// the `rootNode` is required if the result of `selector` may depend on the parent or sibling of `childNode`
const nodes = querySelectorAll(childNode, selector, rootNode);

// this usage has the same behavior as v3, as `rootNode` is already the entire node tree 
const nodes = querySelectorAll(rootNode, selector);

A helper has been provided named #mapNodesToParents, which does this for you. This can be used to easily migrate to the new API. If you're not sure if you need it, then it's safer to take this approach. The third argument won't be necessary if selector does not traverse nodes, for example, querying using one or more attributes of a single node.

- import { querySelectorAll } from 'svgo';
+ import { querySelectorAll, mapNodesToParents } from 'svgo';

- const nodes = querySelectorAll(childNode, selector);
+ const nodes = querySelectorAll(childNode, selector, mapNodesToParents(rootNode));

What Else

ESM

SVGO is now a dual package, serving for both Common JS and ESM usage. To be more explicit, SVGO will continue to work on Common JS projects!

Thanks to @​jdufresne for doing the bulk of the work.

Default Behavior
  • convertColors, now converts all references to colors excluding references to IDs to lowercase. This can be disabled by setting convertCase to false.
Bug Fixes
Features
  • Add VERSION export so get the version of SVGO during runtime. By @​SethFalco in #​2016
  • Introduce an isPreset and plugins property to plugins, which are only defined for presets. This will indicate if the plugin is a preset, and return the plugins that are in the preset in the order they are invoked.
SVG Optimization
  • convertColors, introduce parameter to convert colors to common casing (lowercase/uppercase). By @​JayLeininger in #​1692
  • removeDeprecatedAttrs, new plugin that is disabled by default to remove SVG attributes that are deprecated. By @​jdufresne in #​1869
  • removeEditorsNSData, include Boxy SVG namespace in the list of editor namespaces to remove. By @​sisp in #​2008
  • removeEditorsNSData, include Krita namespace in the list of editor namespaces to remove. By @​SethFalco in #​2131
Performance
Developer Experience
  • We now generate our type declarations from JSDoc comments instead of maintaining them manually. Types will be much more accurate, include more documentation, and are guaranteed to be in sync with the implementation.

Metrics

Before and after using vectors from various sources, with the default preset of each respective version:

SVG Original v3.3.2 v4.0.0 Delta
Arch Linux Logo 9.529 KiB 4.115 KiB 4.097 KiB ⬇️ 0.018 KiB
Blobs 50.45 KiB 42.623 KiB 42.633 KiB ⬆️ 0.01 KiB
Isometric Madness 869.034 KiB 540.582 KiB 540.141 KiB ⬇️ 0.441 KiB
tldr-pages Banner 2.071 KiB 1.07 KiB 1.07 KiB
Wikipedia Logo 161.551 KiB 111.668 KiB 111.727 KiB ⬆️ 0.059 KiB

Note: The increase in size from previous versions is from disabling removeViewBox and removeTitle, with the benefit of preserving scalability and accessibility.

Before and after of the browser bundle of each respective version:

v3.3.2 v4.0.0 Delta
svgo.browser.js 753.0 kB 780.2kB ⬆️ 27.2 kB

v3.3.2

Compare Source

Notice

An update on what happened with v3.3.0 and v3.3.1. While we have retained CJS support, the migration to ESM has changed the acceptable ways to import SVGO, in ways that users depended on before. This effectively made SVGO v3 a breaking change.

Rather than resolve or workaround these differences, we've opted to release SVGO v3.3.2, which is effectively a revert to v3.2.0, and deprecate versions v3.3.0 and v3.3.1. We'll then proceed to work on releasing v4 which will document the breaking changes, and feature further breaking changes that were slated for v4, like disabling removeViewBox by default.

Before the v4.0.0 release, I'll put more focus on testing and use release candidates, just to make the release go smoothly! 👍🏽

Sorry for the headache, and thank you for your patience.

v3.3.1

Compare Source

Notice

SVGO v3.3.0, which was meant to migrate to ESM without breaking CJS support, unfortunately broke CJS projects. There was a mistake with exports, so the loadConfig function wasn't available in the CJS bundle and lead to issues for many users.

Thanks to everyone who raised the issue, and to @​nuintun who submitted a pull request to resolve it so quickly.

I apologize for letting that breaking change through, and will aim to do better. Namely, by adding more tests to cover our exports, and any other public interface in general for each distribution of SVGO, so this doesn't happen again.

SVGO v3.3.1 should resolve the issue for CJS projects, but if you encounter anything else, do let us know by opening an issue on GitHub.

v3.3.0

Compare Source

Deprecated

This release introduced breaking changes, which have been reverted in v3.3.2. The bug fixes will be reintroduced in v4.0.0.

What's Changed

ESM

SVGO is now a dual package, serving for both Common JS and ESM usage. We believe there shouldn't be any problems, especially as SVGO as largely stateless, but feel free to open an issue if you encounter problems with this.

To be explicit, this is not a breaking change, and SVGO should continue to work in Common JS projects!

Thanks to @​jdufresne for doing the bulk of the work.

Default Behavior
  • convertColors, now converts all references to colors excluding references to IDs to lowercase. This can be disabled by setting convertCase to false.
Bug Fixes
SVG Optimization
  • convertColors, introduce parameter to convert colors to common casing (lowercase/uppercase). By @​JayLeininger in #​1692
  • removeDeprecatedAttrs, new plugin that is disabled by default to remove SVG attributes that are deprecated. By @​jdufresne in #​1869

Metrics

Before and after using vectors from various sources, with the default preset of each respective version:

SVG Original v3.2.0 v3.3.0 Delta
Arch Linux Logo 9.529 KiB 4.115 KiB 4.097 KiB ⬇️ 0.018 KiB
Blobs 50.45 KiB 42.623 KiB 42.609 KiB ⬇️ 0.014 KiB
Isometric Madness 869.034 KiB 540.582 KiB 540.073 KiB ⬇️ 0.509 KiB
tldr-pages Banner 2.071 KiB 1.07 KiB 1.07 KiB
Wikipedia Logo 161.551 KiB 111.668 KiB 111.668 KiB

Before and after of the browser bundle of each respective version:

v3.2.0 v3.3.0 Delta
svgo.browser.js 910.9 kB 753.0 kB ⬇️ 157.9 kB

v3.2.0

Compare Source

What's Changed

Bug Fixes
SVG Optimization
Performance

Metrics

Before and after using vectors from various sources, with the default preset of each respective version:

SVG Original v3.1.0 v3.2.0 Delta
Arch Linux Logo 9.529 KiB 4.162 KiB 4.115 KiB ⬇️ 0.047 KiB
Blobs 50.45 KiB 42.949 KiB 42.623 KiB ⬇️ 0.326 KiB
Isometric Madness 869.034 KiB 550.153 KiB 540.582 KiB ⬇️ 9.571 KiB
tldr-pages Banner 2.071 KiB 1.07 KiB 1.07 KiB
Wikipedia Logo 161.551 KiB 116 KiB 111.668 KiB ⬇️ 4.332 KiB

Before and after of the browser bundle of each respective version:

v3.1.0 v3.2.0 Delta
svgo.browser.js 660.9 kB 910.9 kB ⬆️ 250 kB

v3.1.0

Compare Source

What's Changed

Bug Fixes
SVG Optimization

Metrics

Before and after using vectors from various sources, with the default preset of each respective version:

SVG Original v3.0.5 v3.1.0 Delta
Arch Linux Logo 9.529 KiB 4.608 KiB 4.162 KiB ⬇️ 0.446 KiB
Blobs 50.45 KiB 42.949 KiB 42.949 KiB
Isometric Madness 869.034 KiB 550.153 KiB 550.153 KiB
tldr-pages Banner 2.071 KiB 1.07 KiB 1.07 KiB
Wikipedia Logo 161.551 KiB 117.146 KiB 116 KiB ⬇️ 1.146 KiB

Before and after of the browser bundle of each respective version:

v3.0.5 v3.1.0 Delta
svgo.browser.js 657.5 kB 660.9 kB ⬆️ 3.4 kB

v3.0.5

Compare Source

What's Changed

Bug Fixes
Chores

Metrics

Before and after using vectors from various sources, with the default preset of each respective version:

SVG Original v3.0.4 v3.0.5 Delta
Arch Linux Logo 9.529 KiB 4.735 KiB 4.608 KiB ⬇️ 0.127 KiB
Blobs 50.45 KiB 42.949 KiB 42.949 KiB
Isometric Madness 869.034 KiB 550.593 KiB 550.153 KiB ⬇️ 0.44 KiB
tldr-pages Banner 2.071 KiB 1.07 KiB 1.07 KiB
Wikipedia Logo 161.551 KiB 117.152 KiB 117.146 KiB ⬇️ 0.006 KiB

Before and after of the browser bundle of each respective version:

v3.0.4 v3.0.5 Delta
svgo.browser.js 656.9 kB 657.5 kB ⬆️ 0.6 kB

v3.0.4

Compare Source

Includes various bug fixes for existing plugins and a new optimization. Also splits removeXMLNS, which removed XLink, into two separate plugins, removeXMLNS and removeXlink.

What's Changed

Default Behavior
Bug Fixes
SVG Optimization
  • convertPathData, convert to z command if going back to initial position, or drop z if redundant. By @​KTibow in #​1822
  • inlineStyles, when inlining a CSS property that's already declared in a presentation attribute of the node, drop the attribute. By @​SethFalco in #​1829
  • removeXlink, new plugin that removes the XLink (xmlns:xlink) namespace and migrates from XLink attributes to the SVG 2 equivalent. Disabled by default. By @​TrySound and @​SethFalco in #​1535

Metrics

Before and after using vectors from various sources, with the default preset of each respective version:

SVG Original v3.0.3 v3.0.4 Delta
Arch Linux Logo 9.529 KiB 4.738 KiB 4.735 KiB ⬇️ 0.003 KiB
Blobs 50.45 KiB 42.949 KiB 42.949 KiB
Isometric Madness 869.034 KiB 550.699 KiB 550.593 KiB ⬇️ 0.106 KiB
tldr-pages Banner 2.071 KiB 1.07 KiB 1.07 KiB
Wikipedia Logo 161.552 KiB 118.441 KiB 117.152 KiB ⬇️ 1.289 KiB

Before and after of the browser bundle of each respective version:

v3.0.3 v3.0.4 Delta
svgo.browser.js 651.7 kB 656.9 kB ⬆️ 5.2 kB

v3.0.3

Compare Source

Includes various bug fixes and optimizations for existing plugins.

We're also revamped the documentation for the project. You can find it on svgo.dev!
The frontend for svgo.dev is maintained in svg/svgo.dev, contributions are welcome.

What's Changed

Default Behavior
  • removeComments, introduces preservePatterns parameter. Preserves legal comments by default, same as the previous behavior, but can now be overridden. By @​SethFalco in #​1812
  • removeDesc, set the removeAny parameter to false by default for accessibility. By @​SethFalco in #​1806
Bug Fixes
SVG Optimization
Performance
Chores

Metrics

Before and after using vectors from various sources, with the default preset of each respective version:

SVG Original v3.0.2 v3.0.3 Delta
Arch Linux Logo 8.584 KiB 4.748 KiB 4.747 KiB ⬇️ 0.001 KiB
Blobs 50.45 KiB 42.949 KiB 42.949 KiB
Isometric Madness 869.034 KiB 550.829 KiB 550.699 KiB ⬇️ 0.13 KiB
tldr-pages Banner 2.071 KiB 1.07 KiB 1.07 KiB
Wikipedia Logo 161.552 KiB 118.441 KiB 118.441 KiB

Before and after of the browser bundle of each respective version:

v3.0.2 v3.0.3 Delta
svgo.browser.js 643.5 kB 651.7 kB ⬆️ 8.2 kB

v3.0.2

Compare Source

Installing @types/csso no longer required

v3.0.1

Compare Source

  • store exposed types only in .d.ts files, no longer need to enable js checking
  • update svgo.browser.js
  • fixed "begin" attribute cleanup

Thanks to @​Kreeg, @​XhmikosR and @​TrySound

v3.0.0

Compare Source

SVGO v3

Improvements and fixes

  • fixed datauri option when multipass is not enabled
  • improved default preset warnings

Breaking Changes

Please refer to the Migration Guide from v2 to v3 for a more concise version!

  • 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
/**
 * @&#8203;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

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

  • If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

@aws-amplify-us-east-1
Copy link

aws-amplify-us-east-1 bot commented Nov 26, 2025

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-421.d1fbfmeuaycsih.amplifyapp.com

@renovate renovate bot force-pushed the renovate/svgo-4.x branch from a338f8c to 4afe616 Compare December 3, 2025 18:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

dependencies

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant