点击换图 秀米的svg_能换色的.svg图片怎么用？看这篇就够了！

原标题：能换色的.svg图片怎么用？看这篇就够了！

请抢答

秀米的图库里可以上传哪些格式的图片？

.jpg

.png

.gif

.svg

以上格式你们都答对了吗？

嗯？秀米支持的.svg图片和 互动图文的svg是一回事吗？从技术原理上来看，也许可以说他们是同宗同源，但是从产品角度来说，它们的用途是不一样的。秀米的布局可以用来制作类似答题、字幕等交互式的图文内容；.svg图片在秀米则是可以换色，而且用户可以上传自己设计的.svg图片。这篇文章主要想讲一下可以换色的.svg图片。

其实关于.svg图片的介绍，我们推送过两篇文章，一篇讲了如何从Ai导出svg格式，另一篇讲了使用.svg图片有哪些坑需要避免。很多小伙伴可能只看了其中一篇，那么在秀米上使用.svg图片的时候就碰到好多问题。所以这篇文章就将前两篇的知识点合二为一，围绕以下三个问题来讲解：

1、.svg图片是怎么构成的？

2、.svg如何从Ai导出？

3、.svg有哪些使用禁忌？

01

SVG图片如何构成

.svg图片并不是单纯地把任意一个图片文件的后缀改成".svg"就能转换出来的。熟知Ai或者其他矢量图制作工具的小伙伴应该比较了解，制作一个矢量图形，就是将多个锚点围成一个形状，这个形状可以添加填充色或者是边框：

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

矢量图有锚点

位图没有锚点

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

02

.svg格式如何从Ai导出

首先，我们需要准备一下工具：

Adobe Illustrator软件(小米使用的是下图中的版本🔻)

准备好一个矢量图。一定要记住了，矢量图是由多个锚点组成的平面图形，不是任意一张位图后缀修改为.svg就变成矢量图了。这里我们假设已经从Ai里做好了一个矢量图：

材料和工具注备好后，我们来看看如何导出.svg图片：

打开AI软件，新建一个文件，大小不论

然后我们将已准备好的矢量图形文件复制(ctrl+c或command+c)粘贴(ctrl+v或command+v)到编辑区:

然后我们就在这个编辑区的左边，特别特别长的标签栏中，找到画板工具(如下图)：

我们选中它，对准南瓜矢量图点击一下

这样，我们就拥有了两个画布：

继续在当前状态下，我们点击一下外面比较大的画布，点击delete删除：

那个刚好能贴近矢量图大小的画布就保留下来了：

接下来，我们摁住ctrl(command)+shift+s，会弹出一个界面框：

在格式选项中，我们点击后面的三角，选择最后一个格式SVG(svg):

设置好图片的格式，以及图片保存的位置等，点击确定，会继续出现一个弹窗：

我们点击左下角的较多选项，展开整个界面；在CSS属性一栏选项中，点击右边的小三角，选择样式属性：

最后点击一下，右下角的确定，我们的.svg图片就制作好了！

接下来，只要将它上传到秀米图库中就好啦：

如果你与小米一样，SVG图片处于灰色状态，只要将上传的文件类型切换成所有文件就好了。

最后给大家展示一下南瓜通过换色变异成“西瓜”的状态：

03

SVG有哪些使用禁忌

秀米的小伙伴们在上传或者使用.svg图片的过程中经常会遇到像“该矢量图形中包含不支持的内容”，“使用了过多SVG图形无法同步”这样的问题。使用.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图片是由多个锚点围成一个或者是多个图形的集合；从Ai里导出.svg的时候，记得要选择“样式属性”这项CSS属性；制作.svg图片的时候，尽量不要用过多的锚点，图形描边以及字体可以在Ai中先轮廓化之后再使用。位图和剪切蒙板SVG图形中是不支持的，切记只有锚点和图形的填充色能被网页识别。

9102年都快过完了

你还不关注秀米吗

责任编辑：