The logo in the header of this site is a raster PNG file (portable network graphics). I’m unsure if it’s worth changing it to a different file format, but it was interesting to read Jeremy Frank’s mini-series about using vector SVG instead (scalable vector graphics).
Detail reduction from the Argento style guide (PDF)
- Responsive logos, part 1: Tips for adapting logos for small screens
- Responsive logos, part 2: Making logos truly responsive with SVG
“SVGs are a perfect fit for resolution-independent logos. Combined with CSS media queries, a touch of JavaScript, and SVG injection, you have a robust solution for implementing responsive logos.”
You’re probably familiar with Joe Harrison’s responsive logos gallery where he showcased the concept (view in a browser you can resize for full effect).
Some further reading in Smashing Magazine’s 2014 piece titled rethinking responsive SVG, and more on responsive images in general at ResponsiveImages.org.
Posted . Updated .
More on how marks like this are made in Logo Design Love, third edition.
