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的關系圖、标簽雲、排行榜等展示。
评论