I have a variety of images that will be used in a style intended to mimic a dot-matrix LCD.In a previous version, I rendered these images using a program and essentially ended up with a duplicate of the entire image library (quite large!) whereas for this rebooted version I want to take advantage of newer technologies (in browsers at least) such as SVG filters.Here is a sample:<svg viewBox=0 0 32 32 width=128 height=128>    <filter id=alphapixels>        <feColorMatrix type=luminanceToAlpha />        <feComponentTransfer>            <feFuncA type=table tableValues=1 0 />        </feComponentTransfer>        <feComponentTransfer>            <feFuncA type=discrete tableValues=0 0.5 1 />        </feComponentTransfer>        <feComponentTransfer>            <feFuncA type=linear slope=0.67 />        </feComponentTransfer>        <feComposite operator=in in2=SourceGraphic />    </filter>    <image filter=url(#alphapixels) image-rendering=pixelated xlink:href={SRC} width=32 height=32 /></svg>My logic here is:Convert to grayscale alpha mask with the handy luminanceToAlpha functionInvert the result (so dark regions become less transparent instead of more)Snap the grayscale to the discrete values off, medium, onScale it down to off, faint, darkComposite with original image so as to restore original alpha mask (otherwise the previously transparent background counts as solid darkness)This is my first time using SVG filters so I have no idea if I'm doing it right, but it just feels wrong somehow to have multiple <feComponentTransfer> elements each with a single <feFuncA>. Is there perhaps some way to improve this?
SVG filtering an image to stepped alpha grayscale
image;xml;svg