SVG理論入門？這篇復旦大學學術論文講透了！

原創贊收藏評論

舉報 2024-11-08

掃描,分享朋友圈

《新媒體SVG交互設計學發凡》

復旦大學奇點新媒體研究中心

刊載于《數字技術與應用》｜影響因子0.364

SVG（Scalable Vector Graphics）是一種在互聯網傳媒編年史中常青樹般存在的二維圖形語言，它于 1999 年進入 W3C 標準并支持在 XML 命名空間中渲染矢量圖像與文本。但在新媒體生態中，由于不同平臺端限制性開發規則的存在，SVG 體現出具體且差異化的技術應用模式，因而在大多數情形下無法完全對照 W3C 技術文檔進行交互設計。

以微信公眾號平臺為例，并非 W3C 聯盟技術文檔中任意的 SVG AttributeName 都可以被應用發布。作為最早廣泛采用新媒體 SVG 交互設計的載體，微信公眾平臺的創作者始終被限制在白名單體系中應用動畫類目，任何超出該白名單體系的動畫標簽都無法寫入公眾平臺中，在保存時會被直接抹去而失效。

01 業態技術發軔 SVG AttributeName 白名單

新媒體 SVG 交互設計本質上是一種標準通用標記語言體系下，因新聞傳播業態頭部產品導向而產生的特殊性代碼規則應用產物。在業態早期，它作為傳統意義上通過 PC 瀏覽器進行渲染的圖像格式，在移動端會同時受限于彼時硬件 GPU 運行性能和微信等 AP P的 TBS 瀏覽器渲染性能，曾一度出現“一批看似人畜無害的動畫類型卻能頻繁讓頁面失去響應甚至手機嚴重發燙”的現實問題。

所以針對平臺負向特征進行代碼規則優化，是 2016 年時 SVG 行業發展進程中的關鍵事件。由兩位行業學者，來自復旦大學青年智庫的計育韜和廈門嘉庚學院的林喆牽頭，于 2016 年 6 月與微信團隊合作對 W3C 聯盟技術文檔中全部 SVG AttributeName 的測試，篩選出了針對微信 APP 適配性最佳，共計 18 個名目下 27 個動畫屬性標簽，交由微信團隊以白名單（whitelist）許可形式封裝入了微信公眾平臺并于同年 6 月 20 日公布。

自此，新媒體 SVG 交互設計行業迎來爆發式增長，包括清華大學、吉林大學、山東大學、浙江傳媒學院、江南大學、東莞理工學院等高校誕生了一大批優秀的設計師與開發者。與此同時，也有部分從業人員在白名單體系內尋求破解方法，甚至通過部分動畫屬性針對平臺進行對抗性開發，迫使官方不斷收縮白名單范疇。時至今日如圖所示，尚有 20 個動畫屬性標簽可在微信公眾號平臺中應用：

而微博端的 SVG 應用形式主要為頭條文章，其功能內測開放于 2023 年初，并于 7 月 6 日由 JZCreativeStudio 發布內測公告。較之于微信公眾號平臺，鑒于當下產品軟件與手機硬件的性能條件，微博團隊已不再限制 AttributeName 條目，但仍然限制 JavaScript 在文章中的調用。

對于動畫屬性標簽的具體開發應用，業內一般將人民郵電出版社《硬核運營：新媒體技術流養成》或網易云課堂《SVG高級交互排版》作為技術參考來源，但注意在未來，不排除微信團隊和微博團隊仍然會進一步變動白名單規則的可能性。

02 HTML-CSS 限制性規則

除了對 SVG 動畫屬性標簽的直接限制，不同平臺還存在基于 HTML 的其他限制性開發規則會對 SVG 交互設計產生影響。

03 微信公眾平臺與微博 HTML-CSS 限制性規則的影響

高度動畫（height）和寬度動畫（width）條件下，repeatCount 屬性存在限制。任何新媒體交互技術的開發，都不能以干擾平臺側能力為目的，因此針對業內曾經出現的圖文高度彈跳效果，微信團隊 2022 年 3 月進行了限制，否則將導致公眾平臺圖文底部的留言區等模塊反復上下位移，嚴重干擾微信用戶正常使用包括留言、私信、點贊、在看的操作。其具體限制特征為：當 SVG 中使用到 height 或 width 動畫屬性標簽，且 repeatCount 值寫為 indefinite 時，保存后將被微信公眾平臺修改為 undefined 值，進而使得寬度或高度的循環動畫失效，但允許輸入具體數值定義有限循環次數。可見，微信團隊對于對抗性開發的研判不僅在于 APP 安全性層面，也同樣在于 UX 交互體驗層面。

