關於 SVG

目前的前端技術中,SVG 與 Canvas 是兩個用來描繪圖形最主要的功能。SVG 是 Scalable Vector Graphics 的縮寫,中文是可縮放向量圖形。

想要用SVG描繪圖形,必須先配置 svg 標籤,並且於其中配置所要描繪的圖形標籤,例如要描繪圓形,只需於其中配置 circ 子標籤,並設定其相關屬性即可,如下式:

<svg>
    <circle cx="100" cy="100" r="30" stroke="red" stroke-width="4" fill="yellow"> </circle> 
</svg>

每一個 circle 標籤會呈現一個圓形,其中的 cx,cy為圓點坐標, r 為半徑,stroke 為框線顏色,stroke-width 則是框線粗細,以下為此段 circle 標籤設定呈現的結果。



SVG 與 Canvas 同樣都能用來描繪圖形,不過SVG以標籤的形式進行圖形的配置,Canvas 則必須透過 JavaScript 進行運算,SVG 本身的描繪結果是向量圖,不會有失真的問題,當螢幕尺寸改變時都能維持一致的圖像品質,Canvas 一旦描繪完成解析就固定了,如果將內容放大便會失真,這是兩種繪圖技術的主要差異。以下為放大上述圓形的畫面,其中的線條依然保持圓滑。



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

1. SVG 與圖形描繪
2. SVG 文字輸出初探
3. SVG 描繪圖片
4. SVG 描繪不規則路徑

沒有留言: