Skip to content
An automatic SVG converter for your CSS files
Branch: master
Clone or download
Latest commit ccc324e Feb 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.editorconfig
.gitignore
.jshintrc Initial commit May 6, 2015
.travis.yml Use same testing targets as PostCSS Feb 22, 2019
README.md A bit more information about the options Dec 9, 2015
index.js Use a dynamic method name for rule/decl iteration Feb 22, 2019
package.json
phantomjs-script.js

README.md

svg-fallback Build Status

An automatic SVG converter for your CSS files, built on top of the PostCSS ecosystem.

Usage

Right now it is only possible to use this as a PostCSS plugin:

var postcss = require('postcss')
var svgFallback = require('postcss-svg-fallback')

var input = read(/* read some css */);
postcss()
	.use(svgFallback({
		// base path for the images found in the css
		// this is most likely the path to the css file you're processing
		// not setting this option might lead to unexpected behavior
		basePath: '',

		// destination for the generated SVGs
		// this is most likely the path to where the generated css file is outputted
		// not setting this option might lead to unexpected behavior
		dest: '',

		// selector that gets prefixed to selector
		fallbackSelector: '.no-svg',

		// when `true` only the css is changed (no new files created)
		disableConvert: false,
	})
	.process(input)
	.then(function(processor) {
		var output = processor.toString();
	});

Note: we must use the async version of postcss

Converts this:

.icon {
	background: url(images/sun-is-shining.svg) no-repeat;
	background-size: 20px 20px; /* background-size is mandatory */
}

.icon-inline {
	background: url(data:image/svg+xml; .. svg data ..) no-repeat;
	background-size: 20px 20px; /* background-size is mandatory */
}

to this:

.icon {
	/* original declarations are untouched */
	background: url(images/sun-is-shining.svg) no-repeat;
	background-size: 20px 20px;
}

/* same selector, but with a prefix */
.no-svg .icon {
	/* a png image is generated and placed in the `dest` folder,
	 * with default settings, that's right next to the original SVG
	 */
	background-image: url(images/sun-is-shining-20x20.png);
}

.icon-inline {
	background: url(data:image/svg+xml; .. svg data ..) no-repeat;
	background-size: 20px 20px; /* background-size is mandatory */
}

.no-svg .icon-inline {
	/* filename contains the hash of the svg data */
	background-image: url(3547c094eaf671040650cdcab2ca70fd-20x20.png);
}

Converting is done with PhantomJS and is only done for images that actually need conversion (background-size & mtime).

You can’t perform that action at this time.