It has been wonderful to see SVG used with increasing frequency for logos, but most sites only take advantage of the most obvious features of the format: its immunity to scale, innately responsiveness and small file size. In practice, this means that most SVG logos remain the same at all viewport sizes, simply growing larger or smaller.

As I’ve addressed in the past, responsiveness isn’t just about “making things squishy“: it’s about providing the user with the appropriate detail at different viewport sizes. Brands are no exception: any well-designed logo is modular, with components that can be employed at different levels of detail. This modularity should be used in web development to take maximal advantage of space in responsive designs.

Adaptive Logos as Sprites

To this point, the typical adaptive logo has been executed as a sprite, the technique I covered last week: a background image drawn as a “strip“ of different logo variations, which can be moved inside a space to present different versions of the logo. You can see many examples of this at the excellent responsivelogos.
The “strip“ of the Coca-Cola brand as an SVG sprite

However, the fact that the logo must be redrawn several times across the strip causes three significant problems:

In SVG, each vector shape is a separately addressable identity: rather than repeating variations of the logo, why not draw one logo and remove components from it at different viewport sizes? Because the CSS for this technique can be contained inside the SVG itself, I call this an “adaptive branding module“: in principle, you can drop it anywhere on a site, and it just works.

Making an Adaptive Branding Module

Let’s take the same Coca-Cola logo as an example. I’ve redrawn the logo, grouping and providing id attributes to the different components:

#coke-singular is the script-style “Coke“ that is made invisible by default in the CSS; I’ve also placed a transition on the SVG elements as a whole to allow the changes at different viewport sizes to be more obvious.

Efficiencies

Doing so not only compartmentalizes your CSS, but the @media queries stay in effect even if the SVG is used as an image:

<img src="coca-cola.svg" alt="Drink Coca-Cola">

The one thing you have to be aware of is that media queries written inside an SVG are only understood in the context of the image, and cannot look “outside“ it. That is, a (max-width: 200px) would refer to the width of the image on the page, not the width of the page itself.

One downside of this approach is that the viewBox - the canvas area of the SVG - remains the same aspect ratio, no matter what the size of the image or what is shown inside of it. This can mean a lot of wasted, empty space in the SVG as the elements are eliminated with a decreasing viewport size, as you can see when the example at the top of this article is in its smallest mode: I have deliberately displaced the smallest “Coke“ in the example above to emphasise this effect. I’ll address this issue in the next article.