记:psd中图标转成svg并上传到iconfont制作成图标

本文详细介绍如何将PSD格式图标转换为SVG格式,并成功上传至iconfont的过程。包括裁剪、格式转换、路径替换等关键步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

拿到设计师给的.svg格式图标兴冲冲地上传到iconfont,发现上传的图标是空白的。用编辑器打开发现里面没有<path>,于是自己动手将psd里的图标做成svg上传到iconfont做成图标。按照iconfont的教程没做好,可能是我不会用AI的缘故。在网上找啊找,这里做下笔记。
参考的网址:
http://tgideas.qq.com/webplat...
http://www.cnblogs.com/binmen...

1.首先psd里面图标得是形状,选中图标复制图层到新建文件

选择图标
复制图层

2.将其裁剪成正方形,裁剪的时候图标周围记得留一定空白,可以自己衡量

剪成正方形

3.之后把图标保存为.EPS格式,默认就行

把图标保存为.EPS格式

4.将保存的EPS格式图标用AI(Adobe illustrator)打开,移到左上角对齐画布

图标移到左上角对齐画布

之后鼠标移到图标右下角,按住shift将其等比拉伸铺满画布
将图标伸铺满画布

5.将图标保存为svg格式,默认就行

保存为svg

然而这时候上传到iconfont图标还是空白的,可能格式不符合的缘故吧

6.接下来随便从iconfont下载一个svg格式图标(因为要以它的格式为准),复制一份,用编辑器打开,找到<path></path>代码,这就是要用来替换的路径

svg图标代码

用编辑器打开刚刚用AI保存的svg格式图标,将其中的<path></path>复制,替换掉上面从iconfont下载的svg的path;或者用工具过滤,只留路径,然后复制替换
替换path

注意代码里的viewBox要和用AI保存的一致,打开保存的svg看看就知道了
查看保存的图标的viewBox

保存的图标的viewBox是0 0 64 64,那么就把viewBox改成和它一样的,否则更改好的svg放到浏览器一看,图标没了。。。
更改图标的viewBox

更改好以后保存放到浏览器看看,图标能显示
浏览器看看图标

7.将保存好的图标上传到iconfont,图标能显示,接下来保存到项目,下载图标就可以用了

图标可以显示

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值