id 傳參以及 JavaScript 等的禁用。為避免 id 屬性對微信公眾平臺圖文架構的干擾，并杜絕 JavaScript 類交互對微信公眾平臺圖文的超負荷運行，微信團隊在此前禁用了相關能力。而在 SVG 的 XML 語法體系中，id 屬性的應用本身是極為廣泛的，不僅包括與 use、mpath、by、clicPath、filter 等常規標簽的組合，還有在視覺設計中如網格、蒙版、漸變等設計技法中的應用。因此隨著相關能力的禁用，上述交互設計也部分或全部等同于失效。而針對業內曾井噴出現的圖文內深層嵌入小游戲、倒計時、喚醒能力等行為，微信團隊于 2021 年 6 月還進行嵌入式結構（embed）條件下的完全禁用。

外邊距（margin）條件下，數值存在限制。如 margin-left:-100% 在保存時會被直接抹去而失效。

position 定位禁用。故對于 z-index 排序方法，需在 flex 布局前提下應用才可生效。

深色模式無法作用于 SVG 模塊。這是微信公眾平臺少數限制性規則明確無法作用于 SVG 的特性，鑒于 SVG 內容的復雜度微信團隊決定微信 APP 深色模式在對圖文內容進行渲染時直接跳過 SVG 葉子節點。

命名空間的嚴格語法環境。由于 SVG 采用的是 XML 體系語法 CSS 描述，而微信公眾平臺圖文的生態則是 HTML 體系語法 CSS3 描述，因此嚴格意義上來講空間在彼此包含時應當準確進行申明。由于當下瀏覽器往往對空間具備主動的識別能力，因此諸多開發者習慣于舍棄如 xmlns="http://www.w3.org/1999/xhtml" 這一類的命名空間申明。但在部分實例中，如出現相對晚期進入 W3C 標準的 clip-path 形狀蒙版屬性，并且涉及 -webkit- 兼容性內核指向時，開發者應當將相關 CSS 屬性直接賦予 foreignObject，通過在父子 SVG 層申明，才能實現 iOS 和 Android 雙系統的 SVG 交互設計兼容表現。

而微博頭條文章對 SVG AttributeName 是完全不設限的，但仍然有部分制約條件需要以 JZCreativeStudio 發布的《微博 SVG 交互開發限制性規則》為準。

04 新媒體 SVG 交互設計學術語概念與實例

任何學科領域，定義與概念均是著述立論之本。新媒體 SVG 交互設計作為一個相對年輕的新聞傳媒技術，時刻都在涌現前所未見的新鮮行業范式——

4.1 SVG AttributeName白名單

指自 2016 年起，由復旦大學青年智庫的計育韜和廈門嘉庚學院的林喆調試，并設定于微信公眾平臺的SVG體系下動畫類目的許可清單。

4.2 伸長

移動端圖文頁面在縱向發生高度擴張。它的初始模型以高度動畫（height）為核心動畫屬性驅動頁面伸長，由吉林大學 SVG 交互設計學者趙國梁發明。在 2020 年，浙江傳媒學院 SVG 交互設計學者楊澤昊提出了全新的 SVG 畫板與內容 section 分離，并將 SVG 畫板基于寬度動畫（width）進行比例化擴張的開發技術。這一技術也成為了當下廣大從業者和主流 SVG 編輯器通用的伸長動畫核心架構。

4.3 穿透觸發

通過 pointer-events 屬性值管理 SVG 圖層響應關系的關鍵技術，它能通過對不同結構穿透與否的設定，結合 g 編組構建出無限復雜度的 SVG 或 CSS 交互模型，由復旦大學 SVG 交互設計學者計育韜引入業內，并以時尚新聞媒體 VOGUE 的公眾號交付為最早的公開實踐應用實例，可用于實現“彈出式海報”等交互效果。

4.4 雙層觸發

該模型最初由海爾集團 SVG 交互設計學者姜棋超發明，通過事件時間差原理讓 touchstart 與 click 指令共同參與同一個用戶操作行為，既當上層元素在 300ms 內完成 touchstart 觸發并消失，下層元素就能接收到 300ms 后的 click 觸發。后續演變出包括無限往返伸縮器、無限選擇器等實用性功能更突出的互動模型，被 Apple 蘋果等各行業頭部品牌公眾號廣泛吸納并應用。

4.5 零高結構/容器

高度為零（height:0）的 CSS 結構，但由于其 overflow:visible 屬性使得其內容可以溢出并可見。零高結構最初由山東大學 SVG 交互設計學沈佳麒發明。它使得內容在同一畫面內可以準確無限堆疊，并由此輔助了絕大多數的 SVG 伸長動畫展現，使得穿透觸發等指令模式變得更具有現實應用意義，可以說幾乎包含在了當下一切定制開發級 SVG 作品中。

以上五個概念構成了SVG生態最本底代碼技術架構，也是新媒體SVG交互設計學伊始之地和從業準入。

-END-

本文系作者授權數英發表，內容為作者獨立觀點，不代表數英立場。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。