svgをbade64エンコードして、mask-image使って色変更する方法

先日、以下SVGのbase64変換サービス？をリリースしましたが、その中にあるmask-imageの使用方法について解説したいと思います。
https://cync.jp/dev/svg-encoder/

Contents:

mask-imageを:before,:after等に設定してbackground-colorで色を指定

mask-imageはその名の通り、svgのシェイプをマスクとして使用して、背景に指定した色でmask-imageで指定したシェイプに着色できます。

background-colorで色を指定するだけで変更できるため、簡単です。

See the Pen Untitled by Shuhei Koide (@shkd) on CodePen.

svgの利用方法的に、HTMLに直接記述してしまえば、色変更はし易いけれど、HTMLから分離したいケースでは、mask-imageが使えると思います。

Data on support for the mdn-css__properties__mask-image feature across the major browsers