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如果不是复合路径的话,代码都是乱的,没有分组,如下图的样子

学习一下😁
SVG可以是渐变图形嘛,发光有投影的图形可以导出SVG嘛
可以的
大佬,请问我的SVG导出以后会变形,有些部分出现失真和丢失的现象
svg导出出现丢失,大部分原因是不是复合路径导致的,导出变形,如果源文件没问题,换个软件版本试试,具体不太清楚什么原因会导致你导出svg变形。