鲁达 最近有很多小伙伴问起：
现在做微信编辑不少公司都要求会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对大部分人看来就是一张图，唯一不同的是创建了视觉逻辑的交互动态效果而已；用户眼睛跟随动画自主移动匹配界面，会带领用户逐步深入阅读体验。
它制造路径动态视效是引导用户阅读的关键，吸引注意力的机制已经不在用户有意识地控制之下，而是跟随路径的演变过程牵引内容，具有强调信息、提升感官刺激的效果，维持一定的阅读注意力的同时还保持了交互体验一致。
对于个人，多去了解编辑软件就可满足，我们编辑同事们的工作需求，很多软件操作一点也不难。
最后㊗大家工作顺利，事业有成；
内容若好，关注十一，一起跑得更快些。