<script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js'></script>

<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>

<div class="l-wrapper">
  <div class="block" data-name="div">
    <svg xmlns="http://www.w3.org/2000/svg" class="svg-icon">
      <use xlink:href="#s-heart"/>
    </svg>
  </div>
  <header class="block" data-name="header">
    <svg xmlns="http://www.w3.org/2000/svg" class="svg-icon">
      <use xlink:href="#s-heart"/>
    </svg>
  </header>
  <article class="block" data-name="article">
    <svg xmlns="http://www.w3.org/2000/svg" class="svg-icon">
      <use xlink:href="#s-heart"/>
    </svg>
  </article>
  <footer class="block" data-name="footer">
    <svg xmlns="http://www.w3.org/2000/svg" class="svg-icon">
      <use xlink:href="#s-heart"/>
    </svg>
  </footer>
</div>
.svg-icon {
  display: inline-block;
  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;
  }

.l-wrapper {
  width: 300px;
  margin: 2em auto;
  }

.block {
  position: relative;
  min-height: 3em;
  margin: .5em 0;
  border: 2px solid;
  text-align: center;
  &:before {
    content: attr(data-name);
    position: absolute;
    right: 0;
    top: 0;
    padding: .2em .5em;
    }
}

[data-name="div"] {
  border-color: silver;
  &:before {
    background: silver;
    }
}

[data-name="header"] {
  border-color: orange;
  &:before {
    background: orange;
    }
}

[data-name="article"] {
  border-color: gold;
  &:before {
    background: gold;
    }
}

[data-name="footer"] {
  border-color: yellowgreen;
  &:before {
    background: yellowgreen;
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.