<div class="container">
  <h1>
    <span>S</span>calable<br />
    <span>V</span>ector<br />
    <span>G</span>raphics<br />
  </h1>
</div>
@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Lato);
/* GENERAL
-----------------------------------*/
html {
  font-size: 100%;
}
body {
  background: #222;
  color: #444;
  font-family: Lato, 'Lucida Grande', Helvetica, Arial, sans-serif;
  text-shadow: 2px 2px 6px rgba(0,0,0,.6);
}
.container {
  margin: 0 auto;
  position: relative;
  width: 20rem;
}
h1 {
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: .08em;
}

span {
  background: url(https://f.cl.ly/items/2r1s0a1I0X2X1U2S0X3A/SVG.svg) no-repeat;
  background-size: 1.6em;
  display: inline-block;
  position: relative;
    top: .075em;
  width: .9em;
  height: 1em;
  text-indent: -9999px;
  
  &:nth-of-type(1) {
    background-position: -.38em -.12em;
  }
  &:nth-of-type(2) {
    background-position: -.4em -1.18em;
  }
  &:nth-of-type(3) {
    background-position: -.4em -2.14em;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.