<svg class="svg-defs">
  
  <mask id="mask">
     <image xlink:href="https://img-fotki.yandex.ru/get/4509/5091629.a2/0_85a64_94d6d625_M" width="203" height="300"/>
  </mask>
  <filter id="multiply" x="0" y="0">
      <feImage id="bgimage" result="bgimage" x="0" y="0" width="200" height="200" xlink:href="https://colourlovers.com.s3.amazonaws.com/images/patterns/3286/3286386.png"></feImage>
      <feTile in="bgimage"></feTile>
      <feBlend mode="multiply" in2="SourceGraphic"/>
    </filter>
</svg>
<svg class="pic pic--knight" viewBox="0 0 203 300">
       <image xlink:href="https://img-fotki.yandex.ru/get/6821/5091629.a1/0_855aa_7b6c51aa_M" width="100%" height="100%"
           filter="url(#multiply)"
              mask="url(#mask)"/>
</svg>
BODY {
  background: #72ae95 url(https://static.colourlovers.com/images/patterns/3286/3286386.png);
  }

.svg-defs {
  position: absolute;
  left: -100%;
  }
svg {
  width: 40%;
  height: auto;
  margin: 2em;
  border: 5px solid white;
  box-shadow: 0 0 20px rgba(0,0,0,.5);
  }
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.