SVG大神专访：计育韬，开创行业更要守护行业。

长期从事教学工作的计育韬老师自 2016 年与微信团队协作调试，颁布 SVG AttributeName 白名单以来，已累计讲授了 300+ 场次的大学讲座，更进行了不计其数的线上公益分享活动，间接或直接孵化了大批业内的顶尖工作室和个人开发者。本期访谈，让我们回到公众号 SVG 交互技术诞生的原点，探寻行业的学术初心。

往期访谈：

SVG大神专访：感谢科蚪，和你天马行空的特效设计。mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247499552&idx=1&sn=ec81a47ea2408ed0874dab35f4e05218&chksm=c325471af452ce0c684e9ccbf82eebc6dc7d1b7cb4b86377b09e72c6093ea5cd1fe5ea6b59a9&scene=21#wechat_redirect正在上传…重新上传取消https://link.zhihu.com/?target=http%3A//mp.weixin.qq.com/s%3F__biz%3DMzk0NDIyMjU0OQ%3D%3D%26mid%3D2247499552%26idx%3D1%26sn%3Dec81a47ea2408ed0874dab35f4e05218%26chksm%3Dc325471af452ce0c684e9ccbf82eebc6dc7d1b7cb4b86377b09e72c6093ea5cd1fe5ea6b59a9%26scene%3D21%23wechat_redirect

SVG大神专访：荒村，就是原创精神的代言人。mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247500477&idx=1&sn=58f68122c0a5c687e53714c0bacec18b&chksm=c3257a87f452f3917fe68a490e432588c1ec4b67034ff6eccb27c307996e579bc2bd0782691a&scene=21#wechat_redirect正在上传…重新上传取消https://link.zhihu.com/?target=http%3A//mp.weixin.qq.com/s%3F__biz%3DMzk0NDIyMjU0OQ%3D%3D%26mid%3D2247500477%26idx%3D1%26sn%3D58f68122c0a5c687e53714c0bacec18b%26chksm%3Dc3257a87f452f3917fe68a490e432588c1ec4b67034ff6eccb27c307996e579bc2bd0782691a%26scene%3D21%23wechat_redirect

SVG大神专访：YUTU，这个学习效率如风的男人。mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247500978&idx=2&sn=82fef70094446128362bc41e255eb42a&chksm=c3257c88f452f59ee533d531c88ad1838a9452e2eeeb018f23a82f517ef7b7e0d2525189d356&scene=21#wechat_redirect正在上传…重新上传取消https://link.zhihu.com/?target=http%3A//mp.weixin.qq.com/s%3F__biz%3DMzk0NDIyMjU0OQ%3D%3D%26mid%3D2247500978%26idx%3D2%26sn%3D82fef70094446128362bc41e255eb42a%26chksm%3Dc3257c88f452f59ee533d531c88ad1838a9452e2eeeb018f23a82f517ef7b7e0d2525189d356%26scene%3D21%23wechat_redirect

SVG大神专访：ZER0N，不容小觑的斜杠青年团队！mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247501450&idx=1&sn=a3ef6a7238de4e06cbce315c06a3d73c&chksm=c3257eb0f452f7a6c988dfd664ede1b2bf10fd617b15a765d15936968bb2dbc9101bbff9c75a&scene=21#wechat_redirect正在上传…重新上传取消https://link.zhihu.com/?target=http%3A//mp.weixin.qq.com/s%3F__biz%3DMzk0NDIyMjU0OQ%3D%3D%26mid%3D2247501450%26idx%3D1%26sn%3Da3ef6a7238de4e06cbce315c06a3d73c%26chksm%3Dc3257eb0f452f7a6c988dfd664ede1b2bf10fd617b15a765d15936968bb2dbc9101bbff9c75a%26scene%3D21%23wechat_redirect

SVG大神专访：三千喵，从设计师到开发者的全栈汉服玩家mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247501941&idx=2&sn=1ae751cd84001005db2145a15c02f0c7&chksm=c325704ff452f9599351ff5d26d40e7fc8d8d46c1cfc91721fff27d02a1215f64a3813408454&scene=21#wechat_redirect正在上传…重新上传取消https://link.zhihu.com/?target=http%3A//mp.weixin.qq.com/s%3F__biz%3DMzk0NDIyMjU0OQ%3D%3D%26mid%3D2247501941%26idx%3D2%26sn%3D1ae751cd84001005db2145a15c02f0c7%26chksm%3Dc325704ff452f9599351ff5d26d40e7fc8d8d46c1cfc91721fff27d02a1215f64a3813408454%26scene%3D21%23wechat_redirect

