公众号svg模板代码大全 (公众号svg代码开发)

你还记得GQ实验室《红了》这篇刷屏文章?

公众号svg代码开发,微信公众号svg代码

如果你注意到的话,你会发现这条图文不需要进行任何的交互,就自动层层展开直到阅读完成,加上精心设计的文字动态效果和走心的文案,一经推出就在朋友圈得到了疯狂转发。

这篇推文最终数据也是现象级的,其中图文阅读400W+,点赞和在看是平时的约40倍,成为GQ实验室2022年阅读最高的文章,并在罗振宇的2022-2023跨年演讲当中作为重要案例被提及。

同样的交互创意,新东方文化圈儿一篇名为《瞧,这很新东方》的文章也实现了刷屏。这篇文章的阅读量达到10万+(后台数据约30-40万),约是平时阅读量的100倍,点赞和在看之和是平时的约500倍。

公众号svg代码开发,微信公众号svg代码

这种被称为SVG交互排版的形式,如今在头部品牌公众号里占比越来越高,不少品牌公众号推文90%以上都有SVG的加持。

在苹果、华为、小米、奔驰、宝马、GQ等公众号的发布会、节日、爆款文章当中,几乎都有SVG交互技术的身影,相比于不带交互的纯文字或纯图片的内容,阅读、点赞、在看不少都达到10倍以上增长。用读者的话说,这样的内容就是创意与技术的融合艺术。

从2017年发展至今,SVG交互排版已有5年多时间,成为破解品牌账号阅读量、互动量下滑的利器。

作为一家创业公司——「小黄人科技」,从2014年成立起,就选择从微信公号排版入手,开发了 iPaiban 图文编辑器,从2017年首创SVG交互排版技术,2020年全网首家推出SVG排版编辑器,试图给公号提供了新的方向,并让传统的图文迸发出更大的价值。

从最初普通的图文编辑器,发展到如今SVG交互图文,iPaiban 给公号提供新方向的同时,也让众多从业者看到新的红利。

本篇文章,我们将主要回答以下几个问题:

  • SVG是什么?
  • 究竟能解决公号什么问题?
  • 又带来什么样的效果?

A轮财经「 细分赛道的隐形冠军 」第12篇,抓住微信公号的代码红利。

主笔/ LBJ

文章架构师/ 花哥

出品/ A轮财经

01.

公号也难逃红利消失

2012年8月,微信公众号平台正式上线。

基于微信的数亿用户,不到2年时间里,微信公号很快为国内最大的内容生产和分发平台,更是吸引无数内容创业者投身这股浪潮之中,小黄人科技创始人唐三藏也是其中之一。

相比其他平台,微信公号这种直接推送内容到眼前的方式,吸引到大量用户的关注。在当时,公众号只要推送内容就能涨粉。

用唐三藏的话说,微信公号那几年是“躺着涨粉”的红利期。公号数量暴涨的同时,小黄人科技旗下产品iPaiban也进入快速增长期,不到2年就拥有了上百万用户。

不过好景不长,由于内容同质化严重、图文审美疲劳等原因叠加,微信公号也避免不了盛极必衰的定律。在2017年前后,公号就进入了瓶颈期,阅读数、打开率、分享率等整体出现下滑。“涨幅变得很困难了,大家开始买量了。”

这种现象背后的一个重要原因在于,图文消息在互动上先天性缺失。微信公号除了转赞评外,内容与用户很难再进一步产生互动,尤其是趣味性互动。再加之H5和短视频的出现,静态图文内容很难和H5、短视频内容丰富的呈现形式进行对抗,图文似乎变得失灵。

有不少账号在微信长图上发力、甚至使用大量Emoji表情在标题、内容上,但收效甚微,依然无法改变图文消息单向传播,无法参与互动的难题。

2016-2017年,公众号阅读转化率就只有10%左右了,红利期结束,不少内容从业人员选择离开公号,转战抖音、小红书等。(截止2022年,很多公号的阅读转化率已跌破1%。)

