【摸鱼篇】使用 AI 将 png、jpg 图片 转为 svg 并上传到 iconfont 进行使用

【摸鱼篇】使用 AI 将 png、jpg 图片 转为 svg 并上传到 iconfont 进行使用

前提条件

1、首先,你得有个 png或 Jpg 图

【摸鱼篇】使用 AI 将 png、jpg 图片 转为 svg 并上传到 iconfont 进行使用

(测试自取)

2、其次你要有 AI 这个软件

【摸鱼篇】使用 AI 将 png、jpg 图片 转为 svg 并上传到 iconfont 进行使用

步骤

1、AI 打开这个文件

打开后是这样的,如下图

【摸鱼篇】使用 AI 将 png、jpg 图片 转为 svg 并上传到 iconfont 进行使用

2、点击视图,点击显示透明度网格

如下图所示:

【摸鱼篇】使用 AI 将 png、jpg 图片 转为 svg 并上传到 iconfont 进行使用

3、用 AI 将图片转为 svg 格式

点击左上角对象,找到图像描摹,再点击建立

【摸鱼篇】使用 AI 将 png、jpg 图片 转为 svg 并上传到 iconfont 进行使用

图片变成了如下图所示

【摸鱼篇】使用 AI 将 png、jpg 图片 转为 svg 并上传到 iconfont 进行使用

选择中间的圈,摁 Backspace 键,即可消除

【摸鱼篇】使用 AI 将 png、jpg 图片 转为 svg 并上传到 iconfont 进行使用

去除后,效果如下图所示:

【摸鱼篇】使用 AI 将 png、jpg 图片 转为 svg 并上传到 iconfont 进行使用

再选中外部白色,再摁 Backspace 键,即可消除

【摸鱼篇】使用 AI 将 png、jpg 图片 转为 svg 并上传到 iconfont 进行使用

去除后,效果如下图所示:

【摸鱼篇】使用 AI 将 png、jpg 图片 转为 svg 并上传到 iconfont 进行使用

这个时候就可以存啦,点击左上角文件,存储为

【摸鱼篇】使用 AI 将 png、jpg 图片 转为 svg 并上传到 iconfont 进行使用

更改文件格式,更改为 svg 格式

【摸鱼篇】使用 AI 将 png、jpg 图片 转为 svg 并上传到 iconfont 进行使用

svg选项,点击确定

【摸鱼篇】使用 AI 将 png、jpg 图片 转为 svg 并上传到 iconfont 进行使用

这个时候我们就获得了 svg 格式的了,但要上传到 iconfont 还差一步

【摸鱼篇】使用 AI 将 png、jpg 图片 转为 svg 并上传到 iconfont 进行使用

4、修改文件并上传到 iconfont 上

从 iconfont 任意下载一个 svg 格式的文件

【摸鱼篇】使用 AI 将 png、jpg 图片 转为 svg 并上传到 iconfont 进行使用

下载后在编译器里打开,大概长这样

【摸鱼篇】使用 AI 将 png、jpg 图片 转为 svg 并上传到 iconfont 进行使用

再打开你刚刚保存的 svg 文件,大概长下图这样

【摸鱼篇】使用 AI 将 png、jpg 图片 转为 svg 并上传到 iconfont 进行使用

复制 path 里内容

【摸鱼篇】使用 AI 将 png、jpg 图片 转为 svg 并上传到 iconfont 进行使用

圈住下载文件的 path标签,然后粘贴

【摸鱼篇】使用 AI 将 png、jpg 图片 转为 svg 并上传到 iconfont 进行使用

更换viewBox中的值,保存文件

【摸鱼篇】使用 AI 将 png、jpg 图片 转为 svg 并上传到 iconfont 进行使用

打开 www.iconfont.cn/

【摸鱼篇】使用 AI 将 png、jpg 图片 转为 svg 并上传到 iconfont 进行使用

上传该文件(记得改文件名字),更改好信息后最后再选择 去除颜色并提交,即可

【摸鱼篇】使用 AI 将 png、jpg 图片 转为 svg 并上传到 iconfont 进行使用

现在你的 svg 就在 iconfont 上了喔

【摸鱼篇】使用 AI 将 png、jpg 图片 转为 svg 并上传到 iconfont 进行使用

上一篇:体系课-数据可视化入门到精通-打造前端差异化竞争力(已完结)


下一篇:博主个人用的duilib版本