AI绘制图标导出svg格式给开发需要注意的问题

AI导出svg格式图片给前端开发的时候,需要是复合路径,所绘制图标的各个部分必须是一个整体的复合路径,不能是打组的部件,否则开发在调用的时候,把图标当成一个整体文字随意修改颜色和放大缩小的时候,会影响效果,甚至出现无法使用的情况。

AI导出svg格式图片给前端开发的时候,需要是复合路径,所绘制图标的各个部分必须是一个整体的复合路径,不能是打组的部件,否则开发在调用的时候,把图标当成一个整体文字随意修改颜色和放大缩小的时候,会影响效果,甚至出现无法使用的情况,我在和开发日常配合做项目的时候就遇到了这类问题,在此对AI绘制svg图标导出给开发使用的时候所遇到的问题做了一个总结,分享给大家。

AI绘制svg格式图标,如果是直接导出位图使用,基本没有什么可以注意的问题,但是如果开发直接调用AI导出的SVG图标,需要注意一下几点:

1,AI绘制svg图标必须是复合路径,其中,路径必须扩展为填充,具体可以理解为复杂的汽车结构,必须是整体浇灌而成,不是靠很多螺丝连接的。
2,如果是3D的svg,可以使用ai的3D突出直接生成3D效果这里不需要使用AI扩展功能直接使用,
3,从开发的角度,如果是用AI导出SVG给开发使用,代码部分必须是一个整体(也就是第一条说的复合路径,是从设计师角度)如下图:
4,优先推荐使用AI的另存为svg格式,因为AI用另存为保存为svg格式比用AI导出svg格式的代码更整洁。

正确的使用例子:

下方图1图2为AI导出的复合路径的svg,图3为AI导出的3D凸出效果的SVG

AI绘制图标导出svg格式给开发需要注意的问题
图1-AI导出复合路径svg
AI绘制图标导出svg格式给开发需要注意的问题
图2-AI导出复合路径svg
AI绘制图标导出svg格式给开发需要注意的问题
图1-3D凸出效果的SVG

错误的使用例子

ai导出的svg如果不是复合路径的话,代码都是乱的,没有分组,如下图的样子

AI绘制图标导出svg格式给开发需要注意的问题
不是复合路径的svg代码,是乱的,没有分组

给TA打赏
共{{data.count}}人
人已打赏
学习

UI设计师常用工具清单

2022-4-26 14:40:17

学习

UI设计量化表-UI设计师产品界面优化规范

2022-5-25 10:36:45

5 条回复 A文章作者 M管理员
  1. 爱寻匿

    学习一下😁

  2. SVG可以是渐变图形嘛,发光有投影的图形可以导出SVG嘛

    • 可以的

  3. 大佬,请问我的SVG导出以后会变形,有些部分出现失真和丢失的现象

    • svg导出出现丢失,大部分原因是不是复合路径导致的,导出变形,如果源文件没问题,换个软件版本试试,具体不太清楚什么原因会导致你导出svg变形。

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
网站已经坎坷运行: