What to render and how large. Only style is required.
The SVG document, as a string beginning with <svg.
import { renderToSVG } from '@versatiles/svg-renderer';
const url = 'https://tiles.versatiles.org/assets/styles/colorful/style.json';
const style = await (await fetch(url)).json();
const svg = await renderToSVG({ style, lon: 13.4, lat: 52.52, zoom: 12 });
Renders a MapLibre style to an SVG image.
Fetches the vector and raster tiles the view needs, then draws every layer as SVG elements: fills and lines as paths, raster tiles and sprites as embedded images. The result is a single self-contained SVG document — it references no external files, so it can be saved, inlined into HTML or opened in a vector editor as is.
Works in Node.js (22 or later) and in the browser. The same function is exported by
@versatiles/svg-renderer,@versatiles/png-rendererand@versatiles/maplibre-svg-export; the examples import it from the first.Each call starts from scratch: it parses the style and fetches the tiles and the sprite again. To render many views of one style, use SVGMapRenderer, which keeps them between renders.