微博，也支持SVG啦！（附内测申请🧐）

一个坏消息，品牌方的内卷新赛道又诞生了。

一个更好也可能更坏的消息，（新浪）微博与微信公众号生态的 SVG 语法框架形式有较大差异。

但有个值得一提好消息是，据了解 E2.COOL 黑科技 SVG 编辑器已经开始上架微博 SVG Beta 专用模版。

究竟怎么回事？先行科普一下。

大家好我是交互设计师计育韬，首先非常感谢微博的这次 40+ 专业用户内测邀约活动。虽然我是其中唯一的技术侧（其他均为平台侧）个体，但无论是产品体验还是技术交流，计老师都已经感受到了微博官方的产品诚意和平等姿态，点赞！未来更多的微博 SVG 产品动态一定要关注微博账号 @头条文章，官方资讯将以此为准喔！

还不了解什么是 SVG？摒弃纯技术性的概念诠释，简单来讲微信公众号图文中具备通过手指点击等行为产生交互响应的画面，如今大多基于 SVG 技术。圈内的 SVG 品牌头号玩家包括 GQ 实验室、宝马中国、喜茶、蒂芙尼、蕉内等，想必对运营人而言都是如雷贯耳般的存在。

如果你想进一步理解它，那么可以阅读我的科普专著《硬核运营：新媒体技术流养成》，在大多数市立和高校图书馆都可以借阅到。

内测体验如何？开发层面可有差异？

以下是基本的操作指南，请务必收藏好或传阅给具体岗位的运营人员：对于已经获取内测资格的账号而言，只需要在编辑微博头条文章时，点击剪切板功能，再点击「插入 SVG 代码」按钮即可——

就是如此简单，而需要注意的是：

1）头条文章的 SVG 支持按板块编辑，这就意味着文本穿插 SVG 交互的排版制作起来会轻松得多，对比之下微信公众号图文草稿编辑页始终是没有官方 SVG 编辑入口的，一切都需要依赖各类第三方插件进行布局。

2）它的本质是代码的编辑窗口，因此不仅限于插入 <svg></svg> 结构，也可以将譬如横向滑动（CSS）、视差（perspective 裸眼 3D）等布局进来，那么这里就是一个重要的想象力突破口了。

（品牌方如需查看内测案例预览请微信小窗与我联系）而提到想象力，SVG 发展至今、其有效的信息分层、酷炫的动画特效、丰富的感官体验……让我作为行业的先行者都尤其欣慰。且身为研究型学者，计老师也通过公益普及和培训授课等形式间接孵化了大批青年工作室团队，相信他们很快也会投入微博端 SVG 设计研究，为每一个普通的运营人提前铺平应用道路。

当然请注意，微博 SVG 的编辑区目前是存在字符限制的，对于顶尖开发者来说如果你植入重型交互装置，很可能当前不在微博 SVG 接受范围内，建议控制到 100W 代码字符以下：

但正如开场所言，W3C 联盟提供了 SVG 的全部应用空间，而 APP 则要具体问题具体分析，通过「白名单」这类属性与能力的限制规则，管控 SVG 可能干扰到 APP 生态自身技术架构稳定性的因素。所以现在，我要谈一谈微博 SVG 交互设计与微信公众号生态的区别，无论你是专业开发者还是内容运营人，都请仔细阅读接下来的说明！

以微信公众号为例，很多行业晚辈可能并不了解，在 2016 年为了和微信团队敲定《微信下 SVG AttributeName 白名单》，我和厦门嘉庚学院的研究人员就通过各种压力测试限制了 1）部分 AttributeName 的属性（在彼时可能导致微信闪退）2）属性引用能力（避免误扰到图文外层 CSS 样式）。且随着行业的发展，白名单中又出现了如对包括 <embed>、<detail> 标签，以及 <width>、<height> 动画重复次数等非常细节化的限制。

因为在任何生态中，都存在看不见的力量随时觊觎平台漏洞之下的财富。「白名单」的本质不是为了制约创作者，而是守住平台的底线，并给予所有参与人公平公正的运行环境。所以作为规则的制定者，总有其苦衷可能无法为后人理解，但在无形中只要维护好了微信的生态安全，其他纷扰就不值一提了。

那么，微博 SVG 生态内包含形同「白名单」的同类规则吗？

我确切地告诉你，这是肯定的。并且，它在未来也一定会不断被迭代更新。目前，微博 SVG 也同样制约 <script> 的应用，Dom 相关事件如 onload、onclick 等。不过对于 <id>，微博 SVG 持开放态度，这就意味着——

微博的 SVG 是相对更「科学」的 SVG，生态内的被动动画代码书写逻辑与微信公众号生态可以截然不同。它更倾向于 H5 的设计思维，易于被运营人理解和学习。与此同时，它的动画丰富性理论上限可能远超微信公众号生态圈，我们的一次简单的点击行为，可以绑定到无限数量目标的不同动画形式。

此外，包括 <use> 等标签的应用已成为可能，开发者通过定义可重复使用的元素的标签，能更高效地在 SVG 内布局它们；滤镜、渐变、蒙版等一大批在矢量设计软件中司空见惯的艺术特性，基于 <id> 或能实现正确表达……

而针对微博 SVG 的规则差异，建议各大主流 SVG 编辑器（秀米、135、E2.COOL）在将来提供对应的专属组件或独立操作专区，虽说有大量既往的 SVG 模板确实能在微博中复用，但创想的远帆已经悄然扬起，更史诗感的交互体验一定会诞生在微博上而不是微信公众号内。

至于当下，微博 SVG 的「白名单」尚未完全敲定，我在也参与协助测试之中。此后等产研侧有了明确的定数，我会第一时间如发布微信 SVG AttributeName 白名单那样与大家分享准确技术信息。也在此告诫，任何尝试以突破或绕过微博 SVG 相关功能限制进行开发的行为，都在技术圈被定位为「对抗式开发」，这无论在哪一个平台内都是不会被允许的。尊重生态，尊重平台，对开发环境抱有基本的感恩之心，这是每一个开发者应当秉持的良好职业道德。

查看更多实例,聊聊创作的想象空间

微博官方最早是于今年 3 月由内部人员启动生产环境的产品测试，很高兴地看到当时的一些实例就已经在应用著名的 E2.COOL 黑科技 SVG 编辑器。那么再结合一些圈内最新的测试，接下来计老师带同学们了解更多具体案例及其技术意义。

一、循序渐进，从简单特效开始实践

最具代表性的微信公众号 SVG 效果是什么？如果只能选一个的话，计老师认为「点击-伸长」型组件非其莫属。对于大多数运营人来讲，它的直观属性就是使得图文画面向下延展，扩大可视范围并展示出更多内容。对开发者而言，它经历了一代定宽伸长（@GL 意符互动发明），二代分层定宽伸长（@Apple 发明），三代 <width> 式分层适配伸长（@小杨 交互实验室发明）和准 3.5 代类积分思维收缩/伸长（@科蚪发明），那么它可以被应用在微博 SVG 吗？怎么用？

首先，由于方才提到我们尚未敲定最终的微博 SVG 白名单规则，因此初步上手先选择简单形态的伸长更为稳妥。如这个实例就是 3 月份时候，博主基于 E2.COOL 黑科技 SVG 编辑器最基本的「点击-伸长」、「点击渐现」组件进行的一次案例复用实验。考虑到微博 SVG 生态正处于起步阶段，对于并不真正熟悉 SVG 代码运行逻辑的运营人来说，当下如果能获得内测资格，那么应用好这类基本动画效果足矣。至于具体的模版操作流程，还是建议关注编辑器侧的资讯动态，一些是编辑器中的微博 SVG Beta 专用模版也可以作为创新的选择：

公众号在完成「点击-伸长」案例基础上，或许你就能再逐步通过自由拼装，去完成「上色伸长」这样更多的进阶伸长动画效果。

如上微博 SVG 实例的排版方法为：

对于头部品牌，如果希望尽快获得微博 SVG 能力，可以与我们 JZ Creative Studio 取得联系，目前计老师也正在安排部分我们的长期研究合作品牌开启相关功能并正式投入内容制作。且出于科研目的，我们依然会免费定制开发超越微信公众号生态可能性的更高级 SVG 交互设计。

二、转变思维，探索更丰富的动画能力

前面已经提到，微博 SVG 的理论效果上限目前是明确高于微信公众号生态的，下面这个我布局的实例则为了表现 <id> 能力带来的新特性。

通过「长按」画面，魔方中的三个立方体会朝三个方向各自运行，「松开」画面后它们又回逐步回到原位。且画面中的实体素材只有一个立方体，魔方的构成通过同一元素堆叠而成。讲到这里，相信专业开发者们已经欣喜万分。具体的技术细节在此我就不展开了，有需要的读者请移步今天发布的次条图文。

你也可以前往  E2.COOL 黑科技 SVG 编辑器通过微博 SVG Beta 专用模版来理解这种关键能力的多样化应用效果，像其中的「E2爆炸图」模版就是非常典型的交互效果。

如何申请内测？既往的长期深度合作伙伴可以直接咨询 JZ（管理员微信 Zhuoya_Work），我们会视品牌方微博和微信公众号的实际情况，决定是否交由微博官方开启对应功能。而对于需要自行申请内测则可以点击这里获取申请链接排队参与。

如果你有任何建议，或在加入内测后遇到任何困难，欢迎通过不同渠道与我们联系，我们将尽快汇总重要的用户反馈，交由微博官方进行研究和回复。更多入门指南、实例分析、模版推荐请移步本期发布的次条链接点击阅读。我们也会尽快组织包括公开直播课、教学录播课等形式的科普工作，同时也将在知识星球「硬核运营研习社」开始更新相关研究的最新成果。