Scalable Vector Graphics
Hello everyone, and welcome to Front End Center!
For those who’ve been following along, the 10k Apart competition from A List Apart is just wrapping up this week. I’ve got my entry in, but I haven’t yet shifted out of my focus on optimal code and minimal resource weight. The amount of ruthless reductionism I’ve visited on SharePoint for the last couple weeks at work attests to this, for better or worse.
Along that line, I wanted to focus on a resource that once again straddles the lines of development and design, and in-so-doing provides a bigger value than either alone could provide. We’ll be talking about Scalable Vector Graphics, or SVGs.
So what is a Scalable Vector Graphic? It’s a type of image usable on most modern web browsers. IE 8 and the stock Android 2.3 browsers don’t’ support them, but there are pretty comprehensive fallback techniques that cover the gap pretty well. As long as you’re aware of your audience needs and access capabilities, SVGs should be in your tool kit.
SVGs set themselves apart from traditional image types like jpegs, PNGs, or others. Most images are what is referred to as “raster” images. If that image is 60 pixels large, it’s very literally 60 pixels large. If you try to expand it larger, it’s going to pixelate and artifact like you wouldn’t believe.
Anyone who’s worked in Adobe Illustrator (or similar programs) will be familiar with the image type of “vector”, however! Vector images aren’t constrained by their set pixel size. They can be designed at 100px wide and high, and then adapted on the fly to larger and smaller sizes without adverse effects!
This strength of vectors has made them the darling of high-res mockups and print designers for years. Being able to adapt design elements and pieces across many sizes, color palettes, and even unrelated projects is the equivalent of having beautifully modular code ready and at hand.
SVGs take this innate vector capability and put it on steroids for the web. Their vector nature mean that they can fill a large or small amount of space with ease, depending on your CSS settings. If you have a logo in the corner of your desktop page that grows to fill the entire width on mobile, an SVG can handle that with grace.
Previous workarounds might have included loading multiple images, or sacrificing bandwidth via a HUGE image that resized much smaller for different screen sizes. Since SVGs aren’t limited by raster scaling, you don’t need to worry about these obtuse approaches. The image will appear at whatever size you need, and will appear crisp and clean even on Retina or other hi-res displays.
Even better than leveraging one giant raster image, SVGs are quite small in file size! Since they render based on shapes and colors, rather than a set raster image, they are made of fairly simple code that doesn’t add a lot of weight to your page. A screen-wide image with only a handful of bytes of data wouldn’t be possible with most traditional image formats.
The usefulness of an SVG doesn’t stop there, though. When it comes to animation and user interaction, they are miles ahead of traditional image solutions as well. Take the logo on my personal site, http://landtiser.com, for example.
So, how does it work? It’s all in how you use your SVG. When it’s a simple image that doesn’t need any special interaction or attention, and SVG can be used like any other file type. Stick it in an image tag, apply CSS to the image tag, and done!
So, where do these miracle images fall short? There are a couple places in particular that you should be aware of.
First, they shouldn’t be used in every situation. SVGs excel in linear and shape-based images. Logos, lettering, or decoration are ideal for the image format. Realistic photos, complex drawings, or other complicated images are NOT suited to Scalable Vector Graphics. Since SVGs are made up of individual paths and shapes, they run the risk of becoming bloated and complex. Imagine trying to convert a picture of a city block into individual shapes and colors, all piled on top of each other. Suddenly, the limited building blocks that benefitted a logo image file have ballooned the size and complexity of your photograph. It will probably be many times the size of a standard jpeg or PNG.
Finally, SVGs can really benefit from optimization. While this can be said of every image format, SVG optimization can SEEM more formidable at first. Even if they are largely mysterious black boxes, there are an endless number of tools available that turn traditional images into ideally optimized versions of themselves at the push of a button.
Similar tools are beginning to see widespread use for SVGs, but they are not as thoroughly saturated yet. When saving an SVG, you get multiple format options, and there are various considerations when optimizing as well. Ultimately, they are probably no MORE complex than traditional images. Thanks to the wider and more variable uses, however, it’s necessary that the average developer can see more of the inner workings of the optimization process. Moving parts look complicated and scary, but the end result is worth it.
And now, I’m going to go cross my fingers and await hearing the initial results from the 10K Apart challenge in the next couple of days. You should go view the entries yourself, if you have some free time! They range from creative portfolio concepts to ingenious CSS hacks, functional interfaces, and even a gorgeous resume and personal branding solution.
That… might be my personal bias speaking though.
Until next week, thanks for listening. This has been Chris Landtiser, and Front End Center.