Skip to Content

Blog

The sdg Blog is designed to show you who we are and what we're all about. Whether you're looking to read up on the latest technologies, trying to improve your soft skills, or wondering what we've been up to, our blog offers something for everybody.

Back

Reconsidering SVG

I've worked on a lot of web applications. Through this experience, I noticed a law emerge: Given Enough Time, Some Well-intentioned Shareholder Will Suggest a Feature That is Inconvenient or Impossible Using Only HTML, CSS, and JavaScript with a 100% Probability. The suggestion will sound innocuous enough: “What about a map of the state where you click a county to get its report? Oh, and the county should change color and pop out when selected.” But, you'll soon realize that no amount of jQuery, server-generated images, image maps, and CSS magic will make it work. Before you say no (or worse, say yes), reconsider SVG.

Remember SVG?

SVG, or Scalable Vector Graphics, is a format that defines vector graphics and their transforms using XML. The vector part means you're not describing pixels in an image. You're describing primitive shapes and how they should be decorated, sized, and situated. The XML part means you can embed the graphic in an existing XML (or almost XML) document like, say, HTML. As an example, the following snippet defines a red circle centered at 50,50 relative to its container with a radius of 45. (If you can't see the result, your browser doesn't support SVG.)

Good Things

When you deliver your app in a browser, rich-graphic options are limited. You can embed an object that requires a non-standard runtime like Adobe's Flash, Silverlight, or Java, you can use the <canvas> element, or you can use SVG. Flash, Silverlight, and Java must be installed before you use them. This may annoy or confuse your users. At worst, non-admin users may not have the rights required to install the browser plugin. Canvas and SVG are nice because they don't, in theory, require an install. Your browser already supports them.

In reality, canvas and SVG are not universally supported. IE versions 8 and older don't ship with native support. SVG has an advantage because it can be emulated in IE with the right JavaScript library. Raphaël is an example. It builds an SVG-like abstraction over IE's VML. VML is remarkably similar to SVG, so you can accomplish almost all SVG tasks using Raphaël. More on this later.

Another advantage is that all SVG objects are members of the DOM. This means they're fully scriptable and can be styled using CSS. SVG and non-SVG elements can share data and affect each other. Wiring up an event for an SVG element is as easy as any other HTML element. With jQuery:

This is considerably easier than managing canvas content. Canvas works in pixels, so all UI events need to be calculated from an action on the canvas. There's no concept of individual elements. If you want to change the way something looks on a canvas, you can't apply a style. You need to calculate the new look and render it.

Depending on the graphic, SVG definitions can be much smaller than their bitmap alternatives. They are also constructed in the browser from their XML description versus transmitted as a complete object. This can reduce server load.

Finally, vector graphics look great at any resolution. You'll appreciate this if your application is viewed on devices of varying dimensions. Your graphics will also survive a tablet's pinch and zoom.

Nuisances

Like any technology, SVG is not a panacea. It may be the wrong tool if you need universal browser support and can't live with emulation. Even browsers that support SVG don't necessarily support the whole specification. Possibly worse, the W3C recommends three specifications: full, tiny, and mobile. Tiny and mobile are subsets of the full specification. Taken together, these facts can cause headaches when trying to design a single solution for all platforms. The more complicated your SVG, the more likely you are to run into problems.

As developers stressed SVG's capabilities for in-browser games, they discovered practical limits. If your SVG graphic has thousands of elements, performance may degrade and it may be more efficient to render to a canvas. It's not always obvious which approach will perform better. Be sure to test each before making a decision.

Making it Easy with Raphael (or D3 or Bonsai or svgweb...)

I've used Raphaël in several SVG projects and it has never let me down. As mentioned earlier, Raphaël offers a consistent API that renders graphics using SVG or VML, depending on what the target browser supports. It's easy to use because it favors names that match SVG entities and attributes.

This isn't a Raphaël tutorial, so I won't go into detail. I'll just point out that Raphaël makes your life easier. Beyond abstracting the vector language, it handles events, animations, and complex transforms.

Basic shapes:

A complex shape:

Animate a shape:

SVG Makes You Useful

SVG is a rich technology and it's growing. It's supported by the most recent version of every major browser, including IE. It's complemented by other interesting technologies like SMIL (Synchronized Multimedia Integration Language), which enables SVG animation using markup versus scripting.

With the right library, you can forget about browser compatibility issues and get to work. Creating rich content is no more difficult than manipulating <div>s and CSS classes. So, the next time a project shareholder suggests an interactive pie chart (or any other interactive diagram), stop before you say no and consider SVG. It could make your project more useful, make your project more interesting, and make you look like a hero.

Other Resources

An SVG Primer for Today's Browsers” from the W3C is a great document if you can get past its formal preamble. It covers basics, advanced effects, animations, and scripting dynamic elements.

D3 (Data-Driven Documents) is an actively-developed library for data manipulation and visualization.

US States and Their Capitals is an SVG game I built to help my third grader learn her states and capitals. As always, there are a million things I would do different if I had to do it again. Still, it contains a few complicated shapes, uses simple animation, and shows how HTML and SVG can work together.