How to Create Fast, Private and Custom Maps with SVG

|

Maps are commonly associated with heavy third-party services, tracking pixels, and big JavaScript libraries. But you can build fast, fully private, and highly customizable maps using plain SVG and a little JavaScript. SVG gives you crisp vector rendering at any zoom level, excellent styling control via CSS variables, and the ability to keep every request local (which is great for privacy). This article walks through the architecture, practical techniques, code examples, and performance tips so you can produce production-ready SVG maps without relying on external map providers.

Why SVG for maps?

SVG is a vector format (XML) rendered by the browser’s graphics engine. Key advantages for mapping:

  • Scalability: Crisp lines at any resolution — perfect for retina screens and print exports.

  • Styling: CSS variables and selectors allow dynamic theming without reloading geometry.

  • Interactivity: Pointer events, focus, and keyboard interactions work naturally.

  • Privacy: Render everything client-side from local data or anonymized sources — no external calls to map tiles or analytics.

  • File output: Export to SVG or rasterize to PNG on the client easily.

SVG is not a drop-in replacement for tiled raster maps in every case, but for many applications (dashboards, site maps, custom visualizations) it’s ideal.

Data pipeline — keep it private and lightweight

A private SVG mapping pipeline typically follows:

  1. Obtain vector geometry (GeoJSON or TopoJSON) — host it on your own server, embed directly in the page, or generate server-side and send over an encrypted channel.

  2. Simplify geometry to reduce vertex count (preprocess with tools or libraries on build server).

  3. Project coordinates (lat/lon → x/y) using a simple projection (e.g., equirectangular) or a proper projection if accuracy is required.

  4. Render as SVG paths and apply CSS variables for theme and interactivity.

  5. Support export to SVG or raster on the client — no third-party requests.

Below we’ll implement a minimal, privacy-respecting example that converts GeoJSON polygons to SVG paths, styles them, adds markers, and allows exporting.

Minimal private SVG map (GeoJSON → SVG)

