将图片转化成SVG格式(亲测可行)

1.准备好要转化的图片

将图片转化成SVG格式(亲测可行)_第1张图片
可以看到左侧图片是一个jpg格式的,接下来我们就把它转化成svg格式;

2.打开SVG在线编辑器,把图片导入

我们可以打开SVG在线编辑器,在SVG编辑器中导入图片并根据我们需要的大小进行设置,如下图:
将图片转化成SVG格式(亲测可行)_第2张图片
将图片转化成SVG格式(亲测可行)_第3张图片

3.设置图片和背景图大小等选项

选中图片后,右侧对应的是修改图片的一些选项,包括图片透明度,大小,和旋转角度等设置
将图片转化成SVG格式(亲测可行)_第4张图片
不选中图片,右侧对应的是背景图的设置选项,包括高宽大小和颜色;
将图片转化成SVG格式(亲测可行)_第5张图片

4.保存图片

图片和背景图设置完成后保存图片
将图片转化成SVG格式(亲测可行)_第6张图片
保存成功后,图片就成为了SVG格式的啦!
将图片转化成SVG格式(亲测可行)_第7张图片
最后就可以把你保存的svg的图片替换掉项目中你想要替换的svg图片了!

5.通过SVG在线编辑器修改图片源码

可以在inconfont去下载想要的svg图标
将图片转化成SVG格式(亲测可行)_第8张图片
将图片转化成SVG格式(亲测可行)_第9张图片
然后复制图标的svg代码到,上面使用的编辑器上,就会显示该图片,如下图
将图片转化成SVG格式(亲测可行)_第10张图片
将图片转化成SVG格式(亲测可行)_第11张图片
将图片转化成SVG格式(亲测可行)_第12张图片

如果想要改变图片的填充颜色,可以通过源代码去修改,填充色,如下图:
将图片转化成SVG格式(亲测可行)_第13张图片
将图片转化成SVG格式(亲测可行)_第14张图片
然后再点击保存,这样你就可以得到,想要的svg图片;

6.另一种快速转换方法

打开谷歌浏览器,到应用商店安装扩展程序Convertio插件
将图片转化成SVG格式(亲测可行)_第15张图片
安装完后打开Convertio的图片转换器
将图片转化成SVG格式(亲测可行)_第16张图片
然后选择你需要转换的图片,点击转换就可以啦,已测试!缺点就是转化的图片是黑白色的;
将图片转化成SVG格式(亲测可行)_第17张图片
将图片转化成SVG格式(亲测可行)_第18张图片

你可能感兴趣的:(javaScript,大数据,html,前端)