Comments on Finessing `feColorMatrix`

8 Reader Comments

Back to the Article
  1. Super cool Una! As always pleasure to read!

    Copy & paste the code below to embed this comment.
  2. Una, I saw you demonstrate filters in NY and it was amazing to watch!

    And yes, SVG filters give you full customisation so you can build the exact filter you want. And apply it to HTML via CSS, of course.

    feColorMatrix is cool but it is linear; each channel in the output is a weighted sum of channels in the input. Or in Photoshop terms, there is no curve.

    To get a colorization effect, for example, you want black to stay black and white to stay white (or some pastel color, perhaps) but a per-component non-linear transfer curve between those. The differences in the curves are what gives you the color. So feComponentTransfer is your freind here (quite possibly combined with some feColorMatrix first, to set up the colors you want).

    I just wondered if you had experimented with that, because I am sure you would get some awesome results.

    Copy & paste the code below to embed this comment.
  3. Yes! Thanks for the comment :)

    (for those curious): feComponentTransfer is a great way to affect individual RGBA channel functions via feFuncR, feFuncG, feFuncB, and feFuncA. These are individual functions acting within feComponent and don’t act in the same way that feColorMatrix will “average out” a new RGBA model to map pixels to (see diagram above).

    For more info, there’s an excellent post on this in the Web Platform Docs: https://docs.webplatform.org/wiki/svg/elements/feComponentTransfer and the article I linked above “Smarter SVG Filters” also shows this technique. For those looking to dive deeper into the various color functions, check out the spec here: https://www.w3.org/TR/2003/REC-SVG11-20030114/filters.html#feFuncRElement

    Copy & paste the code below to embed this comment.
  4. Hey there.

    IE10+ and Edge support is a bit misleading since SVG filters only work on SVG elements in these browsers. Because this article is primarily about images, you can fallback to SVG markup for and have support for IE10+ and Edge as well as all other modern browsers.

    Yes it might be a little bit ugly and you have to control the size of you image manually, but it works.

    Demo:
    https://jsfiddle.net/p73938w8/
    https://jsfiddle.net/p73938w8/show/

    Copy & paste the code below to embed this comment.
  5. Una, that’s really helpful!

    Copy & paste the code below to embed this comment.
  6. really great about

    Copy & paste the code below to embed this comment.
  7. Great article!! As usual from both ALA and Una!!

    What if I want to change a specific colour (e.g.: #fafee2) to another one? Or set that specific colour to have Alpha=0?

    Is that still possible without using conditionals?

    Copy & paste the code below to embed this comment.
  8. Instagram has become one of the major social media platforms to share our social life with our mates, acquaintances and sometimes official purposes when it is about blogging and vlogging. Instagram captions

    Copy & paste the code below to embed this comment.
  9. Sorry, commenting is closed on this article.