使用svgdeveloper 和 svg-edit 绘制svg地图

简介: 目录: 1. 描述 2. 准备工作 3. 去除地图模板上的水印(可跳过) 4. 方法一、SVGDeveloper 5. 方法二、SVG-Edit 1. 描述编辑   有的时候我们需要自定义地图,本文提供基本的基于SVG的矢量图制作教程;   2.

目录:

1. 描述编辑

 

有的时候我们需要自定义地图,本文提供基本的基于SVG的矢量图制作教程;

 

2. 准备工作编辑

 

地图模板:例如需要自定义某个省份,挑选一张省份的地图图片即可,本文以吉林省地图为例jilin.png;

SVGDeveloper:绘制矢量地图软件,这里提供1.0安装包,试用30天,如需激活,请自行购买SVGDeveloper1.0;

SVG-Edit :绘制矢量地图的在线编辑器,官网地址,页面内有在线试用的地址或者也可以将编辑器下载到本地,SVG-Edit2.8;

Inpaint:去水印软件,这里提供6.2安装包,如需激活,请自行购买Inpaint6.2;

注:如果绘图功底很强无需地图模板也可以,SVGDeveloper1.0和SVG-Edit2.8二选一即可,Inpaint可选择性安装;

另:教程内用到的软件版本,去水印软件——Inpaint6.2,绘制矢量地图软件SVGDeveloper1.0或者SVG-Edit2.8;如遇其他版本有操作不一致的地方请自行注意。

 

3. 去除地图模板上的水印(可跳过)编辑

 

一般我们找到的图片都会存在字或者各种水印,为了操作界面清晰,可以将图片上的其他文字去除

3.1 导入图片

点击文件>打开,选择jilin.png
222

根据去除水印处的区域大小,调整魔术笔大小,然后选择需要去除水印的区域,最后点击处理图像

222

222

依次去除图片上其他需要去除水印的区域,处理完成后,点击文件>另存为吉林.jpg
222

3.2 调整图片大小

为了适应浏览器预览时的大小,我们可以修改下图片尺寸

打开Windows自带的画图工具,使用其他如ps软件均可。点击主页>重新调整大小,保持纵横比,将高度调至合适高度,这里调整为530px
222

 

4. 方法一、SVGDeveloper编辑

 

打开SVGDeveloper,如果没有激活会提示需要激活,可以咨询激活,或者使用试用版,选择试用30天,点击继续即可
222

4.1 新建svg文件

点击file>new,选择svg,点击ok
222

修改svg画布大小,调至和要使用的图片模板一样大小
222

4.2 插入图片模板

点击工具栏上的图片,然后在画布上点击一下,会提示插入图片,选择刚刚处理好的吉林.jpg

222

222

修改插入的图片模板的坐标和宽度高度
222

调整好图片模板的位置和大小后,点击一下左上角的黑色箭头即可
222

4.3 扣取区域路径

为了轮廓更清晰、准确,将背景放大到500%
222

选中钢笔这个是点路径用的,填充颜色调至无,边框蓝色

注:如果不去掉填充颜色的话,抠图的时候会被填充色覆盖区域,影响抠图

222

使用钢笔,在图片上选取路径,逐个点。如果点错的话就ctrl+z 撤销几步。点取过程中可以使用鼠标滚轮,和下面的滚动条调整显示区域。
222

然后在结束的时候,钢笔显示圈,再点,这样就完成了一个封闭路径。在path 属性路径 最后会有一个Z这样表示结束
222

4.4 添加区域文字(可跳过)

注:添加区域文字是为了地图标识区域对应的市,这一步可以跳过,实际在我们的设计器导入后预览时不会显示区域文字,设计器里可以通过标签来显示对应的市

选中text 工具然后在对应的位置上点击后输入文字
222

上方会出现文本框的代码这里也可以修改文本框内的文字,或者文本框的位置
222

4.5 添加id属性

在代码部分可以看到,路径和文本框内的id,根据区域名修改
222

之后就是逐个抠取各个区域,然后添加文字及id属性

所有区域都完成后,把比例缩小到100%
222

4.6 删除背景模板

绘制完成后,我们把背景模板删除,这里直接从svg代码将这一行删除即可
222

222

最后我们可以根据配色方案修改区域的背景色或者边框颜色
222

制作完成后,保存为吉林.svg,这样我们的矢量地图就绘制完成了

4.7 导入制作完成的svg地图

自定义地图,导入刚刚绘制的吉林.svg
222

 

5. 方法二、SVG-Edit编辑

 

可以直接打开网页中的示例在线模板,或者将源码下载到本地,打开svg-editor.html即可
222

5.1 插入图片模板

点击Import Image导入背景模板
222

调整图片的位置,可以使用工具栏的x、y和宽度高度来修改
222

5.2 扣取区域路径

为了轮廓更清晰、准确,将图片放大一些;可以通过左下角的放大镜或者鼠标的滚轮来放大缩小图片,同时为了抠图清楚,可以设置线条的颜色为蓝色,宽度为2,背景色为空
222

点击path tool,在图片上选取路径,逐个点。
222

最后形成封闭的路径即可。

5.3 添加区域文字(可跳过)

注:添加区域文字是为了地图标识区域对应的市,这一步可以跳过,实际在我们的设计器导入后预览时不会显示区域文字,设计器里可以通过标签来显示对应的市

点击文本框A,然后在合适的位置上点击后输入文字
222

5.4 修改id属性

