SVGs FTW!
SVGs, short for scalable vector graphics, are well, pretty awesome, for lack of a better word. If you aren’t familiar with the magic of SVGs you may be wondering why dedicate a blog post to them. The answer, at least for the purposes of the Riot9 website design, are two-fold. For one, SVGs provide a resolution independent way to serve up web graphics using XML to provide the browser “drawing instructions” for recreating paths, color, text, etc. Two, their file sizes can’t be beat. Check out the two versions of the Riot9 logo below to get a relatively non-technical demonstration of the magic happening here:
The first version of the logo is a PNG (exported from the same file as the SVG from Illustrator to ensure the same pixel dimensions) zoomed in at 200% in Chrome. Notice the loss of quality—namely the fuzzy edges—in this screenshot. Compare this to the screenshot of the SVG version of the logo below it, also zoomed in at 200% in Chrome. The edges stay super sharp and crisp no matter how much you zoom in or what device you view this on. So this means the logo looks great on the new (and much coveted by me) MacBook Pro with Retina display while still maintaining a small enough file size to render quickly on an iPhone4 without involving CSS media queries to swap out smaller or larger raster images (like PNGs).
Now let’s compare file size… In the above example, to keep the Riot9 logo sharp and crisp at 200% in PNG format the file size would be around 10 KB. The file size of the SVG version of the logo is only 3 KB and is infinitely scalable! While 7 KB doesn’t seem like a big deal, every bit of file size reduction in web development helps and it’s a no-brainer when it comes to the file size vs quality question. Unfortunately SVGs are not always the answer. SVGs are really only best for relatively simple graphics like icons and some logos. Complex, continuous tone images are best served up in bitmap format—PNGs, JPGs and GIFs. Another issue is lack of support across all browsers… latest versions of all major browsers have native SVG support, but if you’re concerned with Internet Explorer 8 (and below) users, SVGs won’t display and you’ll need a raster image fallback.
A discussion on SVGs can get rather technical quickly, so I’ll direct anyone interested to two great articles by the web pros at Smashing Magazine and A List Apart for the real nitty gritty on SVGs.
Modernism in the Modern World
Moholy-Nagy was also a professor in the Bauhaus school. The Bauhaus combined arts and crafts and became well-known for the modernist design theory it taught. His strong beliefs in the integration of technology and the arts marked a turning point in the school’s direction.
Here at Riot9, we also advocate the synergy of art, specifically design, with the ever-evolving world of technology, through both the means of creation and the medium of the interface. It seemed appropriate then, to take a cue from Moholy-Nagy’s paintings when designing the Riot9 website.
Combining painterly textures and overlapping geometric elements, as well as employing a neutral color scheme with accents of more saturated hues, this digital translation of fine art was an exciting design challenge.
Good design is unobtrusive.
