Renders vector maps as SVG.
Currently supported layer types: background, fill, line, and raster.
npm install @versatiles/svg-rendererimport { renderToSVG } from '@versatiles/svg-renderer';
import { styles } from '@versatiles/style';
import { writeFileSync } from 'node:fs';
const svg = await renderToSVG({
style: styles.colorful(),
width: 800,
height: 600,
lon: 13.4,
lat: 52.5,
zoom: 10,
});
writeFileSync('map.svg', svg);import { renderToSVG } from '@versatiles/svg-renderer';
const svg = await renderToSVG({
style: await fetch('https://tiles.versatiles.org/assets/styles/colorful/style.json').then((r) =>
r.json(),
),
width: 800,
height: 600,
lon: 13.4,
lat: 52.5,
zoom: 10,
});
document.body.innerHTML = svg;The package includes an SVGExportControl that adds an export button to any MapLibre GL JS map.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5/dist/maplibre-gl.css" />
<script src="https://unpkg.com/maplibre-gl@5/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/@versatiles/svg-renderer/dist/maplibre.umd.js"></script>
</head>
<body>
<div id="map"></div>
<script>
const map = new maplibregl.Map({
container: 'map',
style: 'https://tiles.versatiles.org/assets/styles/colorful/style.json',
center: [13.4, 52.5],
zoom: 10,
});
map.addControl(new VersaTilesSVG.SVGExportControl(), 'top-right');
</script>
</body>
</html>The control opens a panel where the user can set width, height, and scale, preview the SVG, download it, or open it in a new tab. Map interactions are disabled while the panel is open.
Options:
new SVGExportControl({
defaultWidth: 1024, // default: 1024
defaultHeight: 1024, // default: 1024
defaultScale: 1, // default: 1
});| Option | Type | Default | Description |
|---|---|---|---|
style |
StyleSpecification |
(required) | MapLibre style specification |
width |
number |
1024 |
Output width in pixels |
height |
number |
1024 |
Output height in pixels |
scale |
number |
1 |
Scale factor |
lon |
number |
0 |
Center longitude |
lat |
number |
0 |
Center latitude |
zoom |
number |
2 |
Zoom level |
A visual comparison report between the SVG renderer and MapLibre GL JS is published to GitHub Pages:
---
config:
layout: elk
---
flowchart TB
subgraph 0["src"]
1["demo.ts"]
2["index.ts"]
subgraph 3["pipeline"]
4["render.ts"]
D["style_layer.ts"]
end
subgraph 5["sources"]
6["index.ts"]
7["geojson.ts"]
9["merge.ts"]
A["raster.ts"]
B["tiles.ts"]
C["vector.ts"]
end
8["geometry.ts"]
subgraph E["renderer"]
F["svg.ts"]
G["color.ts"]
H["svg_path.ts"]
M["types.ts"]
end
subgraph I["maplibre"]
J["control.ts"]
K["panel_css.ts"]
L["index.ts"]
end
end
1-->2
2-->4
2-->F
4-->6
4-->D
6-->7
6-->9
6-->A
6-->C
7-->8
9-->8
A-->B
B-->8
C-->8
C-->B
F-->G
F-->H
J-->2
J-->K
L-->2
L-->J
class 0,3,5,E,I subgraphs;
classDef subgraphs fill-opacity:0.1, fill:#888, color:#888, stroke:#888;