This example uses plain JS, an equirectangular projection, and a tiny GeoJSON snippet. In real use, replace the tiny GeoJSON with your own (preprocessed/simplified) data hosted privately or embedded.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Private SVG Map</title>
<style>
:root{
--land-fill: #e6f2e9;
--border: #2a6f5a;
--water: #cde7ff;
--accent: #ff7b5c;
}
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; margin: 0; display:flex; height:100vh; align-items:center; justify-content:center; background:var(--water); }
#mapwrap { width: 90vw; max-width:1200px; background: white; border-radius:10px; box-shadow:0 6px 25px rgba(0,0,0,0.12); padding:12px; }
svg { width:100%; height:60vh; display:block; border-radius:6px; }
.land { fill: var(--land-fill); stroke: var(--border); stroke-width:0.6; cursor:pointer; transition:fill .15s, transform .08s; }
.land:hover { fill: color-mix(in srgb, var(--accent) 20%, var(--land-fill)); transform: translateY(-1px); }
.marker { pointer-events: auto; cursor: pointer; }
.tooltip { position: absolute; padding:6px 8px; background:#222; color:white; border-radius:4px; font-size:13px; white-space:nowrap; transform: translate(-50%, -120%); display:none; }
.controls { margin:6px 0; display:flex; gap:8px; }
</style>
</head>
<body>
<div id="mapwrap">
<div class="controls">
<button id="exportSvg">Export SVG</button>
<button id="exportPng">Export PNG</button>
</div>
<div style="position:relative;">
<div id="tooltip" class="tooltip"></div>
<svg id="map" viewBox="0 0 1000 600" role="img" aria-label="Custom private map"></svg>
</div>
</div><script>
// Minimal sample GeoJSON (one polygon for demonstration). Replace with your private data.
const geojson = {
“type”: “FeatureCollection”,
“features”: [
{ “type”: “Feature”, “properties”: { “name”: “Sample Land” },
“geometry”: { “type”: “Polygon”, “coordinates”: [
[[-10,10],[10,10],[20,0],[10,-10],[-10,-10],[-20,0],[-10,10]]
] }
}
]
};// Simple equirectangular projection
function project([lon, lat], width=1000, height=600) {
// Map lon [-180,180] -> x [0,width]
const x = (lon + 180) / 360 * width;
// Map lat [-90,90] -> y [height,0] (invert y)
const y = (90 – lat) / 180 * height;
return [x, y];
}// Convert a ring to an SVG path
function ringToPath(ring) {
return ring.map(coord => project(coord)).map(([x,y]) => `${x.toFixed(2)},${y.toFixed(2)}`).join(‘ ‘);
}// Build and insert polygons
const svg = document.getElementById(‘map’);
svg.setAttribute(‘xmlns’,‘http://www.w3.org/2000/svg’);// draw a background rect for ‘water’
const bg = document.createElementNS(‘http://www.w3.org/2000/svg’,‘rect’);
bg.setAttribute(‘x’,0); bg.setAttribute(‘y’,0); bg.setAttribute(‘width’,1000); bg.setAttribute(‘height’,600);
bg.setAttribute(‘fill’,‘var(–water)’);
svg.appendChild(bg);geojson.features.forEach((feat, idx) => {
const g = document.createElementNS(‘http://www.w3.org/2000/svg’,‘g’);
const geom = feat.geometry;
if (geom.type === ‘Polygon’) {
// Create <path> using ‘d’ with polygon points (move + close)
const d = geom.coordinates.map((ring,ri) => {
const p = ring.map(project).map(([x,y]) => `${x} ${y}`).join(‘ L ‘);
return `M ${p} Z`;
}).join(‘ ‘);
const path = document.createElementNS(‘http://www.w3.org/2000/svg’,‘path’);
path.setAttribute(‘d’, d);
path.setAttribute(‘class’,‘land’);
path.setAttribute(‘data-name’, feat.properties.name || `land-${idx}`);
path.addEventListener(‘pointerenter’, showTooltip);
path.addEventListener(‘pointermove’, moveTooltip);
path.addEventListener(‘pointerleave’, hideTooltip);
g.appendChild(path);
}
svg.appendChild(g);
});// Example marker (projected point)
function addMarker(lat, lon, label) {
const [x,y] = project([lon, lat]);
const g = document.createElementNS(‘http://www.w3.org/2000/svg’,‘g’);
g.setAttribute(‘transform’, `translate(${x},${y})`);
g.setAttribute(‘class’,‘marker’);
g.innerHTML = `<circle r=”6″ fill=”var(–accent)” stroke=”#fff” stroke-width=”1.5″></circle>
<text x=”10″ y=”4″ font-size=”12″ font-family=”sans-serif”>${label}</text>`;
g.addEventListener(‘pointerenter’, (e)=>{ showTooltip(e, label); });
g.addEventListener(‘pointermove’, moveTooltip);
g.addEventListener(‘pointerleave’, hideTooltip);
svg.appendChild(g);
}
addMarker(2, 2, ‘Point A’); // sample marker

// Tooltip handlers
const tooltip = document.getElementById(‘tooltip’);
function showTooltip(evt, forcedText) {
tooltip.style.display = ‘block’;
const text = forcedText || evt.target.dataset.name || ‘Unknown’;
tooltip.textContent = text;
moveTooltip(evt);
}
function moveTooltip(evt) {
const rect = svg.getBoundingClientRect();
const x = evt.clientX;
const y = rect.top + (evt.clientY – rect.top) – 8;
tooltip.style.left = `${x}px`;
tooltip.style.top = `${y}px`;
}
function hideTooltip() { tooltip.style.display = ‘none’; }

// Export functions (client-side only — private)
document.getElementById(‘exportSvg’).addEventListener(‘click’, () => {
const serializer = new XMLSerializer();
let svgStr = serializer.serializeToString(svg);
// Add xml declaration and proper namespace to be safe
svgStr = `<?xml version=”1.0″ encoding=”UTF-8″?>\n${svgStr}`;
const blob = new Blob([svgStr], {type: ‘image/svg+xml;charset=utf-8’});
const url = URL.createObjectURL(blob);
const a = document.createElement(‘a’);
a.href = url;
a.download = ‘map.svg’;
document.body.appendChild(a); a.click(); a.remove();
URL.revokeObjectURL(url);
});

document.getElementById(‘exportPng’).addEventListener(‘click’, async () => {
// Rasterize by drawing SVG to canvas (keeps everything client-side)
const serializer = new XMLSerializer();
const svgStr = serializer.serializeToString(svg);
const img = new Image();
const svgBlob = new Blob([svgStr], {type: ‘image/svg+xml;charset=utf-8’});
const url = URL.createObjectURL(svgBlob);
const canvas = document.createElement(‘canvas’);
canvas.width = 2000; canvas.height = 1200; // export size
const ctx = canvas.getContext(‘2d’);
await new Promise((res, rej) => {
img.onload = () => { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); URL.revokeObjectURL(url); res(); };
img.onerror = (e)=> rej(e);
img.src = url;
});
canvas.toBlob((blob) => {
const url2 = URL.createObjectURL(blob);
const a = document.createElement(‘a’);
a.href = url2; a.download = ‘map.png’; document.body.appendChild(a); a.click(); a.remove();
URL.revokeObjectURL(url2);
}, ‘image/png’);
});
</script>
</body>
</html>

This demo does all geometry rendering and exporting locally — no third-party scripts, no leakage of coordinates to third parties, and full control over styling with CSS variables.

Projection choices and accuracy

The demo uses a simple equirectangular projection (lon/lat → linear x/y). That’s fine for small regions and conceptual maps. If you need accurate world maps:

  • Use proper projections (Mercator, Lambert Conformal, Albers, etc.). Implementing these by hand is possible — but for complex projections a small library or a precomputed projection on the server is useful.

  • For most private usage you can project server-side and send precomputed coordinates to the client to keep client code minimal.

  • Keep floating point precision reasonable — round coordinates to 2–4 decimal places for SVG paths to lower file size without visible artifacts.

Performance techniques for large geometries

SVG performance can suffer with many thousands of path elements, but there are several patterns to keep maps fast:

  • Simplify geometry: Preprocess polygons using simplification algorithms (e.g., Ramer–Douglas–Peucker) on the server at build time.

  • Use <g> and <use>: For repeated geometry (e.g., identical icons), define a <symbol> and reference via <use> instead of duplicating nodes.

  • Merge static shapes: If thousands of tiny adjacent polygons can be fused into fewer paths, do it offline.

  • Virtualize DOM updates: Only update nodes that changed — don’t rebuild the entire SVG on small interactions.

  • Layer ordering: Put large background shapes first (less pointer processing) and interactive layers later.

  • Hardware acceleration patterns: Avoid expensive filters or heavy glows; keep stroke widths moderate.

  • Canvas fallback: For millions of points consider a hybrid approach: draw heavy static elements once to a raster layer and overlay interactive SVG elements for highlights.

Theming and customization

Use CSS variables at the document root to enable dynamic themes without re-rendering geometry. Example:

:root {
--land-fill: #e6f2e9;
--border: #2a6f5a;
--accent: #ff7b5c;
}
.land { fill: var(--land-fill); stroke: var(--border); }

Switch themes by toggling a class on <html> or changing the variables at runtime:

document.documentElement.style.setProperty('--land-fill', '#fef1e6');

This makes it trivial to provide user preferences (dark mode, high contrast) while keeping the map geometry unchanged.

Accessibility

SVG maps are accessible when you:

  • Add role="img" or role="application" with a good aria-label.

  • Provide keyboard focus and handlers (make <g> or <path> focusable via tabindex).

  • Announce features with aria-describedby or accessible offscreen text.

  • Ensure color contrast for fills and markers, or provide an accessible legend separate from the visualization.

Privacy best practices

To keep map usage private:

  • No external tiles or analytics: Render from local data only.

  • Minimize telemetry: Avoid or anonymize user location if you must log interactions.

  • Do client-side rendering: Export and process data in the browser so raw coordinates never leave the user’s device.

  • Offer opt-in sharing: If users want to share a screenshot, keep that action explicit and user-initiated.

  • Secure hosting: If you host vector data server-side, serve it over HTTPS and require authentication when appropriate.

Advanced features (ideas to add)

  • Zoom & pan: Implement transform of an outer <g> and rescale stroke widths based on zoom level.

  • Clipping and masks: Use <clipPath> to crop overlays to a region.

  • Animated transitions: Interpolate path d attributes or animate CSS variables for smooth thematic changes.

  • Spatial indexing: For many markers, use an R-tree on the client for efficient hit testing and clustering.

  • Offline bundling: Ship vector tiles (small GeoJSON tiles) with the app for offline use.

Conclusion

Building maps with SVG combines the strengths of performance, privacy, and creative control into one simple, modern approach. Unlike traditional mapping tools that depend on remote tile servers or proprietary APIs, SVG maps live entirely in your control — rendered client-side, free from tracking scripts, and completely transparent in how data is handled. This independence ensures that your maps respect user privacy while still delivering rich interactivity and visual precision.

SVG’s vector nature guarantees crisp rendering at any scale and resolution, allowing maps to adapt seamlessly from small mobile screens to large-format displays without sacrificing clarity. Styling through CSS and dynamic updates via JavaScript give developers and designers unparalleled flexibility — from theming and animation to interactive tooltips and data-driven visual changes — all without relying on external services.

Performance-wise, SVG maps load quickly and remain lightweight, especially when geometries are simplified or preprocessed. They can also be exported directly from the browser to SVG or PNG, letting users create and share visualizations without intermediaries or cloud dependencies. These characteristics make SVG ideal for internal dashboards, educational tools, or any application that values privacy, efficiency, and maintainability.

Ultimately, SVG mapping is about autonomy and transparency. You control every aspect — from projection and styling to interaction and export — in an open, human-readable format. This approach aligns perfectly with modern web principles: fast, secure, accessible, and user-first. By choosing SVG, you’re not just making maps — you’re creating elegant, responsive, and fully private visual experiences that embody the best of what the open web can offer.