How to color a raster black and white image with a transparent outside. Based on https://stackoverflow.com/questions/57650474/how-to-apply-svg-filters-to-create-a-colored-svg-form-of-the-whole-silhouette/57656454
Built with blockbuilder.org
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
img.complete-red {
filter: url(#colorise);
}
img.filled-red {
filter: url(#colorise2);
}
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<svg width="0" height="0" style="position: absolute">
<defs>
<filter id="colorise">
<!-- Fill the filter area with red -->
<feFlood flood-color="red" result="colour"/>
<!-- Trim the red to just what's "in" (inside) the image (ie non-transparent) -->
<feComposite operator="in" in="colour" in2="SourceAlpha"/>
</filter>
<filter id="colorise2">
<!-- Fill the filter area with red -->
<feFlood flood-color="red" result="colour"/>
<!-- Trim the red to just what's "in" (inside) the image (ie non-transparent) -->
<feComposite operator="in" in="colour" in2="SourceGraphic"/>
<!-- Multiply the trimmed red shape with the original image. Black parts stay black. White parts become red. -->
<feBlend mode="multiply" in2="SourceGraphic"/>
</filter>
</defs>
</svg>
<img src="https://cdn.jsdelivr.net/gh/oakmac/chessboardjs/website/img/chesspieces/wikipedia/wK.png" class="original"/>
<img src="https://cdn.jsdelivr.net/gh/oakmac/chessboardjs/website/img/chesspieces/wikipedia/wK.png" class="filled-red"/>
<img src="https://cdn.jsdelivr.net/gh/oakmac/chessboardjs/website/img/chesspieces/wikipedia/wK.png" class="complete-red" width=90 height=90/>
</body>