原标题：SVG的雷，你踩过了没？

随着SVG互动布局的出现和在H5的应用越来越多，不少小伙伴们会想在秀米里上传自己制作的SVG图形。秀米的首页顶部教程收录了一篇关于SVG图形的讲解：「秀米的SVG图片」，里面主要介绍了SVG图形有放大缩小不失真的特性以及如何从Adobe Illustrator(下面简称Ai)导出“.svg”文件的方法。但是这个教程有两个地方没有展开讲解：

1、SVG是怎么构成的？

2、SVG有哪些使用禁忌？

SVG图片并不是单纯地把任意一个图片文件的后缀改成".svg"就能转换出来的。秀米的小伙伴们在上传或者使用SVG的过程中经常会遇到像“该矢量图形中包含不支持的内容”，“使用了过多SVG图形无法同步”这样的问题，那么本篇就来给大家排排雷。

01

SVG如何构成

熟知Ai或者其他矢量图制作工具的小伙伴应该比较了解，制作一个矢量图形，就是将多个锚点围成一个形状，这个形状可以添加填充色或者是边框：

那么换句话说，矢量图就是由多个锚点围成的一个或者多个形状的集合。矢量图和位图(常见的位图如JPG、PNG)最明显的区别就是矢量图有锚点，而位图没有：

矢量图有锚点

位图没有锚点

常见的矢量图文件格式有 “.svg”、“.ai”、“.eps”，而在秀米和公众号上适用的矢量图格式只有“.svg”。

02

SVG有哪些使用禁忌

锚点特别多的SVG不能用

每一篇公众号图文，其实相当于一个网页页面，除了表面上能看到的正文字数之外，其实公众号图文还会统计背后的代码字数。不少小伙伴在使用了一些复杂SVG图形后，同步到公众号时会出现这样一个提示：

这时小伙伴可能会纳闷：我既没有写太多的字数，也没有用过多图形，怎么就无法同步呢？如果是用了SVG图形，出现了这个报错，但却又不是因为用了过多的SVG图形，那么绝对是因为所用的SVG图形包含了过多的锚点。有些锚点很复杂的SVG图形表面上看起来是这样的：

光看着就有数不清的锚点

而这些锚点的html代码形式更是夸张，这一个花的SVG代码多达两万多字：

别说网页会崩溃，我看着都崩溃了

虽然举了个夸张的例子，可能一般情况下也碰不着，但还是奉劝大家，尽量不要用锚点过于复杂的SVG图形。

SVG的描边是无法改色的

有些小伙伴在制作SVG图形时，会给图形加上描边，例如像下方的星星图形有一圈黑色的描边：

当这个图形上传到秀米后，描边是可以正常显示的，但是在秀米的SVG换色功能里却不能改色。如果希望描边是可以改色的话，解决方法很简单。在Ai里选中这个图形，然后执行对象→路径→轮廓化描边：

这个操作可以让原来的描边转变成图形，上传到秀米后就能改色了。

SVG不支持字体

小伙伴制作的SVG图形中，可能包含了一些未转化成轮廓的文字。大多数字体在秀米和微信公众号上都是不支持的，但如果想在SVG图形中保留字体的话，可以给文字创建轮廓。在Ai创建字体轮廓的方法是，选中文字，右键菜单中选择“创建轮廓”：

温馨提醒各位，使用字体前记得了解清楚这款字体是否可商用哦。

SVG中不能包含位图和剪切蒙板

有些小伙伴可能会用到一些带图案的JPG或者是PNG格式的图片作为SVG图形的底纹，虽然生成的文件是“.svg”没错，但是网页上不支持含有位图的“.svg”格式。同样的将一个JPG或者是PNG文件强行保存为SVG文件也是不可行的，请务必记住这句话：网页上只能识别SVG图形中的锚点以及填充色！

同样在SVG格式中不支持的内容还有“剪切蒙板”。例如有些图形用了剪切蒙板来裁剪，那么你只能释放剪切蒙板：

释放剪切蒙板后

下一步

就想办法做个一样的

小结

SVG图形是由多个锚点围成一个或者是多个图形的集合；制作SVG的时候，尽量不要用过多的锚点，图形的描边以及字体可以在Ai中先轮廓化之后再使用。位图和剪切蒙板SVG图形中是不支持的，切记只有锚点和图形的填充色能被网页识别。看完这篇排雷帖如果想继续了解如何从Ai导出SVG的话，可以继续阅读下方这份陈年旧帖：

秀米的SVG图片

模板

精选

急诊

更新

支招

不点“好看”，领导怎么知道你上进？返回搜狐，查看更多

责任编辑：