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.
steps() animation for the second hand. (Due to the newness of the Web Animation API, this demo will currently only work in Chrome).