Optimise inline SVG with PostCSS.
npm install postcss-svgo> Optimise inline SVG with PostCSS.
With npm do:
``
npm install postcss-svgo --save
`css
h1 {
background: url('data:image/svg+xml;charset=utf-8,');
}
h2 {
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDAiIGZpbGw9InllbGxvdyIgLz48IS0tdGVzdCBjb21tZW50LS0+PC9zdmc+');
}
`
`css
h1 {
background: url('data:image/svg+xml;charset=utf-8,');
}
h2 {
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjQwIiBmaWxsPSIjZmYwIi8+PC9zdmc+');
}
`
#### options
##### encode
Type: boolean
Default:
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.
##### plugins
Optionally, you can customise the output by specifying the plugins option. Youfalse
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 ,
or pass different options to change the default behaviour.
`js
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][plugins].
See the PostCSS documentation for
examples for your environment.
See CONTRIBUTORS.md.
MIT © Ben Briggs
[postcss]: https://github.com/postcss/postcss
[plugins]: https://svgo.dev/docs/plugins/