Shard SVG image to pieces

Question

Say you have an SVG image, for example:

Each map represents its own svg group, but contains other groups of subelements.

How can you split it into 52 different images?

Answer 1

Assuming each card is in its own group (the <g> element) without dependencies outside the group, then:

• copy the root element svg of the source file to 52 files ( <svg ...></svg> )
• for each card:
  • add the group belonging to the map as a child of the root svg in one of the new svg files created in step 1.
  • update the viewBox attribute (or width and height) in the svg root element to fit the map (maybe this can be done automatically by svg scour )