High-quality R graphics on the Web with SVG

If you want the graphics you create with R to look their best, in general it's best to go for a vector-based graphics format instead of a raster-based format. Common formats like GIF and JPG are raster-based: the image is composed of pixels, and if you don't choose a high enough resolution, you're likely to lose fine details and/or the image will look blocky. But if you're publishing on the Web, you're probably limited in resolution (here on the blog, I'm limited to 500px in the horizontal direction, for example). Vector-based formats like PostScript and SVG always look their best regardless of the resolution, because they're rendered on demand from the component lines, symbols, and other elements of your graphic: it's a bit like using a laser printer instead of a dot-matrix printer, with a corresponding increase in quality.

The problem until recently is that not many browsers have had native support for vector images, limiting their usefulness on the web. But now, most modern browsers can render high-quality SVG images using the standard <img> tag, and R can easily [but see note below] generate SVG files with the svg device driver.

For example, here's a calendar heat map of Apple stock since the beginning of 2010 rendered as a SVG:

For comparison, here's the same image rendered as a PNG:

As you can see, the SVG file has much finer detail; this will become even more apparent if you right-click on each image to view them in their own tab, or download AAPL.svg and view it directly. The SVG version (rendered at 14in wide) will show much more detail in larger format. By the way, if you only see one image above it's because your browser doesn't support SVG. (It looks fine on my Mac using recent versions of Chrome and Firefox.) For reference, the above images were created using the following code in R:

svg("AAPL.svg",width=14,height=7)
calendarHeat(stock.data$Date, stock.data$Adj.Close, 
  varname="AAPL Adjusted Close")
dev.off()
 
png("AAPL.png",width=500,height=250)
calendarHeat(stock.data$Date, stock.data$Adj.Close, 
  varname="AAPL Adjusted Close")
dev.off()

Created by Pretty R at inside-R.org

Note: your installation of R must have been compiled with "Cairo" support for the svg function to work; you can easily check with the command:

> capabilities()["cairo"]
cairo 
 TRUE 

If it comes back TRUE as above, you're all set. Recent 32-bit MacOS distributions of the MacOS version of R have Cairo support built in, as will the 64-bit MacOS 2.13.1. (I ran the code above using the 2.13.1 MacOS release candidate.) So do the Ubuntu and Debian R binaries. Windows and Linux distributions (including Revolution R) generally don't have Cairo support built in, which you'll have to enable when you build R yourself.

Update Jul 8: I was just looking at this post on the iPad, and was presently surprised to find that SVG renders great on Safari for iOS. Zooming into the first chart and comparing it to the PNG chart really shows the benefits of using SVG.

Comments

[Dirk Eddelbuettel]

Nice post -- but just for the record, the Debian (and hence Ubuntu) binaries that I look after have had Cairo enabled since April 2008, or for more than three years.

[David Smith]

Good to know that the Debian/Ubuntu R binaries have Cairo enabled -- thanks, Dirk!

[David Heffernan]

Laser printers are raster devices too. They do have a lot of pixels mind you. Isn't SVG rather patchily supported in IE?

[anon]

To really make svg the way to go for web graphics, two things need to happen:

1. Web browsers need to uniformly handle how a svg is rendered (I get different results in safari, firefox, and chrome - and IE doesn't even get to be part of this conversation).

2. R needs to support svgx compression. SVG files are HUGE!! Okay, maybe not always compared to the raster alternative, but compared to other vector graphic formats like swf, they are gigantic.

I hope these things happen soon.

[BOB BOB]

I generate SVGs all the time, so I see the advantage, but then I always convert to PNG before using the pictures online or in a document. This is because they are smaller and easier to deal with. Furthermore, as long as the resolution and size is sufficient, the PNG doesn't look any different than the SVG, which is an important point this article ignores.

I mean, the SVG and PNG pictures you post don't really seem comparable to me: you certainly could have upped the resolution on the PNG so that it looked exactly like the SVG when viewed on the un-zoomed web page. Of course the SVG will look better if you really zoom in a lot, but (1) no one zooms in on web pages and (2) if the PNG is big enough, then even when you zoom in to a reasonable degree they will still look the same.