新的藍海已經(jīng)開啟，預祝廣大開發(fā)者和運營人揚帆起航！

一個好消息，（新浪）微博也支持 SVG 了。

一個壞消息，品牌方的內(nèi)卷新賽道又誕生了。

一個更好也可能更壞的消息，（新浪）微博與微信公眾號生態(tài)的 SVG 語法框架形式有較大差異。但有個值得一提好消息是，據(jù)了解 E2.COOL 黑科技 SVG 編輯器已經(jīng)開始上架微博 SVG Beta 專用模版。

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

大家好我是交互設計師計育韜，首先非常感謝微博的這次 40+ 專業(yè)用戶內(nèi)測邀約活動。雖然我是其中唯一的技術側(cè)（其他均為平臺側(cè)）個體，但無論是產(chǎn)品體驗還是技術交流，計老師都已經(jīng)感受到了微博官方的產(chǎn)品誠意和平等姿態(tài)，點贊！未來更多的微博 SVG 產(chǎn)品動態(tài)一定要關注微博賬號 @頭條文章，官方資訊將以此為準喔！

還不了解什么是 SVG？摒棄純技術性的概念詮釋，簡單來講微信公眾號圖文中具備通過手指點擊等行為產(chǎn)生交互響應的畫面，如今大多基于 SVG 技術。圈內(nèi)的 SVG 品牌頭號玩家包括 GQ 實驗室、寶馬中國、喜茶、蒂芙尼、蕉內(nèi)等，想必對運營人而言都是如雷貫耳般的存在。

如果你想進一步理解它，那么可以閱讀我的科普專著《硬核運營：新媒體技術流養(yǎng)成》，在大多數(shù)市立和高校圖書館都可以借閱到。

內(nèi)測體驗如何？開發(fā)層面可有差異？

以下是基本的操作指南，請務必收藏好或傳閱給具體崗位的運營人員：對于已經(jīng)獲取內(nèi)測資格的賬號而言，只需要在編輯微博頭條文章時，點擊剪切板功能，再點擊「插入 SVG 代碼」按鈕即可——

就是如此簡單，而需要注意的是：

1）頭條文章的 SVG 支持按板塊編輯，這就意味著文本穿插 SVG 交互的排版制作起來會輕松得多，對比之下微信公眾號圖文草稿編輯頁始終是沒有官方 SVG 編輯入口的，一切都需要依賴各類第三方插件進行布局。

2）它的本質(zhì)是代碼的編輯窗口，因此不僅限于插入 <svg></svg> 結(jié)構，也可以將譬如橫向滑動（CSS）、視差（perspective 裸眼 3D）等布局進來，那么這里就是一個重要的想象力突破口了。

而提到想象力，SVG 發(fā)展至今、其有效的信息分層、酷炫的動畫特效、豐富的感官體驗……讓我作為行業(yè)的先行者都尤其欣慰。且身為研究型學者，計老師也通過公益普及和培訓授課等形式間接孵化了大批青年工作室團隊，相信他們很快也會投入微博端 SVG 設計研究，為每一個普通的運營人提前鋪平應用道路。

當然請注意，微博 SVG 的編輯區(qū)目前是存在字符限制的，對于頂尖開發(fā)者來說如果你植入重型交互裝置，很可能當前不在微博 SVG 接受范圍內(nèi)，建議控制到 30W 代碼字符以下：

但正如開場所言，W3C 聯(lián)盟提供了 SVG 的全部應用空間，而 APP 則要具體問題具體分析，通過「白名單」這類屬性與能力的限制規(guī)則，管控 SVG 可能干擾到 APP 生態(tài)自身技術架構穩(wěn)定性的因素。

所以現(xiàn)在，我要談一談微博 SVG 交互設計與微信公眾號生態(tài)的區(qū)別，無論你是專業(yè)開發(fā)者還是內(nèi)容運營人，都請仔細閱讀接下來的說明！

以微信公眾號為例，很多行業(yè)晚輩可能并不了解，在 2016 年為了和微信團隊敲定《微信下 SVG AttributeName 白名單》，我和廈門嘉庚學院的研究人員就通過各種壓力測試限制了 1）部分 AttributeName 的屬性（在彼時可能導致微信閃退）2）屬性引用能力（避免誤擾到圖文外層 CSS 樣式）。且隨著行業(yè)的發(fā)展，白名單中又出現(xiàn)了如對包括 <embed>、<detail> 標簽，以及 <width>、<height> 動畫重復次數(shù)等非常細節(jié)化的限制。

因為在任何生態(tài)中，都存在看不見的力量隨時覬覦平臺漏洞之下的財富。「白名單」的本質(zhì)不是為了制約創(chuàng)作者，而是守住平臺的底線，并給予所有參與人公平公正的運行環(huán)境。所以作為規(guī)則的制定者，總有其苦衷可能無法為后人理解，但在無形中只要維護好了微信的生態(tài)安全，其他紛擾就不值一提了。

那么，微博 SVG 生態(tài)內(nèi)包含形同「白名單」的同類規(guī)則嗎？

我確切地告訴你，這是肯定的。并且，它在未來也一定會不斷被迭代更新。目前，微博 SVG 也同樣制約 <script> 的應用，Dom 相關事件如 onload、onclick 等。不過對于 <id>，微博 SVG 持開放態(tài)度，這就意味著——

