当前位置

SVG图形技术运用

James Qi 在 2021年2月20日 - 14:34 提交

SVG是Scalable Vector Graphics三个英文单词的首字母缩写,意为“可缩放矢量图形”,以前在维基百科汉字笔顺库等地方常见到,在我们做EmojiAll.com项目中也下载到好几个厂商为Emoji制作的SVG图

然而我们以前还没有自己生成或者绘制过SVG图,直到去年底我们想在EmojiAll网站添加Google Trends数据,我们通过第三方API获取到Google Trends数据后,比较了eChart、Canvas、PNG、GIF、SVG等多种方式,最后确定用SVG来绘制矢量图,由此认识到SVG的兼容性很好、支持AMP、速度快、代码少、功能强、动态效果容易实现等。

于是这段时间把emoji网站上需要实现的标签云、关系图、各种排行榜、分布图等都用SVG来实现,下面来展示两个SVG图形的例子:

要想查看上面SVG的源代码,可以在浏览器中点击鼠标右键查看页面HTML源代码,就包含了SVG图形的源代码。

因为我的博客中没有包含动态效果需要的CSS内容,所以上面的SVG代码做了少许修改,显示为静态图片,如果要查看带有动态效果的原始SVG图片,可以点击上面的图片进入emojiall.com网站的排行榜列表,查看更多SVG图形例子。

附上与SVG相关资料的参考链接:

我在接下来的几篇博文中还会记录用SVG来实现Emoji的关系图、标签云、排行榜等展示。

自由标签:

添加新评论

Plain text

  • 不允许使用HTML标签。
  • 自动将网址与电子邮件地址转变为链接。
  • 自动断行和分段。