Write SVGs directly in CSS
Switch branches/tags
Nothing to show
Clone or download
Latest commit 6f04693 Dec 15, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test 3.0.0 Dec 6, 2016
.gitignore 3.0.0 Dec 6, 2016
.tape.js 3.0.0 Dec 6, 2016
.travis.yml 3.0.0 Dec 6, 2016
CHANGELOG.md 3.0.1 Dec 14, 2016
CONTRIBUTING.md 3.0.0 Dec 6, 2016
LICENSE.md 3.0.0 Dec 6, 2016
README.md 3.0.0 Dec 6, 2016
index.js 3.0.1 Dec 14, 2016
package.json 3.0.1 Dec 14, 2016

README.md

Write SVG PostCSS Logo

NPM Version Build Status Licensing Changelog Gitter Chat

Write SVG lets you write SVGs directly in 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.

/* 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:

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

Node

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

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Load Write SVG as a PostCSS plugin:

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

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Enable Write SVG within your Gulpfile:

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:

npm install grunt-postcss --save-dev

Enable Write SVG within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

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