Using SVG Sprites for Multiple Dotted Country Maps

SVG sprites solve a problem that shows up the moment a page needs more than a handful of dotted country maps at once — a country picker, an office-locations grid with a small map per city, or any interface listing many places side by side. Loading each map as its own file works fine for one or two maps, but a page rendering thirty or forty separate SVGs means thirty or forty separate requests (or thirty or forty inline blocks of markup), and the browser work adds up faster than the file sizes suggest.

A sprite sheet bundles many individual maps into a single SVG document, each one defined once and referenced by ID wherever it's needed. The browser parses one file instead of many, and repeated uses of the same map cost almost nothing extra.

How an SVG Sprite Actually Works

The technique relies on two SVG features: <symbol>, which defines a piece of artwork without rendering it directly, and <use>, which references a symbol and renders it wherever it's placed. A sprite sheet is just a collection of symbols in one file:

<svg style="display:none">
  <symbol id="map-france" viewBox="0 0 200 200">
    <!-- France dot paths -->
  </symbol>
  <symbol id="map-germany" viewBox="0 0 200 200">
    <!-- Germany dot paths -->
  </symbol>
</svg>

Elsewhere on the page, each map renders with a short reference rather than repeating its full path data:

<svg class="country-icon"><use href="#map-france" /></svg>
<svg class="country-icon"><use href="#map-germany" /></svg>

The sprite <svg> itself is hidden (display:none or placed off-screen) since it exists only to hold definitions — nothing in it renders until a <use> element pulls a specific symbol out.

Building the Sprite From Individual Exports

1. Export each country map individually from the map generator, using a consistent viewBox across all of them so they scale uniformly once combined.
2. Strip each file down to its inner content — the <path> or <circle> elements that make up the dots — and wrap that content in a <symbol> with a unique id.
3. Combine the symbols into one sprite file, referenced once per page (or inlined at the top of the document, which avoids an extra network request entirely).
4. Replace individual <img> or inline SVG references on the page with <use> elements pointing at the matching symbol ID.

For a small, fixed set of maps — a footer of ten office locations, say — doing this by hand is manageable. For a larger or changing set, a small build script that walks a folder of exported SVGs and assembles the sprite automatically saves you from maintaining it manually every time a map is added or changed.

When a Sprite Is Worth It

A sprite sheet earns its complexity once a page is rendering a meaningful number of repeated or similar maps — a country-selector list, a multi-office footer, or a directory-style page. For a single map, or a page with just two or three, the added build step isn't worth it; a plain inline SVG or <img> reference, as covered in why SVG is the best format for web maps, is simpler and performs just as well at that scale.

Sprites and Styling

One advantage of the <symbol>/<use> approach over a flat PNG sprite (the older sprite technique, still common for icon sets) is that each instance can still be styled independently with CSS — recoloring one country's dots on hover, for instance, without needing a second copy of the artwork. This pairs with the same CSS techniques covered in how to customize SVG map colors with CSS, applied per-instance rather than to a single standalone map.

Combine With Other Performance Techniques

A sprite sheet reduces request count and duplicate markup, but it's one piece of a broader performance picture. If the individual maps are themselves large or overly detailed, pair this with how to compress SVG maps for faster loading before building the sprite — a sprite made of thirty bloated files is still a large file, just consolidated into one request instead of thirty. For maps that render below the fold, lazy loading maps for faster page speed covers deferring the sprite's initial render entirely until it's needed.

Generate Your Maps

Start by exporting the individual country or region maps you need from the dotted map generator, keeping a consistent viewBox across the set, then assemble them into a sprite following the pattern above.