Rendering GeoJSON as SVG
GeoJSON coordinates become SVG paths by applying a projection function that maps longitude and latitude to x and y.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
From Longitude and Latitude to SVG Coordinates
GeoJSON stores coordinates as longitude and latitude pairs on a sphere, which must be transformed into flat x and y values through a projection function before they can be written into an SVG path's d attribute as usable drawing commands.
- GeoJSON stores spherical longitude and latitude coordinate pairs
- A projection function transforms those into flat x and y values
- The projected coordinates then become path d attribute drawing commands
Handling Feature Types and Multi-Part Geometry
GeoJSON features can be points, lines, polygons, or their multi-part variants, and a renderer must handle each type appropriately, with multi-part polygons producing a single path containing several subpaths separated by moveto commands within one d attribute.
- Features may be points, lines, polygons, or multi-part variants of each
- Multi-part polygons become one path with several subpaths
- Each subpath begins with a moveto command within the same d attribute
Frequently Asked Questions
Why can't GeoJSON coordinates be used directly as SVG path coordinates?
GeoJSON uses spherical longitude and latitude, which must be projected onto a flat plane before they produce sensible x and y values for SVG rendering.
How do islands or multi-part regions render as a single path?
Each separate ring becomes a subpath within the same d attribute, each starting with its own moveto command, so one path element covers all parts of the region.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG