GeoJSON to SVG

What this tool does

It projects your coordinates, fits them to a viewBox, and writes one SVG path per polygon or line and a circle per point. The result is a self-contained file — no library, no tiles, no external references — with a small <style> block carrying the fill and stroke you chose.

The intent it closes: "I need a picture of this shape, not an interactive map." That is a figure in a document, a slide, a favicon-sized country outline, an email graphic, or the starting point for hand-editing in a vector editor.

How this tool works

Project, fit, draw.

1. Project

Web Mercator applies the standard latitude transform, which is what every web map uses and what makes country shapes look the way people expect. Equirectangular plots longitude and latitude directly, which stretches shapes horizontally away from the equator but keeps the geometry trivially invertible. Latitudes are clamped just short of ±85.05° in Mercator, where the projection goes to infinity.

2. Fit to the viewBox

Every projected coordinate is measured to find the extent, then scaled so the width you set (minus padding on both sides) covers the full longitude span. The height follows from the aspect ratio, so shapes are never distorted. The Y axis is flipped, because SVG counts downwards and latitude counts up.

3. Draw

Polygons become a single <path> whose subpaths are the rings — so holes appear as holes, thanks to the default even-odd-ish fill behaviour of the non-zero rule with reversed rings. Lines become paths with no fill, and points become circles. If you name a property in Tooltip from, each shape gets a <title> child, which browsers show as a native tooltip on hover.

Options

Width / Padding

Width sets the viewBox and the nominal pixel size; the height is computed from the data's aspect ratio. Padding keeps strokes from being clipped at the edges — a couple of pixels more than half your stroke width is enough.

Fill / Stroke / Stroke width

Any CSS colour works — hex, rgb(), a named colour, or none for an outline-only drawing. These land in a <style> block, so you can also override them later with your own CSS if the SVG is inlined in a page.

Point radius / Tooltip from

Point radius is in SVG user units, so it scales with the viewBox rather than with the data. Tooltip from takes a property name and adds a <title> element per shape — the cheapest possible interactivity, and it survives being pasted into any HTML page.

Example

Input:

{ "type": "Polygon", "coordinates": [
  [[0,0],[10,0],[10,10],[0,10],[0,0]]
] }

Output (trimmed):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" width="800" height="800">
  <style>path{fill:#cfd9e8;stroke:#15355c;stroke-width:1;stroke-linejoin:round}path.line{fill:none}circle{fill:#15355c}</style>
  <path d="M10 790 L790 790 L790 10 L10 10 Z"></path>
</svg>

The square came out square because a 10° box near the equator is near-square in Mercator. Take the same box at 60–70° latitude and Mercator stretches it vertically — which is the projection doing its job, not an error.

Tips & common pitfalls

• It is a drawing, not a map. There is no basemap, no graticule, no scale bar and no legend. For an interactive map use the viewer; for a printed figure, this plus a vector editor.
• Detailed geometry makes huge SVGs. A full-resolution coastline can run to megabytes of path data. Simplify and round the coordinates first — the visual difference at figure size is usually nil.
• Per-feature styling needs editing. Every shape shares one style. For a choropleth, add fill attributes or classes to the paths afterwards; the Tooltip from titles help you tell which path is which.
• Mercator breaks at the poles. Latitudes are clamped near ±85°, so Antarctic outlines will be cut. Use equirectangular for polar data.

FAQ

Which projection should I pick?

Web Mercator if the picture should look like the map people are used to. Equirectangular for polar data, for small areas where it barely matters, or when you want the pixel-to-degree relationship to stay linear.

Do polygon holes render as holes?

Yes — each ring becomes a subpath of one path element, which is how SVG expresses a shape with holes. If a hole fills solid, the ring winding is inconsistent; run rewind first.

Can I set a different colour per feature?

Not from the controls — one style applies to all shapes. Add per-path attributes afterwards, or generate one SVG per category using the filter.

Is the SVG self-contained?

Yes. No external references, no scripts, no fonts — just paths, circles and an inline style block, so it works as a file, an <img> source, or inline markup.