<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1">
  <defs>
    <filter id="xor" color-interpolation-filters="sRGB">
      <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0.5 0" result="transp"/>
      <feOffset dx="10" dy="10"/>
      <feComposite in2="transp" operator="xor"/>
    </filter>
  </defs>
</svg>
<style>
li {
    margin: 10px;
    display: block;
    float: left;
}
img {
    width: 160px;
    height: 90px;
}
</style>
<ul>
<li><img style="filter: blur(3px)" src="resources/reference.png"/></li>
<li><img style="filter: brightness(0.5)" src="resources/reference.png"/></li>
<li><img style="filter: contrast(3)" src="resources/reference.png"/></li>
<li><img style="filter: drop-shadow(5px 5px 5px blue)" src="resources/reference.png"/></li>
<li><img style="filter: grayscale(0.5)" src="resources/reference.png"/></li>
<li><img style="filter: hue-rotate(180deg)" src="resources/reference.png"/></li>
<li><img style="filter: invert(1.0)" src="resources/reference.png"/></li>
<li><img style="filter: opacity(0.5)" src="resources/reference.png"/></li>
<li><img style="filter: saturate(10)" src="resources/reference.png"/></li>
<li><img style="filter: sepia(1.0)" src="resources/reference.png"/></li>
<li><img style="filter: url(#xor)" src="resources/reference.png"/></li>
</ul>