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.

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

1. An increase in file size;
2. Any changes made to the brand must be redrawn for each variation;
3. The CSS to move the sprite is relatively complex.

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:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="14 82 272 139">
    <g id="coca-cola">
        <title>Coca-Cola</title>
        <path d=""/>
        <path d=""/>
    </g>
    <path d="…" id="dynamic_curve" />
    <g id="coke">
        <title>Coke</title>
        <path d="…"/>
    </g>
    <path d="…" id="drink"/>
    <g id="coke-singular">
        <path d=""/>
        <path d=""/>
    </g>
</svg>

#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.

svg path { fill: #fff; }      
svg g { transition: 1s; }
#coke-singular { opacity: 0; }

The different elements are switched on and off within CSS @media queries:

@media all and (max-width: 70rem) {
  #drink, #coke { opacity: 0; }
}
@media all and (max-width: 60rem) {
  #dynamic_curve { opacity: 0; }
}
@media all and (max-width: 40rem) {
  #coca-cola { opacity: 0; }
  #coke-singular { opacity: 1; }
}

The result is what you see at the top of this article.

Efficiencies

The neatest part of this is that all of the CSS can be included inside the SVG itself:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="14 82 272 139">
    <defs>
        <style>
            svg path { fill: #fff; }  
            …

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">

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.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/xZzowx