SVG大神专访：重量级选手，赵阳登场！mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247502512&idx=3&sn=903982b9a0e9cb862026f3c6b48f084a&chksm=c325728af452fb9c54d538122c5a811ce40b6199aae91939b5ba0b5d9245c2c48708bb9bd095&scene=21#wechat_redirect正在上传…重新上传取消https://link.zhihu.com/?target=http%3A//mp.weixin.qq.com/s%3F__biz%3DMzk0NDIyMjU0OQ%3D%3D%26mid%3D2247502512%26idx%3D3%26sn%3D903982b9a0e9cb862026f3c6b48f084a%26chksm%3Dc325728af452fb9c54d538122c5a811ce40b6199aae91939b5ba0b5d9245c2c48708bb9bd095%26scene%3D21%23wechat_redirect

SVG大神专访：灵感源源不断，2H是怎么做到的？mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247507662&idx=1&sn=987990ed897bfa7e81d210326f5c1971&chksm=c32566f4f452efe28e3a55e71bcf24fcd4099fef73692840600ca803d577535634b293d4d5d2&token=95418570&lang=zh_CN&scene=21#wechat_redirect正在上传…重新上传取消https://link.zhihu.com/?target=https%3A//mp.weixin.qq.com/s%3F__biz%3DMzk0NDIyMjU0OQ%3D%3D%26mid%3D2247507662%26idx%3D1%26sn%3D987990ed897bfa7e81d210326f5c1971%26chksm%3Dc32566f4f452efe28e3a55e71bcf24fcd4099fef73692840600ca803d577535634b293d4d5d2%26token%3D95418570%26lang%3Dzh_CN%26scene%3D21%23wechat_redirect

SVG大神专访：设计/开发/授课三栖的小雪，强者如斯。mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247509948&idx=1&sn=add9ab91e45779bd57888da161358be7&chksm=c3251f86f4529690d1df7d69fa6c905cb2da0d416a9f6f13a934a43286122552dedaff41c18c&scene=21#wechat_redirecthttps://link.zhihu.com/?target=http%3A//mp.weixin.qq.com/s%3F__biz%3DMzk0NDIyMjU0OQ%3D%3D%26mid%3D2247509948%26idx%3D1%26sn%3Dadd9ab91e45779bd57888da161358be7%26chksm%3Dc3251f86f4529690d1df7d69fa6c905cb2da0d416a9f6f13a934a43286122552dedaff41c18c%26scene%3D21%23wechat_redirect

关于计老师

教务与研究一直都是计老师的工作重心，尽管已经创作过数千份 SVG 交互设计，但论其中他自己最喜欢的，往往是具有社会价值意义的作品：

清华大学带你一图读懂「元宇宙」mp.weixin.qq.com/s?__biz=MzU3MDIyODE4NQ==&mid=2247530272&idx=1&sn=9e575411f7efab3ebde919e216dd3901&chksm=fcf09b96cb87128095b9ac12300995919681f48c1251f708eb5d049fb98ce1c9593106745b54&scene=21#wechat_redirect正在上传…重新上传取消https://link.zhihu.com/?target=http%3A//mp.weixin.qq.com/s%3F__biz%3DMzU3MDIyODE4NQ%3D%3D%26mid%3D2247530272%26idx%3D1%26sn%3D9e575411f7efab3ebde919e216dd3901%26chksm%3Dfcf09b96cb87128095b9ac12300995919681f48c1251f708eb5d049fb98ce1c9593106745b54%26scene%3D21%23wechat_redirect

小红花 × = ?mp.weixin.qq.com/s?__biz=MjM5OTc3OTQ5NA==&mid=2662396740&idx=3&sn=29a8620f96504c063775cc271458a220&scene=21#wechat_redirect正在上传…重新上传取消https://link.zhihu.com/?target=https%3A//mp.weixin.qq.com/s%3F__biz%3DMjM5OTc3OTQ5NA%3D%3D%26mid%3D2662396740%26idx%3D3%26sn%3D29a8620f96504c063775cc271458a220%26scene%3D21%23wechat_redirect

创意设计：SVG数据可视化交互图文x扶贫专题mp.weixin.qq.com/s?__biz=MzU3MDIyODE4NQ==&mid=2247511524&idx=1&sn=8ebd16b3ebf784a07fc1cf36912ac592&chksm=fcf04152cb87c844c72b4f128323e7c61914e2c3b60bfb72f632f6210eefc00cf4db35e29159&scene=21#wechat_redirect正在上传…重新上传取消https://link.zhihu.com/?target=http%3A//mp.weixin.qq.com/s%3F__biz%3DMzU3MDIyODE4NQ%3D%3D%26mid%3D2247511524%26idx%3D1%26sn%3D8ebd16b3ebf784a07fc1cf36912ac592%26chksm%3Dfcf04152cb87c844c72b4f128323e7c61914e2c3b60bfb72f632f6210eefc00cf4db35e29159%26scene%3D21%23wechat_redirect

