SVG offers a non-destructive way to change some color properties of an image or graphic. Unfortunately some of those changes are more cumbersome to make than others. CSS filters allow you to non-destructively change some properties of color as well and in a less cumbersome way than SVG.
The last couple of weeks I’ve been talking about CSS filters as an alternative to SVG filters. First I offered an introduction and showed you an example of the blur() filter-function and then I walked through the url() and drop-shadow() filter-functions and provided examples for each.
Today I want to walk you through four more CSS filter-functions all of which are shortcuts to different types and values of the SVG filter primitive feColorMatrix.
The feColorMatrix Filter Primitive
The feColorMatrix primitive can be used as a general way to change some of the fundamental properties of color in an element. As the name implies, the primitive makes use of a matrix of values to add different filter effects.
Four different CSS filter-functions exist to replicate effects you can create with feColorMatrix. It’s one example where a single SVG primitive can do more than any one CSS filter-function.
Here are the four CSS filters.
Let’s walk through each of them and change the colors of what is likely a familiar image, if you’ve been following along with this series.