随着微信开发技术的发展，除了微信小程序、微信H5游戏以及短视频等推广形式之外，SVG推文也渐渐成为品牌营销的主流形式，以可交互的和动态的推文让用户在阅读上更有视觉冲击。下面，蓝橙互动就给大家聊聊微信公众号SVG推文该怎么做。

一、制作方式

1、编辑器生成

这是目前常用的一种生成方式，通过第三方SVG编辑器，选择已有模板，进行配置后，拼出一篇SVG公众号推文。这种实现方式，比较简单，能快速搞定一篇推文。缺点就是，可供选择的模板有限，部分比较新颖或者复杂的交互不能实现；另外还有一点，因为是使用平台的服务，一般都需要购买企业会员，然后部分效果也是需要收费的。

2、代码构建生成

使用HTML和SVG代码来构建，首先是确认好内容和展现形式，然后设计师根据内容做好UI设计，最后由前端程序员进行代码构建。这种方式可以根据不同的需求来实现定制化开发，并且不受模板的约束，可拓展性和操作性很高。所以一般想做比较有特色的推文，都会选择代码构建的方式来实现。

二、案例参考

1、案例介绍

这是由汇丰人寿为汇丰微保险小程序推广而推出的SVG公众号推文，通过推文向用户介绍小程序功能、发布活动入口，以及品牌宣传介绍。

2、制作流程

这个案例是通过代码构建的方式来生成的。在确定好发布内容和交互形式后，由设计师做好UI设计后，将设计源文件给到前端程序，然后由程序编码后，再将文章放到公众号管理后台进行发布。

3、技术实现

推文顶部“本期内容 点击查看”是使用的html中对得P标签来呈现的；文字下方是一整个SVG标签，并且将高度设置为设计需要展示的高度，将背景图设置为没有“线”的图片；这里特别说明下，由于公众号后台上传的图片有最大高宽限制，所以会把背景裁剪为多张图放进去。

SVG里面使用多个矩形来将背景图盖住；上下移动的手势是使用SVG的path标签，然后配合animateTransform使其上下移动；path的数据是用设计师做的矢量图导出SVG后获取的。

手指下方有使用SVG的手指移动区域，使用SVG的rect做了一个透明的矩形，并且绑定了点击事件；绑定的事件为animate绘制“线”和逐步显示矩形框；最后调整各个animate的事件来配合整个页面的显示。

总的来说，SVG公众号推文的制作方式并不复杂，通过SVG模板编辑器就能简单制作一个SVG推文，但想要发挥出SVG推文的效果，还得通过定制代码构建生成，才能取得更好的宣传效果，有需求的商家可对点击咨询我们的客服，获取更多SVG推文案例进行体验参考。