Initial - basic buffer-based version. No frills

Author: lakmeer

index.js

@@ -0,0 +1,38 @@
+
+var through     = require('through2');
+var gutil       = require('gulp-util');
+
+const PLUGIN_NAME = 'gulp-css-urlencode-inline-svgs';
+const delimiter   = '}\n';
+const detect      = /data:image\/svg\+xml\;utf8/g;
+const target      = /<svg[^;]+\<\/svg\>/g;
+
+function urlencodeSvgInText (input) {
+  var lines = input.toString().split(delimiter);
+
+  for (var i in lines) {
+    if (lines[i].match(detect)) {
+      lines[i] = lines[i].replace(target, encodeURIComponent);
+    }
+  }
+
+  return lines.join(delimiter);
+}
+
+module.exports = function gulpCssUrlencodeInlineSvgs () {
+  return through.obj(function(file, enc, cb) {
+    if (file.isNull()) {
+      return cb(null, file);
+    }
+
+    if (file.isStream()) {
+      cb(new gutil.PluginError(PLUGIN_NAME, 'No support for streams.'));
+    }
+
+    if (file.isBuffer()) {
+      file.contents = new Buffer( urlencodeSvgInText(file.contents) );
+    }
+
+    cb(null, file);
+ });
+}

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "gulp-css-urlencode-inline-svgs",
+  "version": "0.0.5",
+  "description": "Makes CSS-inlined data:image/xml+svg compatible with Firefox and IE",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "lakmeer (github.com/lakmeer)",
+  "license": "MIT",
+  "dependencies": {
+    "gulp-util": "^3.0.6",
+    "through2": "^2.0.0"
+  }
+}

readme.md

@@ -0,0 +1,53 @@
+
+# `gulp-css-urlencode-inline-svgs`
+
+Data URIs make sprites easier. SVGs make resolution independence easier.
+Putting them together seems like an obvious win. You might think that because
+the contents of an SVG is just XML text, you could just paste them right into
+your stylesheets! But the spec says that `data:image/xml+svg` must be URL
+encoded. So you still need to pass them through an encoding stage like you
+would for base64'ing other image types.
+
+Here's a gulp plugin that does that. It works on plain CSS so put it in your
+pipe after your compiler and autoprefixer, but before your minifier.
+
+
+## Example Usage
+
+``` javascript
+var urlencode = require('gulp-css-urlencode-inline-svgs');
+
+gulp.task('styles', function () {
+  gulp.src('src/styles/index.scss')
+    .pipe(sass())
+    .pipe(prefix())
+    .pipe(urlencode())    // New hotness
+    .pipe(cssmin())
+    .pipe(gulp.dest('public'));
+});
+```
+
+#### Input
+
+``` css
+background-image: url('data:image/svg+xml;utf8, <svg version="1.1" ... etc
+```
+
+#### Output
+
+``` css
+background-image: url('data:image/svg+xml;utf8, %3Csvg%20version%3D%22 ... etc
+```
+
+## Features
+
+- Enables cross-browser compatibility for inlining SVG data-URIs
+- That's the only thing it does, because that's what gulp plugins are supposed to do.
+- It also has the most unwieldy name of any gulp plugin, so there's also that.
+
+## TODO
+
+- Support streams? I guess
+- Default line delimiter is `}\n`. Might want to provide a different one.
+- Needs tests for proper plugin compliance.
+