Using SVG for web pages

06 October 2013

It's long been a source of frustration to me that images on the web have been only raster graphics. While these work well for things like photographs, they are annoying since they don't scale well and are difficult to manipulate. We get around some of this by using vector representations to edit graphics and then exporting to raster formats, but it's still more of a kludge than I would like.

The vector graphics standard that's been talked about for a while is SVG, but for many years SVG support in browsers was spotty, so it wasn't something you could rely on. This has recently changed, even that laggard Internet Explorer now has good SVG support. So I'm increasingly using SVG graphics in my web work, and I think SVG offers us some great opportunities for more interesting forms of web content. However, as the old joke reminds us, every opportunity is a problem, so there's more than a few rough edges to deal with.

This article isn't a comprehensive treatment of using SVG on the web. I don't have the energy or ambition to write that article. But I can write about some of the problems and opportunities I've run into.