https://github.com/tannerhodges/gulp-zorrosvg

Generate ZorroSVG files from PNGs.
https://github.com/tannerhodges/gulp-zorrosvg

gulp gulp-plugin png png-compression svg svg-filters zorrosvg zorrosvg-alpha-masks

Last synced: 2 months ago
JSON representation

Generate ZorroSVG files from PNGs.

• Host: GitHub
• URL: https://github.com/tannerhodges/gulp-zorrosvg
• Owner: tannerhodges
• License: mit
• Created: 2017-01-25T02:43:24.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-07-22T18:58:16.000Z (over 6 years ago)
• Last Synced: 2024-11-17T14:39:12.933Z (3 months ago)
• Topics: gulp, gulp-plugin, png, png-compression, svg, svg-filters, zorrosvg, zorrosvg-alpha-masks
• Language: JavaScript
• Homepage: http://quasimondo.com/ZorroSVG/
• Size: 2.24 MB
• Stars: 8
• Watchers: 3
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# gulp-zorrosvg

Generate [ZorroSVG](http://quasimondo.com/ZorroSVG/) files from PNGs.

## Install

```bash

npm install --save-dev gulp-zorrosvg

```

## Usage

```js

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](http://quasimondo.com/) for creating [ZorroSVG](http://quasimondo.com/ZorroSVG/), coining the name, and making things dead-simple with the magic combination of `feOffset`, `feColorMatrix`, and `feComposite`.

- [Shaw](http://codepen.io/shshaw/) for creating [JPG+PNG to SVG Mask](http://codepen.io/shshaw/pen/tKpdl), taking it to the next level with data URIs, and documenting browser support in [SVG+Images Browser Test](http://codepen.io/shshaw/pen/IDbqC).

- [Peter Hrynkow](http://peterhrynkow.com/) for sharing [Using SVG to Shrink Your PNGS](http://peterhrynkow.com/how-to-compress-a-png-like-a-jpeg/) and implementing the technique on [sapporobeer.ca](http://sapporobeer.ca/) in the first place.

- [Smashing Magazine](https://www.smashingmagazine.com/) for sharing “Using SVG to Shrink Your PNGS” in [Smashing Newsletter #118](http://web.archive.org/web/20160418010611/https://www.smashingmagazine.com/smashing-newsletter-issue-118/#a3).

- [Dirk Weber](http://codepen.io/DirkWeber/) for penning [this example](http://codepen.io/DirkWeber/pen/DtJvf) that sparked my imagination.

- [Yoksel](http://codepen.io/yoksel/) for an [amazing list of masking techniques](http://codepen.io/yoksel/pen/fsdbu) that got me started on this journey.