<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;
    width: 160px;
    height: 90px;
    background-image: url(resources/reference.png);
    display: block;
    float: left;
    transform:translateZ(0);
}
</style>
<ul>
<li style="filter: blur(3px)"/>
<li style="filter: brightness(0.5)"/>
<li style="filter: contrast(3)"/>
<li style="filter: drop-shadow(5px 5px 5px blue)"/>
<li style="filter: grayscale(0.5)"/>
<li style="filter: hue-rotate(180deg)"/>
<li style="filter: invert(1.0)"/>
<li style="filter: opacity(0.5)"/>
<li style="filter: saturate(10)"/>
<li style="filter: sepia(1.0)"/>
<li style="filter: url(#xor)"/>
</ul>