# postcss-encode-background-svgs

> PostCSS plugin to urlencode background svgs

Latest version **2.0.0** (published 2026-07-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-encode-background-svgs
pnpm add postcss-encode-background-svgs
yarn add postcss-encode-background-svgs
bun add postcss-encode-background-svgs
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2026-07-02 |
| First published | 2017-10-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=20 |
| Dependencies | 0 |
| Unpacked size | 10.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 9 |
| Author | Chris Boakes |
| Maintainers | chrisboakes |
| Keywords | postcss, css, postcss-plugin, urlencode, encode, background-svg, svg |

## Links

- npm: https://www.npmjs.com/package/postcss-encode-background-svgs
- Repository: https://github.com/chrisboakes/postcss-encode-background-svgs
- Issues: https://github.com/chrisboakes/postcss-encode-background-svgs/issues
- npm.io page: https://npm.io/package/postcss-encode-background-svgs

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2026-07-02
- 1.0.4 — 2019-07-20
- 1.0.3 — 2018-03-16
- 1.0.2 — 2018-03-16
- 1.0.1 — 2018-02-21
- 1.0.0 — 2018-01-03
- 0.0.9 — 2017-12-08
- 0.0.8 — 2017-11-29
- 0.0.7 — 2017-11-29
- 0.0.6 — 2017-11-29
- 0.0.5 — 2017-11-07
- 0.0.4 — 2017-10-27
- 0.0.3 — 2017-10-26
- 0.0.2 — 2017-10-26
- 0.0.1 — 2017-10-26

## README

# PostCSS Encode Background SVGs
[![CI][ci-badge]][ci-link] [![npm version][npm-badge-version]][npm-link]

[npm-badge-version]: https://img.shields.io/npm/v/postcss-encode-background-svgs.svg
[npm-link]: https://www.npmjs.com/package/postcss-encode-background-svgs
[ci-badge]: https://github.com/chrisboakes/postcss-encode-background-svgs/actions/workflows/ci.yml/badge.svg
[ci-link]: https://github.com/chrisboakes/postcss-encode-background-svgs/actions/workflows/ci.yml

[PostCSS](https://github.com/postcss/postcss) plugin to encode background-image SVGs for cross browser compatibility.

### The Problem
Background image SVGs are great but they don't render on IE unless encoded properly.

### The Solution
Write your background as you usually would:

```scss
/* Input example */
background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg"></svg>');
```
This encoder will then take your readable SVG and return a UTF-8 cross browser encoded solution like so:

```scss
/* Output example */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E");
```

## Requirements

- Node.js >= 20
- PostCSS 8 (peer dependency)

## Installation

[pnpm](https://pnpm.io/)

```sh
pnpm add -D postcss postcss-encode-background-svgs
```

[npm](https://www.npmjs.com/)

```sh
npm install --save-dev postcss postcss-encode-background-svgs
```

## Usage

In your `postcss.config.js`:

```js
module.exports = {
    plugins: {
        'postcss-encode-background-svgs': {}
    }
};
```

Or via the API — the package ships both ESM and CommonJS builds with TypeScript types:

```js
// ESM
import postcss from 'postcss';
import encodeBackgroundSVGs from 'postcss-encode-background-svgs';

postcss([encodeBackgroundSVGs()]);
```

```js
// CommonJS
const postcss = require('postcss');
const encodeBackgroundSVGs = require('postcss-encode-background-svgs');

postcss([encodeBackgroundSVGs()]);
```

See the [PostCSS](https://github.com/postcss/postcss#usage) docs for examples for your environment.

Once included in your environment, the plugin will search for any scss value with ```data:image/svg+xml```.

## Migrating from v1

Version 2 is a modernisation release — the encoding behaviour is unchanged:

- PostCSS 8 is now a peer dependency (v1 bundled PostCSS 6); install `postcss` alongside the plugin
- Node.js >= 20 is required
- The plugin registers under the name `postcss-encode-background-svgs` (previously `postcss-urlencode-background-svgs`)

## Credits

Big thanks for [Vasi](https://github.com/Vasiharan) and [Rob](https://github.com/RobDWaller) for their help with the Regex.

MIT © [Chris Boakes](https://twitter.com/cboakes)

---
_Source: https://npm.io/package/postcss-encode-background-svgs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._