Generate ZorroSVG files from PNGs.
npm install --save-dev gulp-zorrosvgconst 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'))
);- Mario Klingemann for creating ZorroSVG, coining the name, and making things dead-simple with the magic combination of
feOffset,feColorMatrix, andfeComposite. - 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.