http://kazzkiq.github.io/svg-color-filter/

A simple project to help understand SVG's powerful feColorMatrix filter.
http://kazzkiq.github.io/svg-color-filter/

fecolormatrix fecolormatrix-filter svg svg-filters

Last synced: about 2 months ago
JSON representation

A simple project to help understand SVG's powerful feColorMatrix filter.

• Host: GitHub
• URL: http://kazzkiq.github.io/svg-color-filter/
• Owner: kazzkiq
• License: mit
• Created: 2016-05-31T19:56:58.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-03-07T21:24:45.000Z (over 6 years ago)
• Last Synced: 2024-03-02T05:35:23.390Z (4 months ago)
• Topics: fecolormatrix, fecolormatrix-filter, svg, svg-filters
• Homepage: https://kazzkiq.github.io/svg-color-filter/
• Size: 286 KB
• Stars: 60
• Watchers: 3
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• Colorful - SVG Color Filter Playground - Understand how feColorMatrix works. (Tools)

README

        
# svg-color-filter

A simple project to help understand SVG's powerful feColorMatrix filter.



SVG Color Filter is a playground to help understand **feColorMatrix** in practice. Select between pre-baked sample filters, or change the values yourself and see the filter applied to the image in realtime.

If you never heard of **feColorMatrix** before, you should start with **[this awesome article](http://alistapart.com/article/finessing-fecolormatrix)** (which in fact is what inspired me to make this project).

This project is aimed to be a playground only. If you need production-ready libraries to give your image filters, you should try [CSSgram](https://github.com/una/CSSgram), [glfx.js](https://github.com/evanw/glfx.js), [canvasfilters](https://github.com/kig/canvasfilters) or any other lib for that matter.

**Compatibility issues:**

SVG filters are a relatively "new" feature, thus older browsers (IE < 10) will ~~not~~ probably have trouble loading the effects.