事情起因是我不想多此一举下个AI,本来想ps直接导出svg格式,但是导出来上传到iconfont后却是一片空白，相信很多人第一次都遇到过这种情况。
我一愣，然后打开svg代码看到内容却是这样，怎么会有image标签
当然了，也不是说这种不能用，只是不能用于iconfont上传相对于我们正常的svg
下面正式开始
1. 准备修改的图片
因为我是想稍微修改一下iconfont本来的一个图标，所以我就直接点击那个图标的AI下载（主要是为了清晰度，png的话对于我来说虽然能用，但是清晰度不够）
2. 打开ps，载入图片
如果是AI的eps，导入时会有栅格化提醒
模式记得选择RGB颜色
3. 点击魔棒工具，或者快速选择工具，将整个图案选上
如果是png或者jpg格式的话，现在缺点就暴露出来了，就是区域模糊。这里我放个对比就知道了
- AI的eps
- png格式
4. 建立工作路径
图片上右键，然后点击建立工作路径
会有一个弹框，我直接写的1.0
- eps
- png（如果图形简单，你也可以再用钢笔工具稍微描好点）
5. 设置自定义形状
点击左侧工具栏钢笔工具，在图片区域右键点击定义自定形状
会有个弹框，随便命名
6. 矩形工具
点击左侧矩形工具，选择里面的自定形状工具
这时能看到上面有我们刚创建的自定形状，没有的话点击旁边的小三角也会看到，然后选中
7. 创建自定形状
点击一下画布区域，弹出创建自定形状
8. 得到路径图形
点击确定就得到一下和我们原本图形一样的图形
一般位置都不是对齐的 ，这时我们需要用工具栏的移动工具将两个图重叠
9. 导出
点击 文件 - 导出 - 导出为
弹框里面 格式选择SVG ，写好合适的尺寸，就可以点导出了
10. 结尾
这时我们看代码就有path绘制了
当然，这个image是你最开始载入的图形（严谨的话，你也可以在导出的时候删掉那个图层，或者删掉这里的image，其实我们需要的只是后面的那个形状图形）此时，上传iconfont就完全没有问题
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
