Envelope window SVG

29 October, 2012

This is a demonstration for a technique that I’ve also written about. It uses proportions of an inline image to create an invisible envelope window that an identical background SVG can shine through. Think of it as a glorified spacer GIF.

HTML

<a href="http://gracescale.com" class="svg-mark">
  <img src="gracescale.png" alt="Gracescale">
</a>

<a href="http://gracescale.com" class="svg-mark svg-mark--active">
  <img src="gracescale.png" alt="Gracescale">
</a>

CSS

html {
  background-color: #fff;
}

.svg-mark {
  display: block;
  max-width: 16em;
  margin: 1.5em auto;
}

.svg-mark img {
  display: block;
}

.svg.backgroundsize .svg-mark--active {
  background: url(gracescale.svg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

.svg.backgroundsize .svg-mark--active img {
  visibility: hidden;
}

Live demo

Top logo

Standard inline image. Deliberately oversized and blurred for demo purposes.

Bottom logo

Inline image styled: visibility: hidden;, with an SVG background on the parent <a> element. The invisible image provides the proportion, so no width or height styles are needed.