⚙️ Node.js tool for optimizing SVG files
MIT License
Bot releases are visible (Hide)
q
was incorrectly converted to t
. By @KTibow in https://github.com/svg/svgo/pull/1889
smartArcRounding
to false
. By @KTibow in https://github.com/svg/svgo/pull/1873
convertToQ
to false
. By @KTibow in https://github.com/svg/svgo/pull/1889
#stringifyPathData
for performance. By @SethFalco in https://github.com/svg/svgo/pull/1900
Set
instead of Array
for faster lookups. By @SethFalco in https://github.com/svg/svgo/pull/1899
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 |
Published by SethFalco 10 months ago
<style>
tag contains XML comments. By @john-neptune in https://github.com/svg/svgo/pull/1736
<defs>
), namely when <defs>
are defined at the end of the document. By @KTibow in https://github.com/svg/svgo/pull/1879
url('#a')
) across various plugins. By @SethFalco in https://github.com/svg/svgo/pull/1881
defaultMarkupDeclarations
. By @SethFalco in https://github.com/svg/svgo/pull/1872
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 |
Published by SethFalco 11 months ago
Z
between mergable M
/m
commands. By @KTibow in https://github.com/svg/svgo/pull/1856
z
conversions. By @KTibow in https://github.com/svg/svgo/pull/1842
<switch>
, as empty containers can be used for attributes like requiredFeatures
. By @vincentbernat in https://github.com/svg/svgo/pull/1747
.d.ts
file extension instead of .ts
. By @Exotelis in https://github.com/svg/svgo/pull/1780
#loadConfig
method. By @nuintun in https://github.com/svg/svgo/pull/1844
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 |
Published by SethFalco 11 months ago
Includes various bug fixes for existing plugins and a new optimization. Also splits removeXMLNS
, which removed XLink, into two separate plugins, removeXMLNS
and removeXlink
.
xmlns:xlink
) namespace. If that is desirable, you should enable the new Remove XLink (removeXlink
) plugin, which does more while being safer. By @TrySound and @SethFalco in https://github.com/svg/svgo/pull/1535
pre
elements in foreignObject
. By @SethFalco in https://github.com/svg/svgo/pull/1796
@-webkit-keyframes
in <style>
node. By @SethFalco in https://github.com/svg/svgo/pull/1826
z
command if going back to initial position, or drop z
if redundant. By @KTibow in https://github.com/svg/svgo/pull/1822
xmlns:xlink
) namespace and migrates from XLink attributes to the SVG 2 equivalent. Disabled by default. By @TrySound and @SethFalco in https://github.com/svg/svgo/pull/1535
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 |
Published by SethFalco 12 months ago
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.
preservePatterns
parameter. Preserves legal comments by default, same as the previous behavior, but can now be overridden. By @SethFalco in https://github.com/svg/svgo/pull/1812
removeAny
parameter to false
by default for accessibility. By @SethFalco in https://github.com/svg/svgo/pull/1806
defs
children after optimization. By @SethFalco in https://github.com/svg/svgo/pull/1785
null
, undefined
, or empty plugin. Instead, logs a warning and ignore it. By @SethFalco in https://github.com/svg/svgo/issues/1128
on*
) and href
attributes with javascript:
URIs. By @cakeinpanic and @SethFalco in https://github.com/svg/svgo/pull/1807, https://github.com/svg/svgo/pull/1818, https://github.com/svg/svgo/pull/1819, https://github.com/svg/svgo/pull/1820
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 |
datauri
option when multipass
is not enabledTypescript 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'
}
}
]
}
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
}
}
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
If you enjoy SVGO and would like to support our work, consider sponsoring us directly via our OpenCollective.
Join us in our discord
xmlns:xlink
attribute (https://github.com/svg/svgo/pull/1508)require
to fix segfaults in linux (https://github.com/svg/svgo/pull/1605)I found some users are trying to enable plugins which are not part of default preset, for example
{
name: 'preset-default',
params: {
overrides: {
cleanupListOfValues: true
}
}
}
To fix this I made docs more concrete about plugin (https://github.com/svg/svgo/commit/5165ccb9d1f116b26a30a020e65aadd666012cb1)
and introduced a warning when true is specified in overrides (https://github.com/svg/svgo/commit/cb7e9be623b6e2fbbfcb9b67c4c85131e1477925).
Please give us feedback if you still have issues.
Thanks to @IlyaSkriblovsky, @devongovett, @matheus1lva, @omgovich, @renatorib and @TrySound
If you enjoy SVGO and would like to support our work, consider sponsoring us directly via our OpenCollective.
Join us in our discord
This release adds support for es modules in svgo.config.js when package.json type field is "module".
For projects with mixed cjs and esm svgo.config.mjs and svgo.config.cjs are also supported as fallback.
See https://github.com/svg/svgo/pull/1583
export default {
plugins: [
'preset-default'
]
}
Follwing plugins are migrated to the new visitor plugin api and covered with tsdoc
Other internal changes
Thanks to @renatorib, @matheus1lva, @omgovich, @deepsweet, @ai, @samouss and @TrySound
optimize(svg)
usage without config (https://github.com/svg/svgo/pull/1573)Thanks to @XhmikosR, @thewilkybarkid, @renatorib, @matheus1lva, @omgovich and @TrySound
If you enjoy SVGO and would like to support our work, consider sponsoring us directly via our OpenCollective.
We have some good stuff in this release
Before people struggled to figure out what and why happens with such cryptic error
Error: Error in parsing SVG: Unquoted attribute value
Line: 1
Column: 29
Char: 6
File: input.svg
This gives too little information when a lot of svgs are transformed.
New errors look like this, include context and point to exact location with the issue.
We hope this will solve many issues when dealing with bundlers and other tools integrations.
Error: SvgoParserError: input.svg:2:29: Unquoted attribute value
1 | <svg viewBox="0 0 120 120">
> 2 | <circle fill="#ff0000" cx=60.444444" cy="60" r="50"/>
| ^
3 | </svg>
4 |
To get better compression results SVGO uses multipass option. This option is used
to run prefixIds plugin only once to prefix ids and classes properly.
Though sometimes users run svgo manually a few times which leads to duplicated
prefixes and make code much bigger. To solves this prefixIds was redesigned
to add prefix only when it does not exit in ids and classes.
Eventually all plugins are planned to be determenistic and idempotent
so multipass option would not be necessary and single pass compression
could be as effective as possible.
js2svg.eol: 'lf' | 'crlf'
Allows to customize end of line characters which is usually resolved by os.EOL in node.
finalNewline: boolean
Ensures SVG output has a final newline which is required for some tools like git.
Follwing plugins are migrated to the new visitor plugin api and covered with tsdoc
Also fixed a few bugs
Thanks to @XhmikosR, @matheus1lva, @deepsweet, @omgovich, @adalinesimonian and @TrySound
In this release we have a couple of fixes
Visitor api now get parentNode in enter and exit callback
return {
element: {
enter: (node, parentNode) => {
},
exit: (node, parentNode) => {
}
}
}
And a lot of plugins are migrated to visitor api and covered them with tsdoc
Thanks to @XhmikosR, @morganney, @oBusk, @matheus1lva and @TrySound
Hey everybody!
In this release I happy to introduce the new plugin "preset-default" which allows to declaratively setup and customize default set of plugins. Previous solution extendDefaultPlugins
utility prevented parcel users from using cachable json config, svgo-loader and svgo-jsx required svgo to be installed locally. "preset-default" plugin is just another builtin plugi.
module.exports = {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
// customize options
builtinPluginName: {
optionName: 'optionValue',
},
// or disable plugins
anotherBuiltinPlugin: false,
},
},
},
],
};
We also fixed a few bugs
Thanks to @TrySound, @ydaniv, @ludofischer, @XhmikosR and @joseprio
Fixed vulnerability in css-select dependency (https://github.com/svg/svgo/pull/1485)
Thanks to @ericcornelissen
Hey, everybody! We have a big release here.
Before:
<svg>
<style media="print">
.st0{ fill:red; padding-top: 1em; padding-right: 1em; padding-bottom: 1em; padding-left: 1em; }
</style>
<style>
.test { background: red; }
</style>
</svg>
After:
<svg>
<style>
@media print{
.st0{ fill:red; padding-top: 1em; padding-right: 1em; padding-bottom: 1em; padding-left: 1em; }
}
.test { background: red; }
</style>
</svg>
--exclude
flag which uses regexps to exclude some files from --folder
. See #1409svgo --folder=svgs --exclude "invalid-icon" "bad-.+"
Internal AST is migrated to XAST. This spec makes maintaining plugins easier and may be used as interop with other tools like SVGR.
The new visitor plugin type combines features of "full", "perItem" and "perItemReverse" plugins without loosing simplicity. Eventually only visitor api will be supported. See #1454
Also small fixes
Thanks to @chambo-e, @strarsis, @XhmikosR, @omgovich and @TrySound
This is a big patch with new style computing (https://github.com/svg/svgo/pull/1399) and landed to master regression tests
A lot of bugs are fixed
<style>
type attribute in inlineStyles plugin (https://github.com/svg/svgo/pull/1400)<style>
support in removeHiddenElems plugin (https://github.com/svg/svgo/pull/1399)<style>
support when removing useless path commands (https://github.com/svg/svgo/commit/c21fef54e1aede8cf9f4b4b73ab79d91b7907d2b)<style>
support when combining path commands (https://github.com/svg/svgo/commit/ba7e9bdc0d4ee677336f09b6fb24fd6cc866e97d)<pattern>
when at least one argument is present (https://github.com/svg/svgo/commit/0e6b0c4a0182fb79775fb6af2f1df18c12f917d9)<marker>
with display none (https://github.com/svg/svgo/commit/d3e3726ac42bf623572ff06405e12f4ee72873dd)<svg>
(https://github.com/svg/svgo/commit/28c01cfe65cd87796fb061fe3ede7c6f59d0e1f6)435 of 526 regression tests are passing
Thanks to @XhmikosR @sk- and @TrySound
Wow, two minor releases in a row. There is a big reason for that. We got a new logo! See it in readme. Big thanks to @DerianAndre.
There were also implemented brand new path data parser and stringifier (https://github.com/svg/svgo/pull/1378 and https://github.com/svg/svgo/pull/1387) to do more reliable transformations and produce smaller svg.
A cup of small fixes
<tspan>
inside <a>
(https://github.com/svg/svgo/commit/091172a392f6d751855477d51e5c8bd3e44fde97)Thanks to @sk- @XhmikosR @deepsweet and @TrySound
This release introduced two big changes
See fixed bugs
<svg />
with enabled cleanupIDs plugin (https://github.com/svg/svgo/commit/9b97e06ef69b7961f342c9ee8468c552c9b503a3)--config
flag does not exist or json string is specified (https://github.com/svg/svgo/commit/a855b40ec5d53f3ce3b45213fd4c65bc4dc05347)xml:space="preserve"
(https://github.com/svg/svgo/commit/776ec1e71bcd2aa768b2d3ac987177f706834547)<g>
when filter
attribute is specified (https://github.com/svg/svgo/commit/c1d5f0f7a93a6f1c947baa5860ddd40f8d1bb701)Thanks to @XhmikosR @sk- @chromakode @devongovett and @TrySound