Responsive Logos, Part 2: Making Logos Truly Responsive with Inline SVG
In Responsive Logos - Part 1, I made the case that applying responsive design thinking to logos and allowing for subtle flexibility can actually support and enhance a brand’s identity. Several tips were then presented, on how logos can be adapted to better fit small screen constraints.
This post shows how to efficiently implement responsive logos on the front-end, using the examples from part 1.
CSS Sprites and Image Swapping
The most common technique used for displaying different images at different breakpoints is CSS sprites. It works well, but requires creating a sprite image with each variation of the logo, and potentially additional images for each pixel density you are targeting. Another option is to use one of the new responsive image techniques, however, they aren’t yet well supported and they require creating separate image files for each variation of the logo. Neither of these options is super efficient.
Inline SVG Adaptation
- Logo is present on page as inline SVG.
- Adjust the size of logo for each state using media queries in CSS.
- Adjust the position, size, color, visibility, etc. of individual logo elements for each state using media queries in CSS.
- If the proportions of the logo change in any way, then adjust the SVG viewBox property for each format using JS.
For the examples below, resize the browser window or click the size buttons to see the technique in action. Be sure to check out the full Codepen examples to see actual code samples.
Example 1: University of Pennsylvania
This example displays two versions for the logo: large being the default, and small having the logotype removed and matching the height of the shield and mark.
See the Pen Responsive Logo - University of Pennsylvania by Jeremy Frank (@jeremyfrank) on CodePen.
Since the mark in the small version needed to be slightly taller to match the height of the shield, the viewBox property on the SVG element had to be adjusted so that the mark would not be cut off on the right side, due to a wider overall width. To get this value, I simply made the above size adjustment in Illustrator, and then rounded up the value from the info panel.
Example 2: Argento Wine
This example uses three states for the logo: the large state being the default, the medium state using a reduced detail version of the roundel, and the small state displaying the roundel only.
See the Pen Responsive Logo - Argento Wine by Jeremy Frank (@jeremyfrank) on CodePen.
This example is the most complicated in that there are 2 versions of the roundel contained in the SVG. The differences in version B and C outlined in the style guide were enough to warrant an additional grouping in the SVG element. As in the previous example, the viewBox property needed to be adjusted for each version to match the size of the displayed elements.
Example 3: Case-Mate
This example uses three states for the logo: the large state using the stacked version as the default, the medium state rearranging the mark and logotype into the horizontal version of the logo, and the small state displaying the mark only.
See the Pen Responsive Logo - Case Mate by Jeremy Frank (@jeremyfrank) on CodePen.
As in the examples above, the viewBox property on the SVG element had to be adjusted due to different proportions for each state of the logo.
Example 4: NOAA
This example uses three states for the logo: the large state being the default, the medium state hiding the encircling type, and the small state displaying the mark only without type.
See the Pen Responsive Logo - NOAA by Jeremy Frank (@jeremyfrank) on CodePen.
Bonus - SVG Injection