但作为政府、媒体、品牌官方的发声渠道,离开微信公众号平台不太现实。不过摆在眼前的事实是,传统的文字+图片的排版形式早已无法满足市场的变化需求。

在2017年,对一个已经5岁产品来说已经进入成熟期, 微信公号的图文还能不能玩出新花样、更有创意,也成为所有从业者都在思考的问题, 尤其是企业、品牌等营销方。

02.

黑科技排版激活图文生态

事实上,解题的答案肯定有的,当下SVG排版正在成为行业新的选择。

微信图文的互动性不够,这个问题在圈内早已注意到。而在SVG之前,H5成为很多公众号喜欢的玩法之一,可以开发出滑动、点击、长按、复杂的游戏交互、嵌入音视频等丰富的玩法。比如网易刷屏H5非常多,曾多次达到微信分享的阈值上限而被限流。

但H5也有自身的问题,比如无法在绝大多数公众号图文一键直达,还需要长按二维码或者点击原文链接才能进行交互。但在传播的过程中,每多一个步骤,就会出现用户海量流失的现象,推广的效果就会出现打折。

唐三藏对A轮财经表示,从公众号图文跳转到H5,能有5%左右的转化就算表现很好。从2014年爆发到2017年成熟,一些简单的H5玩法大家早已熟知,套用模板的H5已无法激发用户的传播欲望。而复杂的H5设计和开发成本要高达数十万,且一次试错的时间成本通常要1-2个月,无法快速低成本试错。创意视频的成本和周期也大致相当。

制作一个优质的视频和H5的时间成本是30-50天、金钱成本是10-30万元。假设公众号阅读转化率是10%,从公众号图文跳H5转化5%左右,那只有0.5%的粉丝能看到内容,成本代价高。

如果直接在公众号图文消息里完成交互,虽然交互效果不如H5丰富,但从传播效果来说已然可以满足需求,而且内容质量高的话,用户可以一键关注公众号,转化路径大大缩短。

而能实现这样类似的交互,时间和金钱成本却只要原来的10%,也即3-5天时间,1-3万的费用,那一定会大有市场。这是 iPaiban 团队提出的关键假设。

在提出这个假设后, iPaiban 团队开始进行了长时间测试。在测试中发现,早在2015年技术人员和用户“做着玩”的SVG交互浮出水面,并在2017年7月在滴滴顺风车的一篇名为《:-)》的“空白”图文推送横空出世。

公众号svg代码开发,微信公众号svg代码

用户点进图文后一脸茫然,经过留言区其他用户提醒,才知道要点击空白内容,才会看到一行行文字。绝大多数用户是第一次看到可以互动的文章,而这篇文章参与度爆涨,一时间朋友圈刷屏,最终的推送阅读达到10万+,点赞4000+,而相比同期其他内容的点赞在200-400之间,增加了10-20倍。

此后携程、36Kr、罗永浩等账号纷纷进行了类似交互的尝试,效果都远超平时内容。这让 iPaiban 团队信心大增,并加大研究投入,解决只能进行文字交互的问题。因为企业需要不仅是单纯文字互动,还要有图片、音视频内容的展示具体的产品和使用场景。

在几个月的研发后,2017年底, iPaiban团队正式推出SVG交互图文商用,首批合作的客户就包括了梅赛德斯-奔驰、京东金融、五芳斋、杜蕾斯、一加手机、小米、银联等账号。

而且在正式商用之后,实际比原来假设的时间和金钱成本更低,平均开发时间仅为1-3天,平均开发费用仅为3-5K,可以说实现了超过20倍的效率提升和50-100倍的费用节约,随着更多爆款案例的推出,更多客户被口碑推荐和转介绍而来,相关业务稳步增长。

