Big update!Introducing GitHub Bot Commands. Learn more
Socket
Log inBook a demo

postcss-svgo

Package Overview
Dependencies
2
Maintainers
7
Versions
47
Issues
File Explorer

Advanced tools

postcss-svgo

Optimise inline SVG with PostCSS.

    5.1.0latest

Version published
Maintainers
7
Weekly downloads
10,228,206
decreased by-12.81%

Weekly downloads

Readme

Source

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])

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

Keywords

FAQs

What is postcss-svgo?

Optimise inline SVG with PostCSS.

Is postcss-svgo popular?

The npm package postcss-svgo receives a total of 8,232,223 weekly downloads. As such, postcss-svgo popularity was classified as popular.

Is postcss-svgo well maintained?

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.

Last updated on 01 Mar 2022

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc