We're excited today to announce our newest playground piece, and our first guest playground piece, a set of resolution-independent web icons for social networks courtesy of Adam Fairhead of Fairhead Creative.
This set of icons includes almost every major (and minor social network or sharing tool you're likely to need, and since all of the icons are SVG files (scalable vector graphics) they can scale to any size, or any pixel density (hello, Retina displays).
Check Out the Playground Piece →
Built by a Fan of Foundation
We've known Adam for a while now — he's a huge proponent of Foundation on the Web (and on Twitter) and has been very active in the development of Foundation 2 and Foundation 3. When he let us know about these icons he had created, we immediately thought they were a great fit for Foundation, and we worked with him to produce this playground piece.
We asked Adam why he created these icons in the first place, given that he's distributing them for free, and he answered:
I build all my sites to be both viewport and resolution independent, and found myself creating these sorts of social icons over and over again. These icons exist because I needed them to exist, and I figured I can't be the only one!
Another reason these are a great fit for Foundation — that reason is almost exactly why we made Foundation in the first place.
SVG FTW
SVG images are a powerful but ill-understood image format. Browsers have pretty shaky support for them, and it doesn't help that there are several different formats for SVG. That's why we thought it was great that Adam built these as SVGs, and took the time to ensure they worked correctly with fallbacks to PNG for older browsers.
We asked Adam why he went ahead with SVG despite the challenges, and he answered:
SVGs are really great for vector work, which actually makes up quite a lot of my work — it suits a numbers of styles I enjoy working in. The fact that they're vectors means that future advancements in screen resolutions are also supported, as is zooming in (something that even @x2 bitmapped images fail at).
Moving Forward
Our hope is that this playground piece will not only help you better understand SVG images, but also help us — we've seen the potential of these scalable images, and haven't had a chance to dive in deep on production and usage. We asked Adam if there were any drawbacks:
Since SVGs are all XML based, having too much going on in an SVG can cause heavier load times (much like you would expect when loading a heavy stylesheet). You'll notice a combination of SVGs and bitmapped images for the header sequence of my current website design to avoid this problem in areas that are better suited to bitmapped images.
We, and Adam, hope you enjoy this new playground piece. You can download the images and a very simple example straight from Github, and there's an optional example download with the icons already integrated into a Foundation 3 setup. Let us know the uses you find for these, and if they help you better understand and use SVG images in the future!
