Tailor fitted SVG backgrounds

24 October, 2012

On the web, brand marks, logos, and icons are typically implemented using inline images or CSS backgrounds. The problem is that as screen pixel densities increase and become more fragmented, traditional techniques no longer cut the mustard. Raster graphics are often scaled beyond 100%, causing undesirable blur effects.

Instead of creating several assets to cater for each density ratio, we really need two versions: one raster and one vector. Both the same size, just a different format.

Advanced caveat warning This method is best suited for flat graphics that can easily be exported into SVG. The main caveat is that you’re loading two assets where only one is needed. However, these are shrunk drastically with gzip in effect. Uploading assets onto a CDN can also help with the concurrent request blocking commonly associated with mobiles.

Modernizr is also required to feature detect SVG and background-sizing and provide class hooks for the CSS.

Time to sharpen up

We utilise the proportions of the inline image to create room for an identical background SVG. Check out the demo for an exaggerated look at it in action.

The markup

A typical markup pattern for a logo uses an image wrapped within an anchor tag:

<a href="http://example.com" class="svg-mark" title="Example">
  <img src="example.png" alt="Example">
</a>

The CSS

Using the proportions provided by the inline image, we can fit in an identical vector to the parent <a> element when SVG and background-sizing are supported.

.svg-mark {
  display: block;
}

.svg.backgroundsize .svg-mark {
  background: url(example.svgz) no-repeat left center;
  background-size: cover;
}

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

When Modernizr detects support for SVG and background-sizing, the image is styled with visbility: hidden, allowing the crisp background vector to shine through.

Depending on the size and positioning of the <a> element, try setting the background-size to either: cover, auto or 100% to make it fit accordingly.

Conclusion

The markup is kept very clean. The only script dependency is with Modernizr, which has a small footprint when custom built for production.