使用在线编辑 svg 软件修改 svg 图片

网站需要使用图标字体,但设计师给的图标大小有问题,故使用下面说陈述方法简单修改了一下。使用到的在线编辑软件地址为:https://editor.method.ac/

 

问题:

使用在线编辑 svg 软件修改 svg 图片_第1张图片

注:至于如何使用图标字体(阿里 iconfont,icomoon),请自行查找资料,此处便不解释了。 

 

调整后所需要 svg 图:

使用在线编辑 svg 软件修改 svg 图片_第2张图片

 

具体方法:

1、打开网站,并在左上角“File” -- "Open SVG...",打开已有的 svg 图片

使用在线编辑 svg 软件修改 svg 图片_第3张图片

2、此处简单介绍一下界面

使用在线编辑 svg 软件修改 svg 图片_第4张图片

 

3、背景色设置透明

使用在线编辑 svg 软件修改 svg 图片_第5张图片

使用在线编辑 svg 软件修改 svg 图片_第6张图片

 

4、设置svg大小

1)设置精确数值、Sizes选项自适应调整svg大小

使用在线编辑 svg 软件修改 svg 图片_第7张图片

 

2)手动缩放svg图大小 

若觉得展示图片过小,可选此调大可视范围

使用在线编辑 svg 软件修改 svg 图片_第8张图片

 

使用在线编辑 svg 软件修改 svg 图片_第9张图片

5、调整完毕

使用在线编辑 svg 软件修改 svg 图片_第10张图片

6、导出svg图,选择左上角 “File"--"Save image..." 即可,浏览器自行下载(所用谷歌浏览器)

使用在线编辑 svg 软件修改 svg 图片_第11张图片

 

 然后找到保存的svg图片,可以用浏览器方式打开,查看其周围的多余空白是否已经没有。(查看方式便不解释了,相信你会的)

 

转载于:https://www.cnblogs.com/JaneBlog/p/10072540.html

你可能感兴趣的:(使用在线编辑 svg 软件修改 svg 图片)