使用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
上方会出现文本框的代码 <text>这里也可以修改文本框内的文字,或者文本框的位置
222
4.5 添加id属性
在代码部分可以看到,路径和文本框内的id,根据区域名修改
222
之后就是逐个抠取各个区域,然后添加文字及id属性
所有区域都完成后,把比例缩小到100%
222
4.6 删除背景模板
绘制完成后,我们把背景模板删除,这里直接从svg代码将 <image>这一行删除即可
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 删除背景图片
将背景图片部分的代码 <image>删除,然后保存即可
222
最后我们可以根据配色方案修改区域的背景色或者边框颜色,然后将修改后的代码保存到svg文件中即可
222
这样我们的矢量地图就绘制完成了。
5.7 导入制作完成的svg地图
自定义地图,导入刚刚绘制的吉林2.svg
222
相关文章
|
28天前
img图片/svg图标与文字无法对齐
img图片/svg图标与文字无法对齐
10 0
|
2月前
|
前端开发 JavaScript API
【HTML】SVG实现炫酷的描边动画
今天闲来无事,看到Antfu大佬的个性签名,觉得还是非常炫酷的,于是也想要搞一个自己的个性签名用来装饰自己的门面,不过由于手写的签名太丑了,遂放弃。于是尝试理解原理,深入研究此等密法,终于小有所成,发现原来是描边动画,于是记载如下,方便日后借鉴。
60 3
|
2月前
|
前端开发
css绘制常见的一些图形
css绘制常见的一些图形
17 0
|
11月前
SVG Path(三)弧线命令
SVG Path(三)弧线命令
164 0
|
2月前
|
前端开发
|
2月前
|
前端开发 小程序
微信小程序canvas画布绘制;canvas画布图片保存
微信小程序canvas画布绘制;canvas画布图片保存
60 0
|
11月前
|
XML 移动开发 前端开发
Canvas 和 SVG 绘图的区别
Canvas 和 SVG 绘图的区别
85 0
|
11月前
SVG SMIL 轨迹 Path 动画(animateMotion)
SVG SMIL 轨迹 Path 动画(animateMotion)
79 0
|
前端开发
你可以学会的svg动画
你可以学会的svg动画
|
Web App开发 前端开发 JavaScript
用SVG 制作 Sprites的图标系统(一)
我一直是图标字体的大力支持者。很多网站真的需要一个图标系统,图标字体提供了一个该死的精细系统。但是,我认为假设你对 IE 9+ 很好,使用内联 SVG 并且 <use> 引用图标的元素是一个优秀的系统。
236 0
用SVG 制作 Sprites的图标系统(一)