# postcss-write-svg

> Write SVGs directly in CSS

Latest version **3.0.1** (published 2016-12-14) · CC0-1.0 license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install postcss-write-svg
pnpm add postcss-write-svg
yarn add postcss-write-svg
bun add postcss-write-svg
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 3.0.1 |
| Published | 2016-12-14 |
| First published | 2015-09-11 |
| Weekly downloads | 0 |
| License | CC0-1.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=6.9.1 |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 750 |
| Author | Jonathan Neal |
| Maintainers | jonathantneal |
| Keywords | postcss, css, postcss-plugin, markups, customs, svgs, scalable, vectors, graphics, multiplexing, syntaxes, params, vars, variables |

## Links

- npm: https://www.npmjs.com/package/postcss-write-svg
- Repository: https://github.com/jonathantneal/postcss-write-svg
- Homepage: https://github.com/jonathantneal/postcss-write-svg#readme
- Issues: https://github.com/jonathantneal/postcss-write-svg/issues
- npm.io page: https://npm.io/package/postcss-write-svg

## Dependencies (2)

- [postcss](https://npm.io/package/postcss.md) ^5.2.6
- [postcss-value-parser](https://npm.io/package/postcss-value-parser.md) ^3.3.0

## 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

- 3.0.1 (latest) — 2016-12-14
- 3.0.0 — 2016-12-06
- 2.1.0 — 2016-02-26
- 2.0.0 — 2015-10-26
- 1.1.2 — 2015-09-12
- 1.1.1 — 2015-09-12
- 1.1.0 — 2015-09-11
- 1.0.0 — 2015-09-11

## README

# Write SVG <a href="https://github.com/postcss/postcss"><img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right"></a>

[![NPM Version][npm-img]][npm-url]
[![Build Status][cli-img]][cli-url]
[![Licensing][lic-image]][lic-url]
[![Changelog][log-image]][log-url]
[![Gitter Chat][git-image]][git-url]

[Write SVG] lets you write SVGs directly in CSS.

```css
/* before */

@svg square {
	@rect {
		fill: var(--color, black);
		width: var(--size);
		height: var(--size);
	}
}

.example {
	background: svg(square param(--color green) param(--size 100%)) center / cover;
}

/* after */

.example {
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='green' width='100%25' height='100%25'/%3E%3C/svg%3E") center / cover;
}
```

`@svg` at-rules generate SVG elements available to CSS. Within an `@svg`, descendant at-rules (like `@rect`) are interpreted as elements, while declarations (like `width`) are interpreted as attributes.

The `svg()` function renders an `@svg` as a data `url()`. `var()` functions within an `@svg` honor the variables passed in through `param()` functions.

## Options

#### `utf8`

Type: `Boolean`  
Default: `true`

Allows you to define whether UTF-8 or base64 encoding will be used.

```css
/* before { utf8: false } */

@svg square {
	@rect {
		fill: black;
		width: 100%;
		height: 100%;
	}
}

.example {
	background: svg(square);
}

/* after */

.example {
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IGZpbGw9ImJsYWNrIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIi8+PC9zdmc+");
}
```

## Usage

Add [Write SVG] to your build tool:

```bash
npm install jonathantneal/postcss-write-svg --save-dev
```

#### Node

```js
require('postcss-write-svg').process(YOUR_CSS, { /* options */ });
```

#### PostCSS

Add [PostCSS] to your build tool:

```bash
npm install postcss --save-dev
```

Load [Write SVG] as a PostCSS plugin:

```js
postcss([
	require('postcss-write-svg')({ /* options */ })
]).process(YOUR_CSS, /* options */);
```

#### Gulp

Add [Gulp PostCSS] to your build tool:

```bash
npm install gulp-postcss --save-dev
```

Enable [Write SVG] within your Gulpfile:

```js
var postcss = require('gulp-postcss');

gulp.task('css', function () {
	return gulp.src('./src/*.css').pipe(
		postcss([
			require('postcss-write-svg')({ /* options */ })
		])
	).pipe(
		gulp.dest('.')
	);
});
```

#### Grunt

Add [Grunt PostCSS] to your build tool:

```bash
npm install grunt-postcss --save-dev
```

Enable [Write SVG] within your Gruntfile:

```js
grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
	postcss: {
		options: {
			use: [
				require('postcss-write-svg')({ /* options */ })
			]
		},
		dist: {
			src: '*.css'
		}
	}
});
```

[npm-url]: https://www.npmjs.com/package/postcss-write-svg
[npm-img]: https://img.shields.io/npm/v/postcss-write-svg.svg
[cli-url]: https://travis-ci.org/jonathantneal/postcss-write-svg
[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-write-svg.svg
[lic-url]: LICENSE.md
[lic-image]: https://img.shields.io/npm/l/postcss-write-svg.svg
[log-url]: CHANGELOG.md
[log-image]: https://img.shields.io/badge/changelog-md-blue.svg
[git-url]: https://gitter.im/postcss/postcss
[git-image]: https://img.shields.io/badge/chat-gitter-blue.svg

[Write SVG]: https://github.com/jonathantneal/postcss-write-svg
[PostCSS]: https://github.com/postcss/postcss
[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss

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