v4.0.0-rc.5

Release Candidate

This is a release candidate. We are still working on v4.0.0, and API stability isn't guaranteed, though we'll aim to keep it fairly consistent. You can try this build by installing or depending on svgo@4.0.0-rc.5, or svgo@rc.

Please report any problems you encounter in the GitHub issue tracker. 👍

Refer to the release notes of previous v4.0.0 release candidates to get the full context, this will only describe the differences since the previous release candidate.

We're also working on a Migration Guide from v3 to v4. This will be accessible on svgo.dev once SVGO v4 has been officially released, but currently can only be read from the repository. The migration guide is more concise than the release notes, and only covers the breaking changes.

Changes

Bug Fixes

• convertColors: use currentColor instead of currentcolor by @SethFalco in #2137
• Fix Windows support when running CLI by @Lorfdail in #2141

Thanks, @futuremotiondev and @Studio384, who reported the issues. 👍

Metrics

No functional changes have been made that would affect SVG optimization or the browser bundle.

v4.0.0-rc.4

Release Candidate

This is a release candidate. We are still working on v4.0.0, and API stability isn't guaranteed, though we'll aim to keep it fairly consistent. You can try this build by installing or depending on svgo@4.0.0-rc.4, or svgo@rc.

Please report any problems you encounter in the GitHub issue tracker. 👍

Refer to the release notes of previous v4.0.0 release candidates to get the full context, this will only describe the differences since the previous release candidate.

We're also working on a Migration Guide from v3 to v4. This will be accessible on svgo.dev once SVGO v4 has been officially released, but currently can only be read from the repository. The migration guide is more concise than the release notes, and only covers the breaking changes.

Changes

Fixes the type declarations for #loadConfig, which were incorrect in v4.0.0-rc.2 and didn't perfectly match previous releases. The types should now behave the same as v3, and we've added stricter tests to enforce this with tsd.

expectType<Promise<Config | null>>(loadConfig());
expectType<Promise<Config | null>>(loadConfig(undefined));
expectType<Promise<Config | null>>(loadConfig(null));
expectType<Promise<Config>>(loadConfig('svgo.config.js'));

Thanks, @ntnyq, who reported this issue and contributed a fix.

Metrics

No functional changes have been made that would affect SVG optimization or the browser bundle.

Why did we skip SVGO v4.0.0-rc.3?

SVGO v4.0.0-rc.3 was accidentally published as a stable release instead of a release candidate. I noticed this within minutes, deprecated that version, and re-assigned the latest dist tag to v3.3.2. Fortunately, the impact should be minimal as most projects pin to major versions, which ^3 does not overlap with v4.0.0-rc.3.

I'm very sorry for any inconvenience this may have caused, though. 🙇

I will discuss this with the other maintainers, to see if I can get the permissions necessary on GitHub to migrate our publishing workflow to GitHub Actions. That should reduce the risk of this from happening again.

v4.0.0-rc.2

I apologize for the wait, and I appreciate everyone's patience! It's been some time since the last release candidate as I was very busy with client work. ^-^'

Release Candidate

This is a release candidate. We are still working on v4.0.0, and API stability isn't guaranteed, though we'll aim to keep it fairly consistent. You can try this build by installing or depending on svgo@4.0.0-rc.2, or svgo@rc.

Please report any problems you encounter in the GitHub issue tracker. 👍

Refer to the release notes of previous v4.0.0 release candidates to get the full context, this will only describe the differences since the previous release candidate.

We're also working on a Migration Guide from v3 to v4. This will be accessible on svgo.dev once SVGO v4 has been officially released, but currently can only be read from the repository. The migration guide is more concise than the release notes, and only covers the breaking changes.

Changes

This release mostly sets out to resolve issues reported regarding v4.0.0-rc.1. There was a mistake with our type declarations, that led to named exports like optimize to not be handled correctly.

I've amended the project to move away from manually maintained type declaration files, to generating our type declarations using tsc based on our JSDoc types and local types. This should guarantee that our type declarations will be up-to-date with our implementation from now on.

Breaking Changes

Default Export

This release drops default exports from the library. My original plan was to keep them in SVGO v4, and export with both named and default exports. However, this seems a little more annoying to maintain than I was expecting.

If you are using the import syntax and imported SVGO via the default export, then you must adapt your code for v4:

- import svgo from 'svgo';
- svgo.optimize('<svg></svg>');

// Option 1. Use named exports!
+ import { optimize } from 'svgo';
+ optimize('<svg></svg>');

// Option 2. Or import everything as svgo!
+ import * as svgo from 'svgo';
+ svgo.optimize('<svg></svg>');

This has no impact on users who:

• Use SVGO from the CLI.
• Import the project from CJS (require).
• Who were already using named exports when importing SVGO.

If you'd like more details on the reason, please see: #2118

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 are 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));

Metrics

No functional changes have been made that would affect SVG optimization.

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

	v4.0.0-rc.0	v4.0.0-rc.2	Delta
svgo.browser.js	754.9 kB	780.1 kB	⬆️ 25.2 kB

v4.0.0-rc.1

Release Candidate

This is a release candidate. We are still working on v4.0.0, and API stability isn't guaranteed, though we'll aim to keep it fairly consistent. You can try this build by installing or depending on svgo@4.0.0-rc.1, or svgo@rc.

Please report any problems you encounter in the GitHub issue tracker. 👍

Refer to the release notes of previous v4.0.0 release candidates to get the full context, this will only describe the differences since the previous release candidate.

Imports/Exports

We now use the exports field in package.json to define the public interface of the package. However, we received feedback from users who make custom plugins that they depended on some of our other types and helpers.

The types (XastNode, etc.) should've been exported, which has now been resolved.

Some of our functions like querySelector and querySelectorAll were not actually intended to be part of our public API. As our README.md suggests, the API usage primarily entails optimize and loadConfig. However, there are valid use cases for this, so we'll export the ones that are frequently used and continue and ensure backward compatibility to make plugin development easier, and for ease of migration between v3 and v4.

This means users that develop custom plugins will have stronger API guarantees when using querySelector, querySelectorAll, and _collections. However, they should be imported from svgo or svgo/browser now.

- import { querySelector, querySelectorAll } from 'svgo/lib/xast.js';
+ import { querySelector, querySelectorAll } from 'svgo';

- import _collections from 'svgo/plugins/_collections';
+ import { _collections } from 'svgo';

// For TypeScript users!
- import type { XastElement, XastRoot, XastChild } from 'svgo/lib/types';
+ import type { XastElement, XastRoot, XastChild } from 'svgo';

v4.0.0-rc.0

Release Candidate

This is a release candidate. We are still working on v4.0.0, and API stability isn't guaranteed, though we'll aim to keep it fairly consistent. You can try this build by installing or depending on svgo@4.0.0-rc.0, or svgo@rc.

Please report any problems you encounter in the GitHub issue tracker. 👍🏽

Breaking Changes

A summary, if you use the browser bundle of SVGO, or import/require anything except the base svgo path, such as svgo/lib/builtin, then you will very likely have to make code changes to update to version 4.

Dropping 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 many are still using it, we'll continue to support Node.js v16 for now.

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.

Imports/Exports

We use the exports field in package.json to define the public interface of the package. This enforces boundaries between the intended public API and any internal structures/helpers that we use internally.

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 all interfaces, it's recommended to use our named exports:

// 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 difference is that the loadConfig function is not exported in the brower bundle.

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());

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, which is unexpected given the S stands for scalable.
• 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:

  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',
    ],
  };

---

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 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

• cleanupIds, treat both URI encoded and non-URI encoded IDs as the same. By @liuweifeng in #1982
• collapseGroups, check styles as well as attributes. By @johnkenny54 in #1952
• collapseGroups, move attributes atomically. By @johnkenny54 in #1930
• convertPathData, fix q control point when item is removed. By @KTibow in #1927
• convertPathData, preserve vertex for markers only paths. By @SethFalco in #1967
• mergePaths, don't merge paths if attributes/styles depend on the node's bounding box. By @johnkenny54 in #1964
• moveElemsAttrsToGroups, no longer moves the transforms if group has the filter attribute. By @johnkenny54 in #1933
• prefixIds, fixed issue where some IDs were not prefixed when style tag contained XML comments. By @john-neptune in #1942
• removeHiddenElems, don't remove node if child element has a referenced ID. By @johnkenny54 in #1925
• removeHiddenElems, treat path[opacity=0] as a non-rendering node. By @johnkenny54 in #1948
• removeUselessDefs, don't remove node if child element has an ID. By @johnkenny54 in #1923
• When stringifying path data, include a space before numbers represented in scientific notation. By @johnkenny54 in #1961
• No longer crashes when the output (-o argument) ends with a trailing slash to a location that didn't exist. By @SethFalco in #1954

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 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

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-rc.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-rc.0	Delta
svgo.browser.js	753.0 kB	754.9 kB	⬆️ 1.9 kB

v3.3.2

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

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

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

• cleanupIds, treat both URI encoded and non-URI encoded IDs as the same. By @liuweifeng in #1982
• collapseGroups, check styles as well as attributes. By @johnkenny54 in #1952
• collapseGroups, move attributes atomically. By @johnkenny54 in #1930
• convertPathData, fix q control point when item is removed. By @KTibow in #1927
• convertPathData, preserve vertex for markers only paths. By @SethFalco in #1967
• mergePaths, don't merge paths if attributes/styles depend on the node's bounding box. By @johnkenny54 in #1964
• moveElemsAttrsToGroups, no longer moves the transforms if group has the filter attribute. By @johnkenny54 in #1933
• prefixIds, fixed issue where some IDs were not prefixed when style tag contained XML comments. By @john-neptune in #1942
• removeHiddenElems, don't remove node if child element has a referenced ID. By @johnkenny54 in #1925
• removeHiddenElems, treat path[opacity=0] as a non-rendering node. By @johnkenny54 in #1948
• removeUselessDefs, don't remove node if child element has an ID. By @johnkenny54 in #1923
• When stringifying path data, include a space before numbers represented in scientific notation. By @johnkenny54 in #1961
• No longer crashes when the output (-o argument) ends with a trailing slash to a location that didn't exist. By @SethFalco in #1954

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

What's Changed

Bug Fixes

• convertPathData, fix instances were q was incorrectly converted to t. By @KTibow in #1889
• convertTransform, fix for some transforms that weren't being converted correctly. By @SethFalco in #1916

SVG Optimization

• convertPathData, improves closing paths and how we determine if to use absolute or relative commands. By @KTibow in #1867
• convertPathData, round arc or convert to lines based on the sagitta, can be disabled by setting smartArcRounding to false. By @KTibow in #1873
• convertPathData, convert cubic Bézier curves to quadratic Bézier curves where possible, can be disabled by setting convertToQ to false. By @KTibow in #1889

Performance

• mergePaths, refactor for performance with large files. By @mozzie in #1764 and #1904
• convertPathData, refactor #stringifyPathData for performance. By @SethFalco in #1900
• Use Set instead of Array for faster lookups. By @SethFalco in #1899

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

What's Changed

Bug Fixes

• prefixIds, correctly prefix IDs when <style> tag contains XML comments. By @john-neptune in #1736
• removeHiddenElems, improve handling of definitions (<defs>), namely when <defs> are defined at the end of the document. By @KTibow in #1879
• cleanupEnableBackground, clean up inline-styles too. By @SethFalco in #1866
• cleanupIds, handle URI encoded references properly. By @SethFalco in #1880
• inlineStyles, no longer crashes on non-inlined selectors with a pseudo-class. By @SethFalco in #1865
• Improve handling of URL references in reference attributes (url('#a')) across various plugins. By @SethFalco in #1881

SVG Optimization

• removeUnknownsAndDefaults, now removes defaults in XML declarations too, enabled by default and can be toggled with defaultMarkupDeclarations. By @SethFalco in #1872

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