共计 1987 个字符，预计需要花费 5 分钟才能阅读完成。
当你关上一篇公众号图文，发现只有一句话或一张图片时，兴许你会一脸纳闷：这么简略的图文也能推送，还浏览量 10 万 +？
直到你可恶的小手指点击了一直暗示你「戳它」的动画，你好像发现了新大陆：原来图文还有这种模式存在。
► vivo OriginOS《我想开了》成果展现
SVG 交互图文是什么
在理解 SVG 交互图文之前，咱们先简略理解一下什么是 SVG。
SVG 英文全称为 Scalable Vector Graphics，即为可缩放的矢量图形，是一种图像文件格式。其具备以下三个特点：
- 一种图片格式
- 矢量图，在放大或扭转尺寸的状况下，其图形品质不会有所损失
- 交互和动画，能够实现多种互动成果
那什么是 SVG 交互图文？
SVG 交互图文是通过 SVG+HTML 代码实现的一种高级排版形式，通过在 SVG 文件中嵌入动画元素，从而实现具备多种互动成果的图文。SVG 交互图文的特点：创意、超清、交互、动静。
SVG 交互图文其实不算陈腐的技术，早在 2016 年就有相干的利用，只是随着一个个爆款案例的呈现，各大品牌开始发现 SVG 交互图文的品牌营销价值，并纷纷尝试这种图文新玩法。
通过与品牌符合的创意内容、各式各样的互动成果、惊艳的视觉效果，以科技感的形式「讲故事」（介绍企业或产品和服务）或者「玩游戏」，将用户一步步带入到情境中，引起用户共鸣，进步用户对品牌和产品的认知度，从而为企业塑造一个深入人心的品牌形象。
SVG 交互图文的优劣势
劣势
1）相较于传统图文，SVG 交互图文更具备互动性和趣味性，能够给读者带来不一样的浏览体验，既能缩小读者因浏览疲劳而退出图文，也能加深读者对内容的印象。
2）相较于 H5，SVG 交互图文状态更轻，更适宜利用在公众号图文中。
3）SVG 交互图文更重视创意与格调，能够交融企业的品牌形象、产品理念，并以直击人心的形式传递给用户，达到出其不意的品牌营销成果。
劣势
1）制作一篇 SVG 交互图文须要策动、编辑、设计、开发人员合作实现，沟通老本和制作老本高，制作周期长。
SVG 交互图文的互动模式
SVG 交互图文能够分为竖版长图和横版长图，常见的互动模式有点击、长按、滑动。
01 点击
当读者点击某个区域或元素之后，画面中会产生相应的变动，比方切换图片、放大图片、拉伸长图等。「点击」是较为常见的交互模式，通常须要通过指引来让读者实现点击动作，但过多的文案又会影响视觉效果，因而能够尝试应用「符号」来代替文字指引。
👉 案例展现：《我，在 iPhone 里发现了一座黄色小房子 …》
案例解析：
- 点击切换图片：读者点击闪动的「符号」，即可查看下一个内容，一张张简洁的图片一步步率领读者走进情景中。
- 点击拉伸长图：当读者曾经产生其趣味后，点击拉伸长图，开展更多内容，这种内容出现形式，更能防止干燥感，也能激发读者更强烈的趣味。
02 长按
当读者长按某个区域或元素之后，画面中会产生相应的变动，比方长按切换、长按实现图片 360° 旋转（相似于三维动画成果）和抽签等。千篇一律的「点击」交互容易不足特色，配合「长按」、「松手触发」交互模式，会让图文更有趣味性。
👉 案例展现：《腾讯小马哥的 QQ 号是多少？》
案例解析：
- 长按切换，松手回弹到最后状态：案例为问答类，通过长按呈现答案提醒，能够更好的疏导读者进入下一步。
03 滑动
当读者左右高低滑动图片时，画面中的一些元素会追随挪动。常见的滑动款式有：
- 双层滑动：背景不动，顶层通明图片滑动
- 穿透滑动：前景不动，底层背景滑动
- 夹层滑动：前景背景都不动，两头内容滑动
滑动罕用于故事情景图片替换或问答中的揭开答案等场景，让原有的内容更充斥神秘感，滑动也常常利用在横版的故事推动中。
👉 案例展现：《你认为咱们用「Apple 全家桶」是为了炫富吗？》
案例解析：
- 双层滑动：将产品与多个利用场景联合，通过滑动图片更换不同职业的用户的故事，乏味的展现了产品的价值。
实现一篇高质量 SVG 交互图文的关键因素
01 创意 + 格调 + 交互，缺一不可
策动一个与品牌符合度高的创意内容，是制作 SVG 交互图文的重中之重，但设计格调和晦涩的交互也是缺一不可的。以抓住眼球的创意切入点，让所有交互动作都自然而然，让所有内容都有条理的出现进去，才可能真正引起读者关注、产生共鸣。企业推送 SVG 交互图文时，不仅要器重内容，也要器重与读者相匹配的创意和体验感。
02 团队合作能力
SVG 交互图文是须要品牌、策动、编辑、设计、开发整个团队合作实现，无效的需要沟通，标准的工作流程，能力高效地实现一篇交互图文，达到预期的营销成果。
爱范儿、通晓云团队助力 Apple、OPPO、华为、广汽传祺、滴滴等品牌打造了多个定制化 SVG 交互图文，发明了多个惊艳的图文交互成果。这些是须要企业与策动开发团队投入工夫和精力去实现。根底的 SVG 交互款式，如在传统图文中插入「点击换图、图片轮播、点击显示、点击跳转」等交互，也是能够通过 SVG 图文排版工具来实现。
如果您有疑难、想法，欢送一起交流学习。