SVG rivers

A bunch of artists all recently have been asking me for scalable vector versions of my river map. A very reasonable request, given the data is natively vector, but all my renderers have been browser-based pixel things. Fortunately the underlying rendering is done with D3, which creates SVG in the browser. So how to save it?

Saving SVG

The simple answer is the SVG Crowbar Chrome bookmarklet. This lets you take, in essence, a screenshot of what’s in your browser but in SVG vector form. I think it’s basically copying and pasting the SVG out of the DOM, but it’s got some cleverness about keeping stylesheets too.

The real answer is some proper SVG writing code. No one seems to have ever really done this in D3 nicely, I think you still need something like the Downloadify Flash shim to enable the browser to write the file. (The very newest version of Chrome does have a file writer, but it’s part of the Mozilla work on editable web pages and seems weird.)

Another proper answer is to bypass the browser entirely and write a Node headless program to create the SVG and write it. I gather JSDOM is the library of choice for a browser-like DOM environment in Node, worth a try.


Unfortunately I don’t know much about working with SVG. Everyone wants to edit in Illustrator but I don’t know or own Illustrator. I’m told my SVG Crowbar files do load in Illustrator, so I guess that’s good. They do work in Inkscape too but I don’t know Inkscape very well and it’s pretty clunky.

Anyway, my SVG question is about scale. I’m used to tuning the way things look for pixels. For instance, for river maps for rivers of Strahler 1-10 it looks good if the line width is about strahler/2.0 pixels wide and I render the US to about 2000×1000 pixels. That’s what I did in the one goofy raster image that got Internet famous.

But pixels are lame. What if someone wants to print to a 20′ wide mold for a sculpture? (This is actually happening!) Or make a fine letterpress print (also, happening!) I’m hoping for now the Illustrator jocks can just scale the line width, etc as they need, but I don’t know what’s right.

Resolution independence also raises questions about coordinate rounding, and simplification thresholds, and other details.

2 thoughts on “SVG rivers

  1. Sweet, I’ve been meaning to ask about this. Things like SVG Crowbar get you the SVG tiles at the current zoom level, in the current viewport/window so if you zoom in a lot for the most detailed vector representation you just get a tiny bit of the map and if you zoom out you get a really detail-shorn version of the vectors. What if you wanted a zoom-level 13 vector version of the whole map? It seems like if you wanted a high-fidelity rasterization, you’d want to start there.

    A while ago, my girlfriend ran across the thing and was asking me what it would take to make a print of it and I said things like “oh, I used to play WoW with this guy!” and “it should be easy, it’s all vectors!”. Only one of those things turned out to be true.

  2. Yeah, you need a different view + model than the current tiled map gives. The whole set of rivers is never sent to the client, it’s too much data for a reasonable web page. I’ve built custom views that do take all the data, and marry it to a custom server that actually sends all the data, and then the SVG is what you’d want for a print. It’s pretty straightforward to do this yourself with my code, too.

Comments are closed.