【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。

認識 SVG

SVG 是 Scalable Vector Graphics 的縮寫,中文是可縮放向量圖形,透過標籤配置完成圖形定義與呈現,由於是向量圖形,因此特別適合需要彈性縮放內容的設計需求,尤其現代 Web 應用必須適應尺寸不一的裝置呈現環境, SVG 因此是繪圖的首選技術,例如統計圖表的設計等等,《SVG 快速入門》提供學員學習利用 SVG 繪製基本圖形的入門知識,方便後續 D3 圖表製作的學習。

目前的前端技術中,SVG 與 Canvas 是兩個用來描繪圖形最主要的功能,不過SVG以標籤的形式進行圖形的配置,Canvas 則必須透過 JavaScript 進行運算,SVG 本身的描繪結果是向量圖,不會有失真的問題,當螢幕尺寸改變時都能維持一致的圖像品質,Canvas 一旦描繪完成解析就固定了,如果將內容放大便會失真,這是兩種繪圖技術的主要差異。

以下是 SVG 繪製的圖形,如你所見的,右圖放大之後,線條依然保持圓滑,維持原來的解析度。


相較於 Canvas ,一旦描繪完成解析度就固定了,與如果放大會呈現狀的結果,以下是放大SVG與Canvas 兩種技術描繪的圓形結果。


上方是 SVG 描繪的圓弧,還是維持平滑外觀,下方則是 Canvas ,出現鋸狀結果。

SVG 由於本身是標籤的特性,可以輕易的結合  CSS 與 JavaScript ,實作動態效果,輕易的整合進 DOM 文件當中。

描繪 SVG 圖形首先必須配置一個svg 標籤。

<svg style="background-color:#ecf0fc;">

</svg>

這會在網頁上配置一個 SVG 繪圖區塊,如以下 Jsfiddle 視窗中執行結果所呈現的淡色矩形區塊。



這塊淡藍色的矩形區域,是 svg 標籤定義用來描繪圖形的可視範圍。如果要指定描繪圖形的可視範圍大小,指定 width 與 height 屬性即可。

<svg style="background-color:#ecf0fc;" width=600 height=180>

</svg>

這段標籤設定 width 屬性為 600 而 height 屬性為 180 ,因此我們得到一個寬度為 600 ,而高度為 180 的 SVG 繪圖區域。



svg 標籤與一般的 HTML 標籤無異,同樣可以透過  style 屬性設定樣式,不過舉凡 SVG 相關的繪圖標籤,均有專用的屬性,以支援視覺呈現或是圖形描繪相關作業,這裏的 width 與 height 屬性即是一例,這些屬性直接於標籤內部設定即可。

後續當我們討論其它更多的 SVG 相關標籤時,會看到更多的屬性項目與設定效果。



沒有留言: