Releases: svg/svgo
v4.0.0-rc.0
Release Candidate
Note that 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 brief 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 from 30 April 2023. Node.js v16 is no longer supported too, 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 based, but we will no longer be testing against v14 from now on.
Imports/Exports
We use the exports
field in our package.json
to define the public interface of the package. This strictly defines the intended public API, and so enables us to decouple the internal structure of the project and any utilities from the public interface.
There are two ways to import SVGO:
svgo
- for normal usage, such as scripts or server-side applications.svgo/browser
- for in-browser usage.
If you use the browser bundle, you must amend how you import it:
- import { optimize } from "svgo/dist/svgo.browser.js";
+ import { optimize } from "svgo/browser";
For all interfaces, you can import the default export which yields an object with all exported properties, or destruct while importing to get an individual property:
// default.mjs
import SVGO from 'svgo';
console.log(SVGO.VERSION); // 4.0.0-rc.0
// destruct.mjs
import { VERSION } from 'svgo';
console.log(VERSION); // 4.0.0-rc.0
// default.cjs
const SVGO = require('svgo');
console.log(SVGO.VERSION); // 4.0.0-rc.0
// destruct.cjs
const { VERSION } = require('svgo');
console.log(VERSION); // 4.0.0-rc.0
// browser.mjs
import SVGO from 'svgo/browser';
console.log(SVGO.VERSION); // 4.0.0-rc.0
We support 3 environments, ESM, Common JS, and browser. The table below describes the properties that are available in each environment (excludes types):
ESM | Common JS | Browser | |
---|---|---|---|
VERSION |
✅ | ✅ | ✅ |
optimize |
✅ | ✅ | ✅ |
builtinPlugins |
✅ | ✅ | ✅ |
loadConfig |
✅ | ✅ |
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
tofalse
.
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
andplugins
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 thanks 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
tofalse
.
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 tot
. 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
tofalse
. By @KTibow in #1873 - convertPathData, convert cubic Bézier curves to quadratic Bézier curves where possible, can be disabled by setting
convertToQ
tofalse
. 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 ofArray
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 |
v3.0.5
What's Changed
Bug Fixes
- cleanupIds, correctly handle references to other nodes in animations. By @KTibow in #1862
- convertPathData, fix issue when removing redundant
Z
between mergableM
/m
commands. By @KTibow in #1856 - convertPathData, adhere to error/precision in
z
conversions. By @KTibow in #1842 - removeEmptyContainers, skip if parent node is
<switch>
, as empty containers can be used for attributes likerequiredFeatures
. By @vincentbernat in #1747 - removeHiddenElems, when removing a hidden definition, also remove nodes that reference it. By @SethFalco in #1852
- Output the optimization stats (profit) in red if the file size increased. By @gimler in #1162
- Type definition files now correctly use the
.d.ts
file extension instead of.ts
. By @Exotelis in #1780
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
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
- removeXMLNS, no longer removes the XLink (
xmlns:xlink
) namespace. If that is desirable, you should enable the new removeXlink plugin, which does more while being safer. By @TrySound and @SethFalco in #1535
Bug Fixes
- convertPathData, ignore instances where transform applied via style tag. By @SethFalco in #1830
- inlineStyles, inline properties with the same specificity in the order that they appear in the stylesheet. By @SethFalco in #1831
- inlineStyles, don't remove class or id from node if it's traversed in another CSS selector. By @SethFalco in #1832 and #1836
- Don't trim
pre
elements inforeignObject
. By @SethFalco in #1796 - Don't crash when encountering
@-webkit-keyframes
in<style>
node. By @SethFalco in #1826
SVG Optimization
- convertPathData, convert to
z
command if going back to initial position, or dropz
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
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 tofalse
by default for accessibility. By @SethFalco in #1806
Bug Fixes
- removeRasterImages, removes inline JPEG images. By @abejfehr in #1742
- cleanupIds, correctly handle when 2 IDs have been referenced in a single attribute. By @SethFalco in #1795
- cleanupIds, correctly handle when we've encountered a reference to a node that doesn't exist. By @SethFalco in #1817
- inlineStyles, treat style prop keys as case-insensitive. By @SethFalco in #1797
- inlineStyles, remove all classes in multiclass selector. By @SethFalco in #1801
- inlineStyles, ignore empty CSS blocks instead of adding empty style attribute. By @SethFalco in #1823
- minifyStyles, removes unused class selectors when the document has no classes. By @SethFalco in #1800
- prefixIds, reuse the same prefix when encountering an ID multiple times. By @SethFalco in #1814
- removeHiddenElems, stops removing non-rendering elements like masks. By @SethFalco in #1793
- reusePaths, creates a new ID if the current one is referenced by another element. By @SethFalco in #1784
- reusePaths, removes redundant
defs
children after optimization. By @SethFalco in #1785 - reusePaths, stops duplicating attributes into the shared definition. By @SethFalco in #1791
- Don't crash on a
null
,undefined
, or empty plugin. Instead, log a warning and ignore it. By @SethFalco in #1128
SVG Optimization
- convertTransform, omit spaces between functions. By @SethFalco in #1802
- removeScriptElement, removes callbacks (
on*
) andhref
attributes withjavascript:
URIs. By @cakeinpanic and @SethFalco in #1807, #1818, #1819, #1820 - convertOneStopGradients, new plugin to convert gradients with one stop to a solid color, disabled by default. By @SethFalco in #1790
Performance
- Various optimizations for path handling. By @marvinhagemeister in #1716 and #1717
Chores
- Revise the README. By @ADTC in #1731
- Fix dead link to postcss-svgo in README. By @Lehoczky in #1770
- Replace webpack loader library in README as previous was deprecated. By @tanyabouman in #1771
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 |