In a previous article I detailed how to create an SVG branding module that automatically adapted to different screen sizes. While that solution works, it has one disadvantage: even as the logo simplifies and grows smaller, the aspect ratio of the SVG viewBox remains the same, meaning that the logo takes up less space inside the available area. This is particular problematic when the branding changes from a rectangular format to square one, like the example above.

Drink Coca-Cola
Adjust the browser width to see changes in the SVG brand module

It has been wonderful to see 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.


In principle, it’s easy to make an embedded Google Map responsive: just remove the height and width attributes that Google supplies in the embed code and substitute appropriate CSS and wrapping markup.

However, there’s one significant problem: any horizontal window resize cuts off the edge of the map, meaning that it must be moved or rescaled to track back to the original coordinates. However, if you change the approach a little, it’s entirely possible to solve the problem with a little JavaScript.