图文排版
H5秀
手机图文
请抢答
秀米的图库里可以上传哪些格式的图片?
嗯?秀米支持的.svg图片和 互动图文的svg是一回事吗?从技术原理上来看,也许可以说他们是同宗同源,但是从产品角度来说,它们的用途是不一样的。秀米的布局可以用来制作类似答题、字幕等交互式的图文内容;.svg图片在秀米则是可以换色,而且用户可以上传自己设计的.svg图片。这篇文章主要想讲一下可以换色的.svg图片。
其实关于.svg图片的介绍,我们推送过两篇文章,一篇讲了如何从Ai导出svg格式,另一篇讲了使用.svg图片有哪些坑需要避免。很多小伙伴可能只看了其中一篇,那么在秀米上使用.svg图片的时候就碰到好多问题。所以这篇文章就将前两篇的知识点合二为一,围绕以下三个问题来讲解:
1、.svg图片是怎么构成的?
2、.svg如何从Ai导出?
3、.svg有哪些使用禁忌?
01
SVG图片如何构成
.svg图片并不是单纯地把任意一个图片文件的后缀改成".svg"就能转换出来的。熟知Ai或者其他矢量图制作工具的小伙伴应该比较了解,制作一个矢量图形,就是将多个锚点围成一个形状,这个形状可以添加填充色或者是边框:
点击播放 GIF 0.1M
那么换句话说,矢量图就是由多个锚点围成的一个或者多个形状的集合。矢量图和位图(常见的位图如JPG、PNG)最明显的区别就是矢量图有锚点,而位图没有:
矢量图有锚点
位图没有锚点
02
.svg格式如何从Ai导出
首先,我们需要准备一下工具:
Adobe Illustrator软件(小米使用的是下图中的版本)
准备好一个矢量图。一定要记住了,矢量图是由多个锚点组成的平面图形,不是任意一张位图后缀修改为.svg就变成矢量图了。这里我们假设已经从Ai里做好了一个矢量图:
点击播放 GIF 0.0M
材料和工具注备好后,我们来看看如何导出.svg图片:
打开AI软件,新建一个文件,大小不论
然后我们将已准备好的矢量图形文件复制(ctrl+c或command+c)粘贴(ctrl+v或command+v)到编辑区:
点击播放 GIF 0.1M
然后我们就在这个编辑区的左边,特别特别长的标签栏中,找到画板工具(如下图):
我们选中它,对准南瓜矢量图点击一下
点击播放 GIF 0.1M
这样,我们就拥有了两个画布:
继续在当前状态下,我们点击一下外面比较大的画布,点击delete删除:
点击播放 GIF 0.0M
那个刚好能贴近矢量图大小的画布就保留下来了:
接下来,我们摁住ctrl(command)+shift+s,会弹出一个界面框:
在格式选项中,我们点击后面的三角,选择最后一个格式SVG(svg):
点击播放 GIF 0.1M
设置好图片的格式,以及图片保存的位置等,点击确定,会继续出现一个弹窗:
我们点击左下角的较多选项,展开整个界面;在CSS属性一栏选项中,点击右边的小三角,选择样式属性:
最后点击一下,右下角的确定,我们的.svg图片就制作好了!
接下来,只要将它上传到秀米图库中就好啦:
点击播放 GIF 0.7M
如果你与小米一样,SVG图片处于灰色状态,只要将上传的文件类型切换成所有文件就好了。
最后给大家展示一下南瓜通过换色变异成“西瓜”的状态:
点击播放 GIF 0.6M
03
SVG有哪些使用禁忌
秀米的小伙伴们在上传或者使用.svg图片的过程中经常会遇到像“该矢量图形中包含不支持的内容”,“使用了过多SVG图形无法同步”这样的问题。使用.svg图片的禁忌有哪些呢?我们总结了一下:
锚点特别多的SVG不能用
每一篇公众号图文,其实相当于一个网页页面,除了表面上能看到的正文字数之外,其实公众号图文还会统计背后的代码字数。不少小伙伴在使用了一些复杂SVG图形后,同步到公众号时会出现这样一个提示:
这时小伙伴可能会纳闷:我既没有写太多的字数,也没有用过多图形,怎么就无法同步呢?如果是用了SVG图形,出现了这个报错,但却又不是因为用了过多的SVG图形,那么绝对是因为所用的SVG图形包含了过多的锚点。有些锚点很复杂的SVG图形表面上看起来是这样的:
点击播放 GIF 0.4M
光看着就有数不清的锚点
而这些锚点的html代码形式更是夸张,这一个花的SVG代码多达两万多字:
点击播放 GIF 1.4M
别说网页会崩溃,我看着都崩溃了
虽然举了个夸张的例子,可能一般情况下也碰不着,但还是奉劝大家,尽量不要用锚点过于复杂的SVG图形。
SVG的描边是无法改色的
有些小伙伴在制作SVG图形是,会给图形加上描边,例如像下放的星星图形有一圈黑色的描边:
当这个图片上传到秀米后,描边是可以正常显示的,但是在秀米的SVG换色功能里却不能改色。如果希望描边是可以改色的话,解决方法很简单。在Ai里选中这个图形,然后执行对象路径轮廓化描边:
点击播放 GIF 0.2M
这个操作可以让原来的描边转变成图形,图形上传到秀米后就能改色了。
SVG不支持字体
小伙伴制作的SVG图形中,可能包含了一些未转化成轮廓路径的文字。大多数字体在秀米和微信公众号上都是不支持的,但如果想在SVG图形中保留字体的话,可以给文字创建轮廓。在Ai创建字体轮廓的方法是,选中文字,右键菜单中选择“创建轮廓”:
点击播放 GIF 0.1M
温馨提醒各位,使用字体前记得了解清楚这款字体是否可商用哦。
SVG中不能包含位图和剪切蒙板
有些小伙伴可能会用到一些带图案的JPG或者是PNG格式的图片作为SVG图形的底纹,虽然生成的文件是“.svg”没错,但是网页上不支持含有位图的“.svg”格式。同样的将一个JPG或者是PNG文件强行保存为SVG文件也是不可行的,请务必记住这句话:网页上只能识别SVG图形中的锚点以及填充色!
同样在SVG各式中不支持的内容还有“剪切蒙板”。例如有些图形用了剪切模板来裁剪,那么你只能释放剪切蒙板:
点击播放 GIF 0.2M
下一步
就想办法做个一样的
小结
.svg图片是由多个锚点围成一个或者是多个图形的集合;从Ai里导出.svg的时候,记得要选择“样式属性”这项CSS属性;制作.svg图片的时候,尽量不要用过多的锚点,图形描边以及字体可以在Ai中先轮廓化之后再使用。位图和剪切蒙板SVG图形中是不支持的,切记只有锚点和图形的填充色能被网页识别。
更多阅读