
Company News
Jerod Santo Joins Socket as Head of Media
Allow myself to introduce... myself.
postcss-svgo
Advanced tools
Optimise inline SVG with PostCSS.
With npm do:
npm install postcss-svgo --save
h1 {
background: url('data:image/svg+xml;charset=utf-8,<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"><circle cx="50" cy="50" r="40" fill="yellow" /></svg>');
}
h2 {
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDAiIGZpbGw9InllbGxvdyIgLz48IS0tdGVzdCBjb21tZW50LS0+PC9zdmc+');
}
h1 {
background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="%23ff0"/></svg>');
}
h2 {
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjQwIiBmaWxsPSIjZmYwIi8+PC9zdmc+');
}
svgo([options])Type: boolean
Default: undefined
If true, it will encode URL-unsafe characters such as <, > and &;
false will decode these characters, and undefined will neither encode nor
decode the original input. Note that regardless of this setting, # will
always be URL-encoded.
Optionally, you can customise the output by specifying the plugins option. You
will need to provide the config in comma separated objects, like the example
below. Note that you can either disable the plugin by setting it to false,
or pass different options to change the default behaviour.
const postcss = require('postcss');
const svgo = require('postcss-svgo');
const opts = {
plugins: [{
name: 'preset-default',
params: {
overrides: {
removeViewBox: false,
removeComments: false,
cleanupNumericValues: {
floatPrecision: 2
}
}
}
}]
};
postcss([ svgo(opts) ]).process(css).then((result) => {
console.log(result.css)
});
You can view the full list of plugins here.
See the PostCSS documentation for examples for your environment.
See CONTRIBUTORS.md.
MIT © Ben Briggs
SVGO is the underlying library that postcss-svgo uses for optimizing SVG files. It can be used directly on SVG files, rather than through CSS, providing a more general-purpose tool for SVG optimization.
This is a Gulp plugin that uses SVGO to optimize SVG files. It's similar to postcss-svgo but is designed to be used in a Gulp-based build process, making it more suitable for workflows that are already using Gulp.
imagemin-svgo is a plugin for Imagemin, another build tool, that also uses SVGO for optimizing SVG files. It's comparable to postcss-svgo but is tailored for use with Imagemin, which can handle various image formats, not just SVG.
This is a Grunt plugin that leverages SVGO to optimize SVG files. It's an alternative to postcss-svgo for those who are using Grunt in their build process.
FAQs
Optimise inline SVG with PostCSS.
The npm package postcss-svgo receives a total of 12,865,689 weekly downloads. As such, postcss-svgo popularity was classified as popular.
We found that postcss-svgo demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 7 open source maintainers collaborating on the project.

Company News
Allow myself to introduce... myself.

Research
/Security News
A Twitch browser extension on Chrome and Firefox forwards users’ live OAuth session tokens through proxies controlled by a Russian bot service.

Security News
Anthropic found biased reasoning and recklessness drove Claude Mythos 5 to publish malware on PyPI and compromise a security vendor.