《新媒体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交互设计学伊始之地和从业准入。