SVG 是一种面向 Web 和印刷的开放矢量格式。所有浏览器和图形编辑器均支持。非常适合 Web 地图、信息图,以及嵌入网站和演示文稿。
OpenStreetMap data as of 5 October 2026 · 25 days ago
主要特点

关于 SVG 格式
SVG is the open W3C consortium standard for vector graphics: the content is described as text, scales without loss of quality and opens in any browser. For a map that is a rare combination — one file suits page layout, printing and designer edits alike.
A map is exported to SVG when it will be styled further: a poster, a directions scheme, an illustration for an article, a picture for a website, a base for an infographic. In Illustrator, Inkscape, Figma or Affinity Designer you can recolor the roads, remove unneeded objects, add a route and your own labels.
What is in the file: one UTF-8 document where roads, buildings, water and greenery are drawn as real vector outlines rather than as a picture, and are sorted into layers — each one a separate named group instead of one common heap of objects. Thanks to that, keeping only the roads or recoloring all the water at once is a matter of selecting a group, not of hand-picking thousands of outlines; and if you don't need the layers, any editor ungroups them with one command. The labels stay as text rather than being converted to curves, so they are crisp at any zoom. There is a nuance: a label is drawn character by character, so editing it as a whole string in an editor will not work — it is easier to delete it and type it again.
The file weight predictably grows with the area: a map of a dense city center easily reaches tens of megabytes, and a browser starts to pan it slowly. If you need the file for the web, look at the compressed SVGZ option or lower the detail level at export time.
打开 SVG 文件的程序
以下程序可以打开、编辑和处理从 OSM2CDR 导出的 SVG (Scalable Vector Graphics)(.svg)文件:
格式规格
- 开放标准
- 仅 2D
- 无损(无质量损失)
- 无属性
- 输出:1 个文件
- UTF-8 SVG 1.1. Layers arrive as named groups (id, plus inkscape:label on the layer groups); styling is inline, with no CSS classes and no style block; labels stay live text. Editable in Inkscape, Illustrator, Figma, or any text editor. Layer blend modes (multiply, screen, etc.) are not carried over -- the site styles do not use them; translucency is plain alpha (fill-opacity).
谁在使用 SVG 地图
如何导出 SVG
导出后如何打开
- A browser — just open the file: Chrome, Firefox, Safari and Edge show SVG without plugins, and this is the fastest way to check the result.
- Inkscape (free) — its native format: editing outlines and colors, removing what you don't need, exporting to PNG or PDF at the size you want. The layer groups are visible in the objects panel, and the ones you don't need can be hidden or deleted whole.
- Adobe Illustrator — File > Open, then the usual design work: the map layers arrive as separate groups, convenient to work with one at a time. For printing, check that the label fonts are present in the system, otherwise they will be substituted with others.
- Figma — drag the file onto the canvas: the map becomes nested groups by layer, on top of which the layout is convenient to build.
- Putting it on a website — either as a picture through the img tag, or directly into the page markup if the objects have to be highlighted and handled by clicks.
SVG 格式的热门地图
导出 SVG (Scalable Vector Graphics) 地图
从 OpenStreetMap 下载专业的 SVG 地图。任意区域,付款前即可看到价格。
常见问题
与其他格式比较
SVG 格式互转
SVG 指南
相关格式
经常一起导出
Related Articles
SVG — Complete Guide: W3C History 1996-2025, How to Open, How to Export an OpenStreetMap Map
Deep guide to SVG: what's inside the W3C vector format, who created it, which programs open it, pros and cons. How to ge
tutorialExport OpenStreetMap to Illustrator: a clean vector map in a couple of minutes
How to get an OpenStreetMap map into Adobe Illustrator as real vectors: which format to download, how to open it, and wh
usecaseA poster map of your own city: making a print-ready vector map yourself
How to make a poster map of your own city: choosing the area and style, which format to print from (PDF and SVG, not PNG