SVG: vectors on the web

I was an Illustrator user long before I became comfortable using Photoshop. (Of course, I was also a Flash developer back in the day, so it only made sense.) Vectors have a lot of advantages over raster images, and with nearly 100% browser support (on modern browsers), we can finally capitalize on their use.

Raster vs. Vector

A raster is essentially a photograph, like a JPG, PNG, GIF or TIF. It’s a file that basically tells the renderer what color each pixel is. This is why a raster image looks pixelated when blown up — zooming in simply makes those dots larger.

A vector, on the other hand, is a series of instructions. It tells the renderer what to draw. For instance, it might say “At the coordinate 40, 80, draw a rectangle that is 400 wide and 300 tall and filled with blue.” If you blow up a vector, it continues to be smooth because there is no true concept of pixels, which is exactly what we need for responsive design. Icons look crisp on all screens regardless of resolution, including retina and other high pixel density screens.

But the real magic lies in that the vector instructions can live directly in the DOM (Document Object Model), which means we can style and manipulate those instructions on the fly.

Examples

We recently built a site for a property development company. They needed a simple floor plan viewer that would allow a user to first select a type of unit (studio, 1 bedroom, 2 bedrooms, etc.), and then a unit number to show the individual unit drawings and details.

We used vector images of the floor plans to create an interactive viewer. Once a unit type is chosen, the units become active and then a user can select one to view. Each of the units are shapes within the SVG (scalable vector graphics) file that have an ID and class associated with them, so we can assign hover and active states and use click events to trigger the floor plan image change.

Mapping is another popular use for interactive SVGs. We used an SVG map for a web-based iPad game that uses a mix of SVGs and raster images. While SVGs can be much smaller in weight than a raster, this is only true for simple shapes. Once the shape becomes overly complicated – like a detailed map of the entire world – a raster image actually becomes smaller, and we are always looking at making images smaller to improve page load speed. We wanted to be able to smoothly zoom in when a user selects one of six countries. Large scale zooming in a browser can cause rendering hiccups causing the animation to appear slow or jilted, depending on the user’s device and the complexity of the image.

We address this issue by using two layers: 1) a PNG of the entire world map, and 2) an SVG layer over the top with the six countries. When a user selects a country, the rest of the map fades away, and the single country is zoomed in. The country image is smooth since it’s a vector, and the zooming is smooth because we’ve simplified what actually zooms.

When to skip SVG

As I mentioned earlier, SVGs are not always the perfect solution. For one, Internet Explorer 8 doesn’t support any SVG implementation, so we have to create PNG fallbacks.

SVGs can also become very complex,  since the browser has to parse through all of those instructions. Graphics with gradients, drop shadows and other filters and effects should probably be raster.  Overly complex vectors can cause both slow loading times and poor page performance, so it’s important to compare both options when deciding which to use.

How to Implement

How you implement SVGs is also an important consideration. Injecting them directly into the DOM has one huge drawback: your images will never cache. Your user will have to download that code over and over with each page load. If you’re building a single page site, the SVG is very simple, and/or it only appears once, then by all means, take advantage of this method, which allows you to do transitions and other on-the-fly manipulations. But if the image is complex and appears on every page, you’d be better off using an image or object tag, allowing the browser to download and cache the file.

Learning more:

There are many great resources out there for learning more, here are a few of my go-to’s:

• Different techniques for including SVG in your site:
  http://css-tricks.com/using-svg/
• Using SVG-based sprites:
  http://css-tricks.com/svg-sprites-use-better-icon-fonts/
• Browser support for SVG:
  http://caniuse.com/#feat=svg
• Demos of what’s possible using an SVG & JS library called Raphael:
  http://raphaeljs.com/