微博的 SVG 是相對更「科學」的 SVG，生態(tài)內(nèi)的被動動畫代碼書寫邏輯與微信公眾號生態(tài)可以截然不同。它更傾向于 H5 的設計思維，易于被運營人理解和學習。與此同時，它的動畫豐富性理論上限可能遠超微信公眾號生態(tài)圈，我們的一次簡單的點擊行為，可以綁定到無限數(shù)量目標的不同動畫形式。

此外，包括 <use> 等標簽的應用已成為可能，開發(fā)者通過定義可重復使用的元素的標簽，能更高效地在 SVG 內(nèi)布局它們；濾鏡、漸變、蒙版等一大批在矢量設計軟件中司空見慣的藝術特性，基于 <id> 或能實現(xiàn)正確表達……

而針對微博 SVG 的規(guī)則差異，建議各大主流 SVG 編輯器（秀米、135、E2.COOL）在將來提供對應的專屬組件或獨立操作專區(qū)，雖說有大量既往的 SVG 模板確實能在微博中復用，但創(chuàng)想的遠帆已經(jīng)悄然揚起，更史詩感的交互體驗一定會誕生在微博上而不是微信公眾號內(nèi)。

至于當下，微博 SVG 的「白名單」尚未完全敲定，我在也參與協(xié)助測試之中。此后等產(chǎn)研側(cè)有了明確的定數(shù)，我會第一時間如發(fā)布微信 SVG AttributeName 白名單那樣與大家分享準確技術信息。也在此告誡，任何嘗試以突破或繞過微博 SVG 相關功能限制進行開發(fā)的行為，都在技術圈被定位為「對抗式開發(fā)」，這無論在哪一個平臺內(nèi)都是不會被允許的。尊重生態(tài)，尊重平臺，對開發(fā)環(huán)境抱有基本的感恩之心，這是每一個開發(fā)者應當秉持的良好職業(yè)道德。

查看更多實例，聊聊創(chuàng)作的想象空間

微博官方最早是于今年 3 月由內(nèi)部人員啟動生產(chǎn)環(huán)境的產(chǎn)品測試，很高興地看到當時的一些實例就已經(jīng)在應用著名的 E2.COOL 黑科技 SVG 編輯器。那么再結(jié)合一些圈內(nèi)最新的測試，接下來計老師帶同學們了解更多具體案例及其技術意義。

一、循序漸進，從簡單特效開始實踐

最具代表性的微信公眾號 SVG 效果是什么？如果只能選一個的話，計老師認為「點擊-伸長」型組件非其莫屬。對于大多數(shù)運營人來講，它的直觀屬性就是使得圖文畫面向下延展，擴大可視范圍并展示出更多內(nèi)容。對開發(fā)者而言，它經(jīng)歷了一代定寬伸長（@GL 意符互動發(fā)明），二代分層定寬伸長（@Apple 發(fā)明），三代 <width> 式分層適配伸長（@小楊 交互實驗室發(fā)明）和準 3.5 代類積分思維收縮/伸長（@科蚪發(fā)明），那么它可以被應用在微博 SVG 嗎？怎么用？

首先，由于方才提到我們尚未敲定最終的微博 SVG 白名單規(guī)則，因此初步上手先選擇簡單形態(tài)的伸長更為穩(wěn)妥。如這個實例就是 3 月份時候，博主基于 E2.COOL 黑科技 SVG 編輯器最基本的「點擊-伸長」、「點擊漸現(xiàn)」組件進行的一次案例復用實驗。

考慮到微博 SVG 生態(tài)正處于起步階段，對于并不真正熟悉 SVG 代碼運行邏輯的運營人來說，當下如果能獲得內(nèi)測資格，那么應用好這類基本動畫效果足矣。至于具體的模版操作流程，還是建議關注編輯器側(cè)的資訊動態(tài)，一些是編輯器中的微博 SVG Beta 專用模版也可以作為創(chuàng)新的選擇。

在完成「點擊-伸長」案例基礎上，或許你就能再逐步通過自由拼裝，去完成「上色伸長」這樣更多的進階伸長動畫效果。

如上微博 SVG 實例的排版方法為：

對于頭部品牌，如果希望盡快獲得微博 SVG 能力，可以與我們 JZ Creative Studio 取得聯(lián)系，目前計老師也正在安排部分我們的長期研究合作品牌開啟相關功能并正式投入內(nèi)容制作。且出于科研目的，我們依然會免費定制開發(fā)超越微信公眾號生態(tài)可能性的更高級 SVG 交互設計。

二、轉(zhuǎn)變思維，探索更豐富的動畫能力

前面已經(jīng)提到，微博 SVG 的理論效果上限目前是明確高于微信公眾號生態(tài)的，下面這個我布局的實例則為了表現(xiàn) <id> 能力帶來的新特性。

通過「長按」畫面，魔方中的三個立方體會朝三個方向各自運行，「松開」畫面后它們又回逐步回到原位。且畫面中的實體素材只有一個立方體，魔方的構成通過同一元素堆疊而成。講到這里，相信專業(yè)開發(fā)者們已經(jīng)欣喜萬分。具體的技術細節(jié)在此我就不展開了，有需要的讀者請移步今天發(fā)布的次條圖文。

你也可以前往 ?E2.COOL 黑科技 SVG 編輯器通過微博 SVG Beta 專用模版來理解這種關鍵能力的多樣化應用效果，像其中的「E2爆炸圖」模版就是非常典型的交互效果。

更多入門指南、實例分析、模版推薦請移步本期發(fā)布的次條鏈接點擊閱讀。我們也會盡快組織包括公開直播課、教學錄播課等形式的科普工作，同時也將在知識星球「硬核運營研習社」開始更新相關研究的最新成果。