计育韬｜微博SVG交互开发限制性规则｜内参（持续更新）

首先很高兴在我们的推动下，一大批好朋友包括资深开发者、顶尖运营人都陆续加入了微博的 SVG 内测活动。此外，我也协调支持了包括秀米、135 编辑器两方共同参与，以期官方编辑器能快速入局为更普遍的用户提供好模版服务。

但是既然称之为「内测」，必定有尚不确定的版本特性会不断变更。例如在 V3 新版发布前夕，我曾就微博 SVG 编辑器 30 万字符限制的特性向微博官方提出了开放建议，希望可以提供约 80 万的容量。因此在编辑器更新后，我们收到了微博官方的信息，已将字符限制上调到 100 万，在此也为微博团队的诚意点赞！

那么除此以外，当前在微博 SVG 生态内的开发还有哪些限制性规则？

鉴于微博 SVG 整体技术的白名单尚未确定，我撰写此帖为内参，也汇总了多位资深开发者好友的探讨，相信可以为未来的入局者们提供积极的参考价值。本帖将保持更新，以不断纳入新的平台侧技术变动情况。

---

• 微博 SVG 编辑器的代码字符量限制，当前为 100 万字符。对于是否超过了字符限制，请以编辑时下方的浮窗提示为准。
• 微博内的 HTML-CSS3 和 XML-CSS 书写都处于严格语法环境中，这意味着包括空格、分号、驼峰命名等必须遵循最规范的书写格式，否则将被抹去。
• 微博头条文章在「深色模式」（微博自身设置中的「深色模式」）下表现并不完全稳定，会出现尚不明原因的 fill 填充色表现异常。
• 经过我的初步不完全测试，微博对头条文章内图像压缩的效果相对优于微信公众号，上传的初始限制为 20M，对于一般合理尺寸（如 1080 宽）的图像，压缩率约在 93%；对于横向超宽图，微博会将其压缩至 1080 宽。欢迎更多感兴趣的同学进行具体的测试活动！
• 请开发者注意，微博 SVG 对 max-width 参数的具体表现与微信公众号有显著差异，特别是涉及开发伸长-回缩的效果时，请不要采用常规的 max-width: none !important 写法，而是将实际展开量的具体数值同步给 max-width，否则会出现回缩瞬间图文下方瞬间转化为大片空白的肉眼感官，我在此暂且将其称之为「超量伸长」。
• 目前无法以 <style> 形式先描述属性，再构建 HTML 结构，<style> 会被抹去。
• 对于 AttributeName 当前微博暂无「白名单」型限制，因此在微博 SVG 中可以操控的动画类型会比微信公众号生态内更多。
• 微博普通正文内的多媒体不可在微博 SVG 编辑器内插入，即便采用 Chrome 调试工具注入也会被抹去，这就意味着当下并不能实现如音频、视频关联 SVG 交互动画的形式。
• 微博 SVG 编辑器内可以直接复制微信公众号端图文，虽然会短暂出现「图片来自微信公众号无法显示」的画面提示，但稍等片刻就会转化为微博图床地址。
• pointer-events 属性曾在非 SVG 结构内被禁用过，或出于对微博原生组件干扰的考虑？（存疑）因此仍然建议广大开发者在非必要情况下，减少 pointer-events 的使用，转而基于 id 能力更科学地管理动画代码。
• 逆向滑动 dir="rtl" 因语法版本问题不可应用，会被抹去。科蚪建议请用direction: rtl;
• 对于存在图片上传失败情况，目前并没有非常可视化的单张图片地址替换方法，建议压缩对应图片重新操作。
• 以上是当前计老师可以给到大家的微博 SVG 交互开发限制性规则内参列表，如果你在测试中有任何希望补充的信息，欢迎与我联系并修改本文。

---

计育韬

微信官方 SVG AttributeName 白名单开发者
上海市信息化青年人才协会会员
上海市知识分子联谊会会员
复旦大学奇点新媒体研究中心导师

著有：
设计学图书《Prezi 完全解读：从入门到精通》
传播学图书《硬核运营：技术流新媒体养成》