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, type its coordinates or start from one of the example cities.
• Laser mode gives every layer its own color so it can get its own process. There's an option to use LightBurn's layer colors, and Export lists which color engraves, scores or cuts what.
• 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 colored 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, recolored, outlined or hatched.
• Each type of road, from motorways down to footpaths, can be turned off or get its own color, width and dashes, or be drawn as an engraved or outlined band with edges like a road map. Quick looks set the main roads in one click. Tunnels can be left out or dashed.
• Woods, parks, pitches, lakes and the sea can each be turned off or hatched, outlined or colored on their own.
• 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. Give each route its own color, and add kilometer or mile markers, the total distance and arrows.
• 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 color and layer of their own, like a race course, or to leave them out. Picking a road also lets you restyle every road of its type.
• 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 millimeters 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. Open someone's link and you can keep your own place and use only its style.
• 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°. The label under the frame shows the ground it covers, the scale and the size of the piece. Click the fit button under the zoom buttons, or press 0 on the map, to bring the whole frame back into view. The buttons at the top left switch the map behind it between Streets, Light and Satellite. They don't change the SVG.

The lock next to the scale under Location keeps it fixed, and it's on to begin with. The handles then resize the piece itself instead of changing the scale, so the map shows more or less ground. Unlock it to let them change the scale instead.

Click Generate SVG to build the SVG. The preview updates as you change settings. Scroll or pinch to zoom the preview and drag to move it. Point at anything in it to see what it is, and click it to open its settings. Double-click it or click Fit to see the whole piece again. Click Download SVG to save the file. Export has DXF, HPGL and PNG too. Share link under Import / Export copies 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.

The source and more details are on GitHub.