修改区域和文本框的id
222

222

之后就是逐个抠取各个区域,分别给区域加文字,然后给路径和文本框添加id属性

所有区域都完成后,把比例缩小到100%

5.5 将代码另存为

将制作好的svg地图的代码拷贝到本地的编辑器中,将文件另存为后缀为svg格式的地图,吉林2.svg
222

5.6 删除背景图片

将背景图片部分的代码删除,然后保存即可
222

最后我们可以根据配色方案修改区域的背景色或者边框颜色,然后将修改后的代码保存到svg文件中即可

222

这样我们的矢量地图就绘制完成了。

5.7 导入制作完成的svg地图

自定义地图,导入刚刚绘制的吉林2.svg

222

相关文章
|
5天前
|
弹性计算 运维 自动驾驶
首个云超算国标正式发布!
近日,我国首个云超算国家标准GB/T 45400-2025正式发布,将于今年10月实施。该标准由阿里云联合多家机构起草,为云超算在高性能计算领域的应用提供规范。云超算结合传统HPC与云计算优势,解决传统HPC复杂、昂贵等问题。阿里云E-HPC V2.0是国内首批通过该标准认证的产品,支持大规模弹性计算,显著降低成本。新标准将推动算力基础设施迈向标准化、智能化新时代。
|
6天前
|
传感器 自然语言处理 监控
快速部署实现Bolt.diy
Bolt.diy 是 Bolt.new 的开源版本,提供灵活的自然语言交互与全栈开发支持。基于阿里云函数计算 FC 和百炼模型服务,最快5分钟完成部署。新手注册阿里云账号后可领取免费额度,按指引开通相关服务并授权。通过项目模板一键部署,配置 API-KEY 后即可使用。Bolt.diy 支持多种场景,如物联网原型开发、久坐提醒、语音控制灯光等,助力快速实现创意应用。
2244 19
|
7天前
|
云安全 人工智能 安全
|
7天前
|
Serverless API
【MCP教程系列】在阿里云百炼,实现超级简单的MCP服务部署
阿里云百炼推出业界首个全生命周期MCP服务,支持一键在线注册托管。企业可将自研或外部MCP服务部署于阿里云百炼平台,借助FC函数计算能力,免去资源购买与服务部署的复杂流程,快速实现开发。创建MCP服务仅需四步,平台提供预置服务与自定义部署选项,如通过npx安装代码配置Flomo等服务。还可直接在控制台开通预置服务,体验高效便捷的企业级解决方案。
【MCP教程系列】在阿里云百炼,实现超级简单的MCP服务部署
|
1月前
|
人工智能 自然语言处理 Java
快速带你上手通义灵码 2.0,体验飞一般的感觉
通义灵码个人版为开发者免费提供智能编码能力,专业版限免期内开放更多功能。使用需先注册阿里云账号,支持JetBrains IDEs、Visual Studio Code等开发工具。以Visual Studio Code为例,安装插件并登录后即可体验其强大功能。通义灵码2.0在代码生成、需求理解及单元测试自动化等方面有显著提升,支持多语言和复杂场景,大幅提高开发效率。
234891 36
快速带你上手通义灵码 2.0,体验飞一般的感觉
|
13天前
|
存储 人工智能 监控
一键部署 Dify + MCP Server,高效开发 AI 智能体应用
本文将着重介绍如何通过 SAE 快速搭建 Dify AI 研发平台,依托 Serverless 架构提供全托管、免运维的解决方案,高效开发 AI 智能体应用。
1888 6
|
5天前
|
人工智能 运维 数据可视化
阿里云百炼 MCP服务使用教程合集
阿里云百炼推出首个全生命周期MCP服务,支持一键部署、无需运维,具备高可用与低成本特点。该服务提供多类型供给、低成本托管及全链路工具兼容,帮助企业快速构建专属智能体。MCP(模型上下文协议)作为标准化开源协议,助力大模型与外部工具高效交互。教程涵盖简单部署、GitHub运营、数据分析可视化及文档自动化等场景,助您快速上手。欢迎加入阿里云百炼生态,共同推动AI技术发展!
|
1月前
|
人工智能 开发工具 C++
利用通义灵码AI在VS Code中快速开发扫雷游戏:Qwen2.5-Max模型的应用实例
本文介绍了如何利用阿里云通义灵码AI程序员的Qwen2.5-Max模型,在VS Code中一键生成扫雷小游戏。通过安装通义灵码插件并配置模型,输入指令即可自动生成包含游戏逻辑与UI设计的Python代码。生成的游戏支持难度选择,运行稳定无Bug。实践表明,AI工具显著提升开发效率,但人机协作仍是未来趋势。建议开发者积极拥抱新技术,同时不断提升自身技能以适应行业发展需求。
22202 17
|
7天前
|
人工智能 API 数据库
MCP Server 开发实战 | 大模型无缝对接 Grafana
以 AI 世界的“USB-C”标准接口——MCP(Model Context Protocol)为例,演示如何通过 MCP Server 实现大模型与阿里云 Grafana 服务的无缝对接,让智能交互更加高效、直观。
476 110
|
7天前
|
人工智能 监控 JavaScript
MCP 正当时:FunctionAI MCP 开发平台来了!
Function AI 是基于函数计算构建的 Serverless AI 应用开发平台,基于函数计算的运行时能力上线了完整的 MCP 开发能力,您可以进入 FunctionAI 控制台,快速体验 MCP 服务的能力。
405 10