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.

When you scroll over my logo, the inner and outer rings of the image swap blue colors, essentially inverting the light and dark portions, visually. I didn’t have to use multiple images or excess JavaScript for this interaction either! All it took was one SVG and some standard :hover CSS selectors.

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!

For finer-tuned control, though, you can actually in-line SVGs and control them, shape by shape, via CSS or JavaScript! Remember when I said that the code behind SVGs was much simpler than raster images? My whole logo is made up of six lines of code, that are incredibly easy to understand from a CSS perspective to class and interact with. 3 paths, 2 circles, and a rectangle. That’s it!

Like a div, or other semantic HTML element, those simple shapes can take classes or IDs that you add to them. They can be selected and interacted with through CSS and JavaScript alike. You can change their colors, sizes, and proportions. Any CSS or JavaScript animation methods your project supports can be applied to the SVG, either to individual parts or the image as a whole!

If you’re up for the challenge, SVG manipulation can create complex and impressive interfaces that are simple, accessible, and lightweight from a development perspective. Moving 3D shapes, video-esque audio synchronization, and more are entirely possible. You could use them to make games, or interactive elements usually the sole realm of JavaScript. Like any technology, consider when you might be using a hammer to do a wrench’s job, and try to avoid over-stretching one tool’s usefulness. The sheer flexibility and danger of such speaks volumes about SVGs, though.

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.

Second, it never hurts to be cautious and browser-check your SVGs. While you may regularly do browser comparisons to make sure your jpeg profile photo is showing up correctly relative to other content, it’s not very often you have to check HOW the image is being rendered on each separate browser. While SVG support has become fairly standard and universal, they are still comparably prone to cross-browser issue compared to traditional images. If you start adding inlined SVGs and accompanying CSS and JavaScript, that only becomes more true. While it’s not a regular problem, it’s worth noting that image rendering goes from a 0% issue to a 1% possible issue.

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.