最近有很多小伙伴问起：

现在做微信编辑不少公司都要求会SVG，我连SVG是啥都不懂……

针对这个问题，我特意去招聘渠道看了看，确实如此，不少公众号的运营编辑岗位招聘需求有要求会SVG排版设计。

所以，各位公众号小编们，你们准备好了新一轮的技能冲击了吗？现在不会的，看完十一的这篇文章，转发分享吧。

背景

首先我们先来说说“SVG”是什么？SVG是基于设计专业的一门基础设计Idea；其中定义为：可缩放的矢量图形。

为何我说是Idea呢？

SVG原本就是设计/UI/交互等工作人员用来激起用户心灵、用户打开高分辨率的SVG图像，进而获取品牌概念信息的图形传递。

下面十一将通过"认识SVG、设计工具、设计流程、注意事项"等四个方面，为大家详细解释SVG在公众号里的运用和方式。

认识SVG

微信SVG图文是基于SVG代码，结合HTML+CSS，通过在微信移动端/PC段实现类似H5一样的动态交互效果，而受到各大品牌和用户们广泛的接受，效果也极佳。

这里面有个关键词：“代码”，你没有看错，SVG是代码的一种呈现。

视频加载中...

通常情况下，WEB动画有3类：①CSS3动画、②javascript动画、③SVG动画；

因为在微信里一直都不支持前面的2种，由此，微信里的交互设计就只由SVG动画承担了；所以，在接触微信SVG图文设计时还是要懂得一些代码。

设计工具

DREAM WERVER（DW）

DW是集网页制作和管理网站于一身的所见即所得网页代码编辑器。

DW的主要作用是修改静态代码，添加动态/交互代码，我们在设计SVG动态图时会常用到。

LLLUSTRATOR （AI）

有没有人没有认出来是个啥软件的？

就是我们常说的AI，由Adobe开发设计；细节十一不做讲述，有兴趣的朋友可以自行去查阅哈。

AI也是我们在做SVG动态图时最常用的一款软件，绘制、排版、生成SVG代码。

并且，随着市面上的编辑工具逐渐完善，很多编辑排版软件也开始支持SVG动画，如：135、秀米等。

视频加载中...

设计流程

根据十一实际的操作流程来看，大多数微信编辑们想要实现SVG动画，多是先由美工/设计的同事到AI软件里将图文的所有内容进行设计、排版，再生成SVG代码；最后根据实际的需求进行位置和大小的调整，生成最终的SVG代码。

这一点，实际操作流程需要和设计同事沟通最终的图文成品细节，有些繁琐。

最后就是代码拷贝和复制，这里需要注意一点的就是需要用到插件或开发者模式。

写在最后

首先，SVG图文不同于单一的传统图文，是需要多位共同协助才可完成，尤其是最终的交互效果；这里做内容编辑/策划的同事需要全程跟进效果，并做好备注。

其次，SVG和微信编辑不是一个概念，不要被外面的企业招聘需求忽悠了，这里面多少都会设计要代码和交互设计，毕竟专业领域不一样，工作内容则就不一样；

对于企业，也不要一味的节约成本，而忽略专业领域的不同，造成最终成品效果层次不一。

最后，SVG对大部分人看来就是一张图，唯一不同的是创建了视觉逻辑的交互动态效果而已；用户眼睛跟随动画自主移动匹配界面，会带领用户逐步深入阅读体验。

它制造路径动态视效是引导用户阅读的关键，吸引注意力的机制已经不在用户有意识地控制之下，而是跟随路径的演变过程牵引内容，具有强调信息、提升感官刺激的效果，维持一定的阅读注意力的同时还保持了交互体验一致。

对于个人，多去了解编辑软件就可满足，我们编辑同事们的工作需求，很多软件操作一点也不难。

最后㊗大家工作顺利，事业有成；

内容若好，关注十一，一起跑得更快些。