Create a blue square with a red circle mask.

HTML

<div></div>
<svg>
  <defs>
    <symbol id="mask-content" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="50" fill="red"></circle>
    </symbol>
    <mask id="mask" maskContentUnits="objectBoundingBox" width="100%" height="100%" x="0" y="0">
      <use href="#mask-content" width="1" height="1" />
    </mask>
  </defs>
</svg>

CSS

div {
  width: 200px;
  height: 200px;
  mask-image: url("#mask");
  background-color: blue;
}