postcss-svgo

What is postcss-svgo?

The postcss-svgo package is a plugin for PostCSS that optimizes SVG vector graphics within CSS. It uses SVGO (SVG Optimizer) under the hood to compress SVG images by removing unnecessary data without affecting the rendering of the SVG. This results in smaller file sizes and potentially faster load times for web pages that use SVG images in their stylesheets.

What are postcss-svgo's main functionalities?

Optimize inline SVG with PostCSS

This code sample demonstrates how to use postcss-svgo to optimize inline SVG within CSS. It sets up PostCSS with the postcss-svgo plugin, specifying a configuration object that includes SVGO plugins like 'removeDoctype' to strip out the doctype declaration from SVGs.

"use strict";\nconst postcss = require('postcss');\nconst postcssSvgo = require('postcss-svgo');\n\npostcss()\n  .use(postcssSvgo({\n    plugins: [{\n      removeDoctype: true\n    }]\n  }))\n  .process('a { background: url('data:image/svg+xml;charset=utf-8,<svg>...</svg>'); }')\n  .then(result => {\n    console.log(result.css);\n  });

Other packages similar to postcss-svgo

svgo

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.

gulp-svgmin

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

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.

grunt-svgmin

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.

README

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