目前，计老师作为 E2 平台的技术顾问之一，长期为广大用户答疑解惑，也会帮助部分有紧急问题的会员免费修改代码。同时，他依然积极推荐大家了解定制级作品的范例，引荐其他优秀的资深开发者，让平台用户始终保持山外青山楼外楼的学习视野。

访谈实录

1. 计老师您好，2016 年是 SVG 行业真正的起点，可以分享一下当年您制定行业技术白名单规则时的故事吗？

计育韬回答：针对 SVG 技术的研究，我大概是 2014 年时候启动的，当时共同参与的还有包括 HOMYi 平台以及江南大学的技术大神 Y7。2015 年，我和 Y7 便在复旦大学邯郸路校区「鹿鸣书店」向学生们讲授相关的培训课程，可以说最早期只有我们两个人在具体进行这方面的技术详细实践。

到了 2016 年，我开始通过各大高校的公益巡讲进行普及，将它作为授课内容的一个小环节。记得是恰好途径厦门嘉庚学院前后吧？那几天跟微信团队的朋友们在聊图文样式承载能力的问题，我就提出了基于 SVG 进行类似压力测试的形式，并筛选出一批适合在微信承载范围内可行的最小单元动画标签。

这个想法与微信团队一拍即合，于是我带领厦门嘉庚学院的喆喆连续几个晚上一起测试，我进行实验代码的构建，他负责多终端的检验和录入，最后诞生的《微信下 SVG AttributeName 白名单》EXCEL 表格，也是喆喆制作的，你们也可以读一读《“让青岛的海风，吹走你的BUG吧。”》看到其中的回忆。

完成测试后，微信团队就在图文能力前端进行了实装，我也更新了巡讲的讲义，加入了这部分全新的行业知识。

2. 您为何会选择这个方向的研究呢？毕竟那时这个技术领域应该非常冷门吧？

计育韬 回答：你要说我预料到了它如今的繁荣业态，那必然是不现实的。但人之所以能发挥主观能动性进行探索，甚至开创一个全新的领域，更多是依赖原创精神和共享精神。

当年 Y7 和我一样都是脑洞非常大的人，在图文中创作了很多前所未有的创意雏形动画，而随着设计的深入我们又意识到亟需技术层面的整理与总结。

而我个人非常喜欢写「教程」，就像此前国内第一本 Prezi 教程图书也是我出版的一样，我认为探索一个新领域最好的办法就是集结教程——这样你就会以一种更系统性的方法论去归纳原本未知的世界，且通过这种共享行为能更好帮助其他人来快速突破行业壁垒，鼓励他们参与其中——行业的繁荣不可能只靠寥寥几人，它必然需要先行者能将足够的知识无偿共享。

从技术层面讲，Prezi/PPT 的本质是 XML 框架，恰好和 SVG 同源。这种「古早」的图形编码以前一般只被用于 PC 网页的数据可视化层面，但我基于对 XML 本身的充分理解，转化到图文内就相对得心应手。

综上，基于学术层面自身的线性逻辑关系，结合对原创的坚持和一种习惯性的共享，才让我在业余能对这个领域有所贡献吧。

3. 您前面提到了今年举办的第一届 SVG 开发者大会活动，这么多顶尖从业者是如何有机会聚集起来的？

计育韬 回答：开发者大会的构想其实疫情前就有了喔！因为 2018 年时业内已经相对繁荣，各行业的头部品牌都开始在 SVG 范畴「内卷」，而彼时成立的几乎所有工作室都与我有渊源（我的学生们开办的居多），我也辅导过多个编辑器平台应用新技术，所以我和阔野文化的主理人就寻思着是否可以聚一聚，让大家在忙碌的业务工作之外，一起探索新的理论高度。

可惜由于疫情的到来，大会一直没有操办起来，直到今年才有机会由阔野文化在青岛主持。当然，这里也很感谢你们 E2.COOL 和 135 编辑器的参与！秀米由于紧急的工作安排原因没有莅临，期待明年可以相见吧！

4.作为行业的开创者，您一直热衷于孵化各个新锐工作室，那么针对有这方面创业想法的青年您有什么建议吗？

