SVG理論入門？這篇復(fù)旦大學(xué)學(xué)術(shù)論文講透了！

原創(chuàng) 贊收藏 評(píng)論

舉報(bào) 2024-11-08

掃描,分享朋友圈

《新媒體SVG交互設(shè)計(jì)學(xué)發(fā)凡》

復(fù)旦大學(xué)奇點(diǎn)新媒體研究中心

刊載于《數(shù)字技術(shù)與應(yīng)用》｜影響因子0.364

SVG（Scalable Vector Graphics）是一種在互聯(lián)網(wǎng)傳媒編年史中常青樹般存在的二維圖形語言，它于 1999 年進(jìn)入 W3C 標(biāo)準(zhǔn)并支持在 XML 命名空間中渲染矢量圖像與文本。但在新媒體生態(tài)中，由于不同平臺(tái)端限制性開發(fā)規(guī)則的存在，SVG 體現(xiàn)出具體且差異化的技術(shù)應(yīng)用模式，因而在大多數(shù)情形下無法完全對(duì)照 W3C 技術(shù)文檔進(jìn)行交互設(shè)計(jì)。

以微信公眾號(hào)平臺(tái)為例，并非 W3C 聯(lián)盟技術(shù)文檔中任意的 SVG AttributeName 都可以被應(yīng)用發(fā)布。作為最早廣泛采用新媒體 SVG 交互設(shè)計(jì)的載體，微信公眾平臺(tái)的創(chuàng)作者始終被限制在白名單體系中應(yīng)用動(dòng)畫類目，任何超出該白名單體系的動(dòng)畫標(biāo)簽都無法寫入公眾平臺(tái)中，在保存時(shí)會(huì)被直接抹去而失效。

01 業(yè)態(tài)技術(shù)發(fā)軔 SVG AttributeName 白名單

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

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

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

而微博端的 SVG 應(yīng)用形式主要為頭條文章，其功能內(nèi)測(cè)開放于 2023 年初，并于 7 月 6 日由 JZCreativeStudio 發(fā)布內(nèi)測(cè)公告。較之于微信公眾號(hào)平臺(tái)，鑒于當(dāng)下產(chǎn)品軟件與手機(jī)硬件的性能條件，微博團(tuán)隊(duì)已不再限制 AttributeName 條目，但仍然限制 JavaScript 在文章中的調(diào)用。

對(duì)于動(dòng)畫屬性標(biāo)簽的具體開發(fā)應(yīng)用，業(yè)內(nèi)一般將人民郵電出版社《硬核運(yùn)營：新媒體技術(shù)流養(yǎng)成》或網(wǎng)易云課堂《SVG高級(jí)交互排版》作為技術(shù)參考來源，但注意在未來，不排除微信團(tuán)隊(duì)和微博團(tuán)隊(duì)仍然會(huì)進(jìn)一步變動(dòng)白名單規(guī)則的可能性。

02 HTML-CSS 限制性規(guī)則

除了對(duì) SVG 動(dòng)畫屬性標(biāo)簽的直接限制，不同平臺(tái)還存在基于 HTML 的其他限制性開發(fā)規(guī)則會(huì)對(duì) SVG 交互設(shè)計(jì)產(chǎn)生影響。

03 微信公眾平臺(tái)與微博 HTML-CSS 限制性規(guī)則的影響

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

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

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

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

深色模式無法作用于 SVG 模塊。這是微信公眾平臺(tái)少數(shù)限制性規(guī)則明確無法作用于 SVG 的特性，鑒于 SVG 內(nèi)容的復(fù)雜度微信團(tuán)隊(duì)決定微信 APP 深色模式在對(duì)圖文內(nèi)容進(jìn)行渲染時(shí)直接跳過 SVG 葉子節(jié)點(diǎn)。

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

而微博頭條文章對(duì) SVG AttributeName 是完全不設(shè)限的，但仍然有部分制約條件需要以 JZCreativeStudio 發(fā)布的《微博 SVG 交互開發(fā)限制性規(guī)則》為準(zhǔn)。

04 新媒體 SVG 交互設(shè)計(jì)學(xué)術(shù)語概念與實(shí)例

任何學(xué)科領(lǐng)域，定義與概念均是著述立論之本。新媒體 SVG 交互設(shè)計(jì)作為一個(gè)相對(duì)年輕的新聞傳媒技術(shù)，時(shí)刻都在涌現(xiàn)前所未見的新鮮行業(yè)范式——

4.1 SVG AttributeName白名單

指自 2016 年起，由復(fù)旦大學(xué)青年智庫的計(jì)育韜和廈門嘉庚學(xué)院的林喆調(diào)試，并設(shè)定于微信公眾平臺(tái)的SVG體系下動(dòng)畫類目的許可清單。

4.2 伸長

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

4.3 穿透觸發(fā)

通過 pointer-events 屬性值管理 SVG 圖層響應(yīng)關(guān)系的關(guān)鍵技術(shù)，它能通過對(duì)不同結(jié)構(gòu)穿透與否的設(shè)定，結(jié)合 g 編組構(gòu)建出無限復(fù)雜度的 SVG 或 CSS 交互模型，由復(fù)旦大學(xué) SVG 交互設(shè)計(jì)學(xué)者計(jì)育韜引入業(yè)內(nèi)，并以時(shí)尚新聞媒體 VOGUE 的公眾號(hào)交付為最早的公開實(shí)踐應(yīng)用實(shí)例，可用于實(shí)現(xiàn)“彈出式海報(bào)”等交互效果。

4.4 雙層觸發(fā)

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

4.5 零高結(jié)構(gòu)/容器

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

以上五個(gè)概念構(gòu)成了SVG生態(tài)最本底代碼技術(shù)架構(gòu)，也是新媒體SVG交互設(shè)計(jì)學(xué)伊始之地和從業(yè)準(zhǔn)入。

-END-

本文系作者授權(quán)數(shù)英發(fā)表，內(nèi)容為作者獨(dú)立觀點(diǎn)，不代表數(shù)英立場(chǎng)。
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。