Image Tools: Consider exploring more advanced SVG filters #13
Description
(copying from another repo)
Working on the Image Filters I’ve run into a bit of a challenge.
The img element is kind of a weird one in the way it behaves, and the very best filters (google CSSgram) rely on literal overlays that leverage mix-blend-mode. But overlays run into trouble, because they have to be abs-positioned, which means the actual image becomes something else — it kind of has to be block level, or weird things happen:
https://codepen.io/joen/pen/vYYbwpL
However I found we can also use SVG filters to perform matrix filters on them:
https://codepen.io/joen/pen/dyyaELM?editors=1100
This means we don’t have to apply a wrapper to the img, we can just apply the filters directly. However for SVG filters to work we have to output actual markup in the document, for example this:
Even though this SVG is entirely invisible, it still needs to be output in the DOM both on the frontend and backend, or the filter won’t take.Let's explore what's feasible here, as the filters we can make using only filter may be limiting.