但市场的认知和接受是一个缓慢的过程 ,而且SVG交互前期能够使用的通常是中大型企业,他们的接受时间也相对较久,爆发式增长迟迟未来。

唐三藏透露,经过两年的市场培育,在2019年时候SVG交互定制的需求迎来一波高峰,仅在圣诞元旦节日期间的需求量就达到平时的6倍多,所有员工齐上阵也满足不了全部需求,未来仅靠人工定制无法消化市场的需求,产品标准化必须提上日程。

早在2018年SVG商用初期,内部就已经讨论过产品化并进行了技术论证,但由于需求不强,优先级自然没有提到最高。

2020年春节期间,疫情刚爆发,iPaiban团队已经正式组建团队进行产品研发,并于当年9月进行了内测,11月公测,12月正式推出全网第一家SVG专用编辑器——SVG黑科技排版(x.iPaiban.com)。

此前iPaiban团队服务过的品牌已经达到500多家,定制过的案例超过3000个,基于大量实战经验和踩坑教训打磨的产品,也是被用户需求倒逼出来的产品。产品一经推出就有不少老客户付费支持,也让之前因价格问题犹豫的用户形成转化,推出首月就完成了数十万元销量。

截止2022年12月,SVG编辑器的组件、组合数量均为行业数量第一(1300+)、模板数量第一(2万+),推出的首款SVG品牌案例库案例数量第一(16万+)。

作为国内领先的公众号图文排版技术服务商,iPaiban 已经与微信公号生态形成了深度绑定。当 iPaiban 将SVG交互案例第一次介绍给微信团队时,他们也惊讶于在微信图文功能已经被重重限制与屏蔽之下,居然还能开拓出如此丰富的玩法,简直是“戴着镣铐跳舞”,之后微信团队的公众号“微信派”,每年也要制作大量SVG交互。

奔驰汽车的公关团队负责人也表示:如果没有SVG,无法想象现在大家运营公众号时有多痛苦。

SVG拓宽了广大公众号运营人员的想象力和创作力,也给微信图文生态带来新的生机。

03.

打造一套标准化体系

制作一篇SVG会很难吗?

很多人听说SVG需要编辑代码,就担心太难学不会。

在唐三藏看来,这种担心完全是没有必要的。即使是零基础,借助i排版的SVG编辑器,也能让0基础的运营者几分钟轻松制作交互图文。

说起来容易,但想要实现这个效果确实很难,光编辑器的底层架构就*翻推**了不下5次,要考虑到将来的拓展性和兼容性,所有的组件模板都要尽可能标准统一。 要想使用的门槛降低,关键在于标准化形成,i排版构建了一套产品和服务标准化的体系。

从产品来看,i排版拥有全网最丰富的SVG组件和模板,组件1300+,可一键套用的模板总数1.7万+,组件分类的种类50+。在组合样式上,可以实现无限嵌套,不需要复杂设置,大部分情况下换图即可完成,可以说上手超级简单,市面上90%的交互效果都可以十分钟左右完成,加上调整,30分钟完成一篇复杂交互不是难事。

公众号svg代码开发,微信公众号svg代码

另外强大的创意案例库,也是i排版重要的“杀手锏”,目前SVG品牌创意案例达到16万+。案例库里包含16个主要行业,200多个节日,以及各种SVG创意场景,比如大型发布会,庆典活动,新品上市,成果展示,营销活动、节日活动等……基本所有行业都可以找到相关案例样本,并支持分类查询。平均每周要收录3000-5000个新案例。

案例库一方面可以为运营者提供各种创意的参考,应对各种运营场景需求。另一个方面通过不断汇集各种品牌案例,又可以进一步扩大创意案例库的池子,形成正向循环。这也不断构建和巩固i排版的护城河,始终保持行业领先地位。

除此之外,i排版还进行很多细节功能的升级。比如支持一键还原,所有通过使用过i排版组件制作出SVG,都可以一键还原到编辑器里面去,目前支持20000+案例一键还原。“如果想要做同款,只要把素材图替换一下就行”。

