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;
}
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.