Docs
Docs › Formats › SVG

SVG

SVG is the W3C standard for vector graphics on the web. Mapshaper writes SVG and can also import its own SVG output files. Use SVG when you want to drop a non-interactive map straight into a web page or edit your map in Illustrator — it's a display format, not a data interchange format.

File extension: .svg · Read: ✓ · Write: ✓ · Multi-layer: ✓

CLI examples

mapshaper provinces.shp -o provinces.svg
mapshaper provinces.shp -o width=1200 svg-data=name,pop provinces.svg
mapshaper a.shp b.shp -o combined.svg

Format-specific output options

  • width= — output width in pixels (default 800). Geometry is fitted to this width.
  • height= — output height in pixels. If both width and height are set, content is centred inside a [0, 0, width, height] viewport.
  • max-height= — cap the output height in pixels.
  • pixels= — total output area in pixels (alternative to width=).
  • margin= — padding between content and viewport edge (default 1 px). Pass <left,bottom,right,top> for asymmetric margins.
  • svg-scale= — scale in source units per pixel. Alternative to width= when you want a fixed scale rather than a fixed canvas size.
  • svg-bbox= — explicit xmin,ymin,xmax,ymax for the SVG viewport. Useful for aligning multiple SVG layers exported separately.
  • fit-extent= — use a layer (typically a single rectangle) to define the viewport.
  • svg-data= — comma-separated list of attribute fields to emit as data-* attributes on each <path>. Field names must match [a-z_][a-z0-9_-]*.
  • id-field= — promote one or more attribute fields to the SVG id attribute.
  • id-prefix= — prefix all generated layer/feature ids.
  • point-symbol=square — render points as squares instead of circles.

Practical notes

  • Each layer becomes a <g> group, with the layer name as the group id. Features become <path> (polygons/lines) or <circle> (points).
  • No data attributes are emitted unless you pass svg-data=.
  • The output is unstyled by default. Use -style to assign inline style attributes.
  • Very large or detailed layers can produce SVGs that are slow to render in browsers. Consider using -simplify before exporting.

External resources

See also

Edit this page on GitHub