公众号svg代码开发,微信公众号svg代码

(图片来源i排版公号)

从服务来看,i排版发布了上千条关于SVG制作的详解教程,包括图文和视频,并且经常向行业分享、拆解爆款案例,给运营者们提供学习制作的机会。比如i排版发布的《2022年Top50品牌SVG交互图文案例盘点(全10W+)》中,对优质SVG案例做了系统总结。

另外i排版也会组织培训学习,实现线下的教学,并有社群1对1的指导服务。

案例库-数据报告-编辑器-定制-培训,每个环节都可以为其他业务提供支持和导流,形成一套业务和产品的闭环。

把每个制作步骤SOP化,给全行业打造标准化的产品。当标准化体系搭建完成后,剩下事情就是时间的积累沉淀。

这个过程很难,结果却很甜。iPaiban 坚持并做了下来,也让其始终处于业内领先位置。如今 iPaiban 积累了数千家中大型企业客户,成为政务媒体、汽车、奢侈品、金融保险、互联网、医疗等行业头部公号的服务商。

04.

SVG是一条“数据鲶鱼”

如今越来越多的品牌在选择图文SVG化,这样趋同选择的重要原因是它能带来明显的数据提升。

i排版给出了相关数据,目前头部品牌的SVG比例普遍达到90%以上,有不少账号达到了100%SVG化,例如苹果、OPPO、vivo、奔驰、宝马、Prada普拉达、GUCCI。而在以文字为主的传统媒体里,比如央视新闻、新闻联播等,每年都会发布超过100篇SVG交互图文。

数字不会说谎,SVG在数据提升程度有多大?

在央视新闻2022年整体数据可以直观看见,SVG文章与普通文章对比,阅读都是10万+的前提下,点赞提高35-41%,在看提高60-66%。

公众号svg代码开发,微信公众号svg代码

公众号svg代码开发,微信公众号svg代码

而定制的案例效果更好,以2022年12月1周内推送的5条定制与国庆定制为例,点赞量提高3.6-17倍,互动数提高1-5倍,这是在与众多的突发新闻、重大新闻比较下取得的成绩,足以说明SVG效果显著。

公众号svg代码开发,微信公众号svg代码

公众号svg代码开发,微信公众号svg代码

公众号svg代码开发,微信公众号svg代码

比如GQ实验室,在i排版发布的《GQ实验室公众号2021年-2022年数据报告》里显示,从2021年到2022年,GQ的头条SVG含量增加了近90%,图片总数增加了40%多。所有文章当中SVG的含量,从2021年的40%,提高到62%,这在媒体类型的账号当中占比可以说相当高了。

GQ实验室的SVG交互案例也成为了广告营销创意人员参考的重要来源。

公众号svg代码开发,微信公众号svg代码

再以 Apple 公号为例,2022年,Apple 头条和非头条的SVG含量分别相比2021年增加了30%和78%左右,平均每条图文图片数更是增加了60%左右。SVG文章的占比从86%进一步提高到96%,可以说Apple的公众号内容几乎篇篇都SVG化了。

公众号svg代码开发,微信公众号svg代码

据 iPaiban 数据统计,从整体来看,SVG交互图文相较静态图文平均阅读量能提升20-30%,爆款文章甚至能够提升上百倍。平均在看数能够提升75%,评论互动也能提升20%。

在《2022年数据暴涨10倍的15个创意图文案例》一文中,iPaiban 精选了阅读超过10万+的15篇案例,数据分别相对于该账号的日常内容提高了10倍以上。

在红利退去的存量市场里,任何能带来增量的变化因素,都是不容错过的。 对于微信公号从业者来说,在已经验证效果的前提下,早点入局就能早点享受流量的红利。

在微信公号整体下滑的局势下,SVG交互图文像数据池里的“鲶鱼”,不断在提升公号的各项数据指标。

