In a recent post I described a duotone CSS Custom Filter I had built that allowed you to take a black and white image, and remap the black and white colors to two other specified colors. Say you have a t-shirt website. You could provide a single black and white image, and users could choose the color they want.
In the original implementation I used CSS Custom Filters, which are a little overkill for this use, and they are currently only supported on Chrome. Here we’re going to do the same thing, using an SVG Filter. SVG Filters are currently supported on both Chrome and Firefox and stand a much better chance of being implemented in other browsers sooner rather than later.
In particular, we’re going to use the ComponentTransfer filter primitive, described in more detail in this post.
Let’s take a look at the following SVG implementation (best viewed on Chrome and/or Firefox):
In the following demo:
For both of these examples, click on the HTML, CSS and JS tabs to see what’s going on and let me know if you have any questions.
As you can see, SVG filters are extremely powerful and worth learning more about. Using them to manipulate HTML content is currently only supported on Chrome and Firefox but it looks very promising that they’ll be supported on all browsers before too long.