您在這裡

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 標籤。
  • 自動將網址與電子郵件地址轉變為連結。
  • 自動斷行和分段。