计育韬 回答：如你所说，能看到自己的学生们获得成功，无论是世俗意义上的「年如百万」还是技术层面上的巨大突破，这都是令我高兴的事情。而方才我已经提到，行业的繁荣需要足够多的资深玩家，所以我的第一个建议就是：不要光想，动手做起来！

结合《交互新媒体创作者行业道德宣言》，无论个人或机构都有机会从零开始成为行业先锋。而我作为行业守护人和一位教育者，无论你们遇到任何困难（比如业绩层面的困境或版权层面的损失等）都会全力支持你们。

那么到了具体的创业层面，我希望同学们都秉持原创精神和共享精神参与 SVG 领域，并且在合理的范畴下积极参与市场竞争，精进自己的水平。

原创是一件非常简单的事。如果你觉得原创很难？做任何 SVG 设计都需要先找 Reference？或者试图抄袭其他案例？那么你的主要问题大多在于理论基础太过薄弱。这一点我非常推荐你们阅读《同款模板大全&创意方法论》，它很直观地说明了一切创意基于设计学四大公理的原则。

好的创意必然不是无中生有，而是从严谨的知识体系内演化而成，哪怕落实到操作层面诸如「十步联想法」等，都充分说明了优秀的创意皆有科学的生产流程。

共享是一件不会吃亏的事。独守一隅甚至试图构建壁垒的市场参与者，在 SVG 领域内都已走向落寞；而积极探索并乐于共享知识的市场参与者，都随着思维之间的碰撞在更高速地迭代，推进着行业的新浪潮新趋势。

无论是研究新的教学体系，还是传播新的技术特征，都可以是共享的具体表现形式。这里我还特别推荐 iSVG 和 svg.show 两个免费的案例搜索工具，它们也是行业共享精神的实体承载。

也推荐大家了解更多走在行业前沿，将原创与共享精神发挥到极致的新青年团队：符号互动、意符文化、阔野文化、归零心态、乙木互动、IF 设计式、三千喵、语图工作室等……

5. 您和微信团队长期保持合作，可否介绍一下未来图文内交互设计领域技术的发展方向？

计育韬 回答：行业业态的发展和基础技术的发展是两个概念，前者取决于我所说的从业者的整体能力，后者取决于平台与生态的构建者决策。近几年，我与微信团队的协同更多工作依然主要在于对「边界」的测试和「漏洞」的封堵，毕竟你要知道会有一些从业者为了生计或者其他特殊目的铤而走险，试图突破我们设定的白名单框架进而威胁到微信公众平台自身的安全。

所以，也希望每一位从业者明白，任何试图违背微信公众平台交互原则初衷，仅仅为了某些花哨的形式化设计而试图破解或绕过既有平台规则的对抗开发行为，都会受到严厉地管控甚至制裁。
那么从这个角度看，我认为行业的发展方向更多在于对 CSS3 结合 SVG 的复合结构研究，以业内大神@科蚪的「SVG 无限选择器」为典型，走到 SVG 之外，充分挖掘 CSS3 更广阔领域的参数能力，相信还会实现 SVG 交互设计的形式革新。

6.在第一届 SVG 开发者大会上，我们也了解到了您当年一句 pointer-events 的引入变革了行业形式的事件，那么接下去您有新方向的研究或其他打算吗？

计育韬 回答：变革谈不上。长期以来 SVG 作为一项业余兴趣爱好，更多时候我的研究只在于带给大家一些惊喜的「小礼物」，有点像一个古板的圣诞老人吧！在偶尔的时刻出现，让大家有不失望的喜悦。至于 SVG 层面的研究，因为尚未形成准确的技术方法论范式，所以这里我只提三点：

1）原生动画能力。参考我的实验性发布《电子音乐 - （三体）重塑雕像的权利》

2）perspective 3D（业内一般称呼为「裸眼 3D」）的应用还可以有更多演化。除了我引入的「地平线模式」之外，有兴趣的开发者不妨再深度思考一下，比如极慢与极快差速的应用可能性。

3）文本动画。回到技术发展的最初，早期我就创作过《⚠警告！！！一只蜜蜂飞进了你的手机！⚠》这样的实验模型，去年也发布过让很多同学惊艳的《来卷啊》。但文本动画的创作一直鲜有开发者涉足，一方面代码工作量过大，另一方面策划难度极高。

本期的专访中计老师为我们娓娓道来行业的发展故事，给准备进入行业的新人们提供了可靠的宝贵建议，更展望了行业未来的前进方向。我们也欢迎更多此前没有接触过交互设计的运营人前往 E2.COOL 编辑器着手实践。同时，如果你的品牌有意指定计老师作为定制开发力量，也欢迎联系我们的平台客服，进一步沟通高级定制服务。