About SVGmap

SVGmap makes SVG maps of any city from OpenStreetMap data. Pick a place and a size, and it gives you a file that's ready for a laser cutter, pen plotter or printer. It's free and everything runs in your browser.

Features

• Any place in the world. Search for it or start from one of the example cities.
• Laser mode gives every layer its own colour so it can get its own process. There's an option to use LightBurn's layer colours.
• Plotter mode turns everything into strokes, hatches filled areas and puts each pen on its own layer for AxiDraw, vpype and saxi.
• Print mode uses coloured themes with wider lines for bigger roads.
• Presets for plaques, paper sizes and coasters, or your own size. Rectangle, rounded, circle or hexagon.
• Water, parks, buildings, roads, paths and railways can each be turned off, recoloured, outlined or hatched.
• Can fill in the buildings OpenStreetMap is missing with footprints from Overture Maps, which helps a lot in suburbs and towns nobody has mapped yet.
• Routes from GPX, KML, TCX or GeoJSON files, like a run from Strava or a hike from Komoot. Each gets its own layer, and the streets around it make room so it stays clear.
• Edit a route in the preview: drag its points onto the roads, snap a wobbly GPS track to the streets it ran along, trim the start to hide your front door, or draw a new route by clicking along the roads.
• Seven title styles, from a simple box or poster band to a ribbon, a compass seal, a legend with a scale bar, or huge letters with the map inside them. Six fonts are included, plus single-line fonts for plotters, or you can load your own. Drag the title on the map or in the preview to move or resize it.
• Pick roads in the preview to draw them in a colour and layer of their own, like a race course, or to leave them out.
• Pins, hearts, stars and other shapes with text of your own, like home or where you met. Place them with a click, then drag, resize and turn them in the preview.
• Line cleanup removes doubled and crowded lines that would burn into one dark band.
• Files are sized in millimetres and the text is converted to outlines, so no fonts are needed.
• Export as SVG, DXF or HPGL, one file per layer, mirrored for engraving the back of acrylic, or as a PNG of the preview.
• Placeholders like {coords} or {km} in the title, subtitle and pins, filled in from the map.
• Share links that keep all your settings.
• Can be installed as an app and works offline for maps you've already generated.

Controls

The white frame on the map is the capture area. Drag the map to look around, scroll to zoom and right-drag to rotate the view. On a phone, pinch to zoom and twist to rotate. Drag the white frame to move the capture, a corner or side handle to resize it and the round handle above it to turn it. Hold Shift while turning to snap to 15°. Click Fit capture to bring the whole frame back into view.

Click the lock next to the scale to keep it fixed. The handles then resize the piece itself instead of changing the scale, so the map shows more or less ground.

Click Generate to build the SVG. The preview updates as you change settings. Scroll or pinch to zoom the preview and drag to move it. Double-click it or click Fit to see the whole piece again. Click Download SVG to save the file, or Share to copy a link with your settings.

Click the title on the map or in the preview to drag it somewhere else, or drag its handles to resize it. Use Ctrl+Z to undo a change and Ctrl+Y to redo it.

How It Works

SVGmap downloads OpenStreetMap vector tiles from OpenFreeMap for the area inside the frame. A city center at the default scale needs 4 to 12 tiles. The tiles are decoded in a web worker and clipped to the shape of the piece. Roads and paths go through the line cleanup, which started out in my Blender add-on. Then each layer is merged and written out as an SVG.

With Add missing buildings from Overture on under Map data, it also reads the building footprints Overture Maps has and OpenStreetMap doesn't, straight from Overture's GeoParquet files. Most of them are Microsoft's and Google's machine-learning footprints. Any that mostly overlap a building already in the tiles are skipped, and the rest are drawn like any other building.

Imported routes skip the line cleanup and are drawn as they were recorded. Instead, every street, path and area closer to the route than the gap is cut back, so nothing gets scored again inside an engraved band.

There's no server doing the work. Tiles and decoded geometry are kept between renders, so changing a setting doesn't download anything again.

Only SVG export is supported for now. The source and more details are on GitHub.