SVG_AttributeName.jpg

微信公众号文章排版使用的SVG是指可缩放矢量图形（Scalable Vector Graphics）。它是一种基于代码的图形格式，允许设计师通过编写XML代码来描述形状和颜色，从而创建出灵活且可以根据屏幕大小自动调整大小的图像。在微信公众号中，开发者可以使用SVG结合HTML和CSS来实现类似于H5的动态交互效果。由于这些交互不需要JavaScript脚本，因此能够直接嵌入到公众号的文章或页面中，提高了用户体验。此外，SVG图像可以承载丰富的信息和交互元素，有助于提升品牌的传播力和用户的参与度。

但是有些SVG存在BUG漏洞，经微信公众号团队反复测试，并在2016年制定了微信 SVG AttributeName 白名单。

SVG AttributeName 白名单 （2016-2023）

序号

元素

Name

备注

1

animate

x

控制简单几何体×轴方向移动

创意应用如柱状图等

2

y

控制简单几何体y轴方向移动

创意应用如柱状图等

3

width

控制简单几何体宽度变化

创意应用如伸长式图文（宽度自适应）

4

height

控制简单几何体高度变化

创意应用如伸长式图文、预占位等

5

CX

控制圆心 ×轴方向移动

6

CY

控制圆心y轴方向移动

7

opacity

控制透明度变化，数值为0到 1

8

d

控制贝塞尔曲线补间行为

但表现具有随机性

9

points

控制多边形补间行为

但表现具有随机性

10

stroke-width

描边宽度、描边端点和描边偏移量创意应用如遮罩动画、饼/分图、进度线等

11

stroke-linecap

12

stroke-dashoffset

13

fill

控制填充色过渡变化

14

set

visibility

控制可见性效果的表达，数值包括 visible |hidden|

collapse | inherit

创意应用如防误触等

15

animateTransform

translate

控制路径和编组的位移

16

scale

控制路径和编组的×、y轴缩放创意应用如伪翻转等

17

rotate

控制路径和编组的旋转

18

skewX

控制路径和编组的 ×轴倾斜

创意应用如台历翻阅等

19

skewY

控制路径和编组的y轴倾斜

创意应用如书籍翻阅等

20

animateMotion

path

单行/复杂的轨迹动画

可通过 rotate 定义朝向

创意应用如轨迹飞行等

自白名单发布以来，根据业态硬/软件客观条件变化以及业态内技术发展情况，长期处于动态调整之中。截止到 2023 年底，除了图中对动画属性的基本遴选和应用说明，另请广大开发者注意以下限制细则：

（1）针对业内曾出现的留言区弹跳效果，自 2022 年 3 月起高度动画（height）和宽度动画（width）条件下 repeatCount 属性存在限制，indefinite 值保存后将被官方替换为 undefined 值。请注意类似开发行为均被微信团队视作「对抗式开发」，干扰公众号原生 UX 范式，如采用有限多次留言区弹跳亦可能受到处罚。

（2）id 传参以及 JavaScript 等保持禁用，包括在嵌入式结构内的漏洞绕过机制已在 2021 年 6 月完成封堵。

（3）外边距（margin）条件下数值存在限制，如 margin-left: -100% 在保存时会被直接抹去而失效。

（4）position 定位保持禁用，因故对于 z-index 优先级排序方法需在 flex 布局前提下应用才可生效。

（5）半严格语法条件环境，请不要长期舍弃 xmlns="http://www.w3.org/1999/xhtml" 此类命名空间申明，避免 CSS 属性表现异常。

（6）鉴于 SVG 内容的复杂特性，微信团队保持微信 APP 深色模式在对图文内容进行渲染时跳过 SVG 叶子节点，不作用于 SVG 结构。

（7）包括 SVG 在内的图文整体内容代码体积不能超过 20M。

（8）部分硬件机制可能阻止 SVG 正常渲染运行，如在 iOS 中关闭「设置」-「辅助功能」-「动态效果」-「自动播放动图」。