gulp-zorrosvg

Generate ZorroSVG files from PNGs.

Install

npm install --save-dev gulp-zorrosvg

Usage

const gulp = require('gulp');
const zorrosvg = require('gulp-zorrosvg');
 
gulp.task('zorrosvg', () =>
  gulp.src('resources/assets/img/zorrosvg/*.png')
    .pipe(zorrosvg())
    .pipe(gulp.dest('public/img/zorrosvg'))
);

Credits

• Mario Klingemann for creating ZorroSVG, coining the name, and making things dead-simple with the magic combination of feOffset, feColorMatrix, and feComposite.
• Shaw for creating JPG+PNG to SVG Mask, taking it to the next level with data URIs, and documenting browser support in SVG+Images Browser Test.
• Peter Hrynkow for sharing Using SVG to Shrink Your PNGS and implementing the technique on sapporobeer.ca in the first place.
• Smashing Magazine for sharing “Using SVG to Shrink Your PNGS” in Smashing Newsletter #118.
• Dirk Weber for penning this example that sparked my imagination.
• Yoksel for an amazing list of masking techniques that got me started on this journey.