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相关资料的参考链接：
- Wikipedia: Scalable Vector Graphics
- 维基百科: 可缩放矢量图形
- W3School: SVG 教程
- W3C: Scalable Vector Graphics (SVG) 2
我在接下来的几篇博文中还会记录用SVG来实现Emoji的关系图、标签云、排行榜等展示。
评论