1.准备好要转化的图片

将图片转化成SVG格式(亲测可行)-编程知识网
可以看到左侧图片是一个jpg格式的,接下来我们就把它转化成svg格式;

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

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

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

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

4.保存图片

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

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

可以在inconfont去下载想要的svg图标
将图片转化成SVG格式(亲测可行)-编程知识网
将图片转化成SVG格式(亲测可行)-编程知识网
然后复制图标的svg代码到,上面使用的编辑器上,就会显示该图片,如下图
将图片转化成SVG格式(亲测可行)-编程知识网
将图片转化成SVG格式(亲测可行)-编程知识网
将图片转化成SVG格式(亲测可行)-编程知识网

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

6.另一种快速转换方法

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