<svg style="display: none">
  <symbol id="s-heart" viewBox="0 0 100 100">
        <path id="heart" d="M100 34.976c0 8.434-3.635 16.019-9.423 21.274h0.048l-31.25 31.25c-3.125 3.125-6.25 6.25-9.375 6.25s-6.25-3.125-9.375-6.25l-31.202-31.25c-5.788-5.255-9.423-12.84-9.423-21.274 0-15.865 12.861-28.726 28.726-28.726 8.434 0 16.019 3.635 21.274 9.423 5.255-5.788 12.84-9.423 21.274-9.423 15.865 0 28.726 12.861 28.726 28.726z" fill="crimson"/>
</symbol>
</svg>

<svg>
  <use xlink:href="#s-heart"/>
</svg>
svg {
  margin: 1em;
  width: 100px;
  height: 100px;
  background: url(https://img-fotki.yandex.ru/get/6834/5091629.a2/0_8591d_16b74e17_orig) no-repeat center center;
  }
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.