05.

一个远未饱和的市场

相较于传统的定制H5或创意视频,从制作效率看来,SVG交互图文有着十倍的提升。

从成本结构来看,SVG交互图文的定制仅需数千元,而H5和视频则通常要数万甚至数十万元,符合颠覆行业的“十倍理论”。

值得一提的是,在此基础上2020年小黄人科技全网推出的i排版企业版 - SVG编辑器,对SVG定制业务再次进行升级创新,将一篇图文的制作时间,从原来的1-3天变成了30分钟以内,费用也只要原来的几十分之一。

对于SVG制作,iPaiban 提供两种方式:

一种方式是用户购买组件或者会员,使用排版编辑器独立完成操作;

另一种方式是定制化,由技术开发人员编写SVG代码,实现创意策划想要达到的效果。

第一种只需要成为其会员,就可以实现,最低费用在2400元/年,购买最多的则是5980元/年的完整版。

而定制版通常效果会更佳,价格方面会根据等级来进行收费,但费用也不会太高。

公众号svg代码开发,微信公众号svg代码

虽然越来越多的头部品牌方都已经率先入场,但从整体来看SVG还处于早期阶段。唐三藏认为,最大的阻力还是在于用户的认知和制作成本。

如今iPaiban 已经与微信官方、头部政务媒体(中国政府网、央视新闻、新闻联播、新华社、学习强国、国家移民管理局、央行、上海发布、福建发布、成都发布、合肥发布、成都发改委、广州日报、长江日报、等)、头部企业(奔驰、法拉利、雷克萨斯、别克、林肯汽车、蔚来、大众汽车、福特、星巴克、麦当劳、喜茶、lululemon、Gucci、Zara、华为、OPPO、小米、Visa、李佳琦等数千家)、知名高校组织(北京大学、清华大学、武汉大学、中山大学、复旦大学、上海交通大学、华东师范大学、中国农业大学、西湖大学、上海财经大学等)进行了合作。

有了官方以及品牌的合作案例,可以说形成了一个强的背书。同时 iPaiban 拥有数十项专利和软件著作权,还是国家高新技术企业、双软件企业,能够有效的帮助客户消除风险顾虑。

从整个微信公号生态来了看,SVG的想象力还没有完全打开。

对于未来发展,唐三藏认为行业的渗透率还不高,接下来几年还是快速增长期,SVG交互图文市场离饱和还早。

06.

技术为品牌赋能

随着技术的不断进步,微信排版的样式也在不断进化。公号从纯文字到图文,到长图,再到代码交互形式。

传统的图文排版像是杂志,用户处于被动接受信息的状态。而在交互图文的出现,让用户从被动到主动,从旁观到参与,进而产生与品牌内容互动。

无互动不营销,这是唐三藏经常强调的一句话。SVG的出现极大改变了微信公号的互动效果,天然的就比普通的图文有更好的这种传播力,也让营销创意有了更多的可能性。

就目前而言,交互图文作为微信图文的新方式,相对于传统的运营来说,可以让品牌与用户之间的粘度更高,产出的内容更加优质,排版更有新意,相应的数据表现也更好。

在2022年进行的一次有数百家广告代理公司参与的调查问卷显示,有超过80%的 iPaiban 编辑器用户年收入提高超过15万,超过20%的用户收入提高超过50万。

对于品牌来说,营销是一个全局,用户互动参与度越高,品牌粘性越强。在唐三藏看来,技术要为品牌赋能。未来要沿着技术这条路,去解决品牌在营销遇到的问题。

SVG图文是技术赋能品牌的第一步,在更为广阔的创意、内容营销行业里,还有大量可以用技术来提高效率、节约成本、标准化生产的可参与环节。

小黄人科技也将秉承这一路线,从案例库到数据报告等方面,还会推出更多技术、数据的成果,从而更好的为品牌营销赋能。