Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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'
		}
	}
});