.. | ||
dist | ||
LICENSE-MIT | ||
package.json | ||
README.md |
postcss-svgo
Optimise inline SVG with PostCSS.
Install
With npm do:
npm install postcss-svgo --save
Example
Input
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+');
}
Output
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+');
}
API
svgo([options])
Note that postcss-svgo is an asynchronous processor. It cannot be used like this:
var result = postcss([ svgo() ]).process(css).css;
console.log(result);
Instead make sure your PostCSS runner uses the asynchronous API:
postcss([ svgo() ]).process(css).then(function (result) {
console.log(result.css);
});
options
encode
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.
plugins
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.
var postcss = require('postcss');
var svgo = require('postcss-svgo');
var opts = {
plugins: [{
removeDoctype: false
}, {
removeComments: false
}, {
cleanupNumericValues: {
floatPrecision: 2
}
}, {
convertColors: {
names2hex: false,
rgb2hex: false
}
}]
};
postcss([ svgo(opts) ]).process(css).then(function (result) {
console.log(result.css)
});
You can view the full list of plugins here.
Usage
See the PostCSS documentation for examples for your environment.
Contributors
See CONTRIBUTORS.md.
License
MIT © Ben Briggs