关注微信公众号的朋友近期可能看到过一些SVG互动推文，通过SVG交互排版让推文实现了互动点击效果。由于需要一定的制作成本，所以各大品牌都将其用在比较重要的宣传推文当中，如产品宣传、活动推广等。当然，不少商家对于SVG交互排版还是不太了解，所以下面蓝橙小编就给大家详细介绍一下。

一、什么是公众号SVG交互排版？

SVG交互图文是在微信公众号限制的Web技术环境内，以HTML为基础，以SVG为核心，主要依靠创造性地使用SVG SMIL animation和部分CSS style样式，使用户可以通过主动点击、触摸、滑动、长按或自动等常见的人机交互操作，触发一些丰富多彩、令人惊奇的动态效果。其本质还是基于SVG SMIL animation，配合SVG的click事件，实现非常简单的交互。

二、公众号SVG交互排版的作用

公众号SVG推文具有可交互性，传统的微信推文 由固定的图文组成，读者仅能通过滑动页面进行翻滚阅读。但从SVG的出现开始，阅读就可以像做任务类游戏一样有趣。这类排版需要读者进行一些简单的操作，才能看到隐藏的内容。简单来说，就是用户在观看推文时能够通过点击、长按、滑动等操作，与图文进行互动，让排版变得高级又有趣。

三、公众号SVG推文的交互方式

公众号SVG推文有以下8种交互方式，在同一篇推文内可以叠加多种交互效果，以制作有趣的推文互动效果：

①点击显示/消失；②直线移动；③曲线移动；④缩放；⑤点击弹图；⑥音频类：如音频播放器美化；⑦滑动类：顶层滑动/底层滑动；⑧伸长样式

触发以上交互效果的方式有：点击、长按、滑动。逻辑结构即：或、且、随机。

四、SVG文件优势介绍

了解H5的小伙伴一定知道SVG，它是一种图像文件格式，英文为Scalable Vector Graphic，译为可缩放的矢量图形，严格来说SVG是一种开放标准的矢量图形语言，可以设计多样的，高分辨率的Web图形页面，通过改变部分代码使图像具有交互功能。下面是SVG的一些优势介绍：

①、SVG可被非常多的工具读取和修改；②、SVG与JPEG和GIF 图像比起来，尺寸更小，且可压缩性更强；③、SVG图像可在任何的分辨率下被高质量地打印；④、SVG 可以与 JavaScript 技术一起运行；⑤、SVG 是开放的标准；⑥、SVG 文件是纯粹的 XML。

以上就是关于公众号SVG交互排版的详细介绍了，从以上信息我们可以了解到，SVG推文的出现，打破了公众号推文无法互动尴尬局面。SVG交互排版可以有效提升各大品牌产品宣传效果。如果您有SVG排版制作需求的话，可以联系专业SVG制作公司蓝橙视觉。