Merging SVG paths of several neighboring US states

Question

I have a SVG graphic which outputs the map of the United States. Each US state is laid out as shown here. The borders are drawn by means of SVG paths. Each state is represented by its own SVG path.

What I want to do is to group several neighboring states into one area, say I want California, Arizona and Nevada to appear as a single area. For that I would need to merge the paths of each of these 3 states into one path which contains all three of them.

Does anyone know of a program which does this automatically for you? Or of an approach?

Answer 1

If you have Adobe Illustrator you can load in an SVG file as vector artwork, turn multiple paths into a single one using either the Unite Shape Mode or the Merge Pathfinder (both in the Pathfinder palette), and then export as SVG again.

Note that in your linked-to example the paths for each state do not overlap. As such, any path union performed on these paths would not change the visual appearance; there would still be a gap between the states.

If you want to obliterate the gap between the states in Illustrator, you would need to first use a Stroke on the state(s) so that the gap is covered, then choose the menu command Oʙᴊᴇᴄᴛ ▸ Pᴀᴛʜ ▸ Oᴜᴛʟɪɴᴇ Sᴛʀᴏᴋᴇ, and then Unite these along with the shapes.

If the gap is fine, and you just want to treat two (or more) states as a single object, you don't need Illustrator. Instead, place the multiple states into a group (<g>) and perform event handling on this group instead of each state.

This example shows two circles in a group with events and styles applied at the group level instead of the shape level:
http://phrogz.net/SVG/css-driven-styles.xhtml

Edit: If you don't have Adobe Illustrator, you can use the freely-available Inkscape program, which has its own Path Operations.