看了其他知友的回答，基本没有真正教大家题主举的宝马交互图文是如何实现的。关于SVG交互图文，希望这篇回答能让大家尽可能一次性全面了解，包含制作流程、价格、制作方法等，当然，后面会有宝马案例的详细制作教程。
SVG交互图文是在微信公众号限制的Web技术环境内，以HTML为基础，以SVG为核心，主要依靠创造性地使用SVG SMIL animation和部分CSS style样式，使用户可以通过主动点击、触摸、滑动、长按或自动等常见的人机交互操作，触发一些丰富多彩、令人惊奇的动态效果。
这几年，在各种短内容信息流和短视频的侵袭下，枯燥的文字和静态图片已无法满足品牌传播的需要，公众号阅读量不断下滑。
SVG交互图文因其媲美H5，提高粉丝参与度，提升趣味性，但成本更低的特性，受到越来越多尤其是大品牌的青睐，而它也的的确确带来了实质性的数据增长。
京东科技：
2018年，答题交互刚出来时，「京东科技」（原「京东金融」）这篇图文，推送1小时内，阅读2.2W，留言7200多人，32%的用户都参与了留言，而常规图文留言率为2%。目前该文阅读已超过5万。
微信派：
阅读量10万+，在看数1400多，是当月阅读量和在看数最高的一篇。该文主题是公布微信上线深色模式的消息，另一公众号「腾讯科技」的日常阅读量和「微信派」差不多，它甚至在「微信派」之前推送文章宣布微信上线深色模式，那篇文章以普通形式排版， 但阅读量6.9万，在看数200左右，数据远远不如「微信派」。
麦当劳：
「麦当劳」的头条10万+很常见，但该文在看数也10万+，是该账号目前唯一一篇双10万＋，在看数是平时的60多倍。
一篇复杂的SVG交互排版图文，往往需要策划、文案、设计师、程序员和运营等多人的配合，也不排除有全能型人才借助多种工具一个人完成创作。
大部分公众号图文精良的品牌，都是外包给专业的广告媒体公司制作的，一篇优秀的交互排版图文，成本在几百到几千甚至几万的都有。
进入到正式的SVG交互排版环节之前，需要先确定素材。设计师制作完长图并定稿后，为了可以上传公众号进行排版，会将长图切割成多段，不同交互对素材的要求也会有所不同，需要设计师和排版人员沟通对图片进行更细致的切图处理。
收到切分的素材后，排版人员开始进行最终的排版。
之前SVG排版需要专业的程序员用代码写，并且是一次性的。而现在大部分交互效果用 iPaiban Pro 黑科技编辑器就能实现了，就算是代码小白也能0代码10分钟制作出一篇优秀的交互图文，效率高、可复用且成本大大降低。
原文：
这篇SVG交互图文给到素材后，用 iPaiban Pro 黑科技编辑器不到2分钟就能做出来。
看看还原过程：
还原后的效果：
宝马的这篇图文中主要包含了点击切换图片、双层前景滑动以及点击缩放图片3种玩法。点击缩放图片现在只能通过编写代码实现，更有效率的方式是将缩放的效果做成动图，然后在编辑器用点击播放GIF的组件来实现。
iPaiban Pro 编辑器是一款专注于公众号SVG交互排版的黑科技编辑器，目前已有1000多个交互模板，各个模板自由组合，可以制作非常复杂的交互，连苹果、宝马、奔驰等品牌花费数万定制的样式也可以几分钟内轻松还原。
一篇简单的SVG交互图文，主要包含4种样式：图片无缝拼接、图片左右滑动、点击切换图片和视频无缝拼接。这4种样式也是品牌公众号经常用到的，搭配精美的素材，简洁又有格调。
下面教大家7步完成一篇简单的SVG交互图文。看完这个教程，你基本上掌握编辑器的使用了。
第1步：注册登录 iPaiban Pro 编辑器，网址：http://x.iPaiban.com
登录后按照引导领取新手礼包，礼包中有22个常用必备组件，其中就包括上面提到的4种。
已经注册领取或开通会员的用户请略过该步骤，接下来开始正式制作。
第2步：点击编辑器左侧「组件」按钮，在「无缝图」中点击选择「无缝图(不可弹出)」组件。
与普通的无缝图相比，点击不可弹出的无缝图，可以避免用户在阅读滑动屏幕过程中不小心点开图片打断阅读，体验更佳。
然后，在页面右侧点击「换图」按钮，上传自己的图片，需要添加几张无缝图就重复该步骤几次。
第3步：同理，我们在「组件」中找到「滑动」分类，选择「普通滑动-左滑」组件，然后在右侧上传自己的滑动图片。
滑动图片想上传几张就上传几张，注意保持尺寸一致。
第4步：在「组件」中找到「点击」分类，选择「点击-切换图片」组件，然后分别上传点击前和点击后的图片就可以了。
我们还可以设置图片切换的时间。
第5步：在「组件」中找到「视频」分类，选择「视频-无缝拼接」组件。
为了把视频导入到编辑器，我们需要获取视频的id，并把它粘贴到右侧输入框中。视频的id要在公众号后台获取，编辑器中有详细的视频获取教程，非常简单。
或者使用 iPaiban Pro 小助手插件一键获取，安装和使用教程见：《iPaiban Pro 浏览器插件来了！》
第6步：重复步骤2，拼接无缝图。
第7步：在最右侧可以先预览下草稿，确认没问题后，点击「导入微信后台」，将图文的代码导入到公众号中就可以啦。
导入时使用 iPaiban Pro 小助手会更方便哦，安装和使用教程见：《iPaiban Pro 浏览器插件来了！》
这样一个简单的 SVG 交互长图文就做完了。
一旦熟悉流程，与普通编辑器各种替换图片和调整缝隙相比，iPaiban Pro 编辑器操作起来可以说是丝滑顺畅，10分钟完成绝不是妄言。
如果你想查看更多排版教程和运营知识，可以关注公众号【i排版】，为公众号排版运营助力。
