生活必備咖啡因程式碼-店長Yui大小事

如何利用HTML5的SVG取代點陣圖?讓資深前端工程師告訴你!!

何謂 SVG?

因為過往網頁設計常使用的圖片檔如 jpg、png、gif 等都是點陣圖模式，但是時下流行的 RWD 響應式網頁可隨著螢幕調整網頁布局，點陣圖隨著螢幕大小縮放就會有模糊失真的疑慮，因此HTML5的向量的 SVG 是不錯的解決方法。 SVG（Scalable Vector Graphics，可縮放向量圖形）是 W3C 制定的開放性網路標準之一，此圖片格式再網頁中能以向量格式呈現圖片。設計師可先在 Adobe Illusrator 中畫好向量圖形並存成 SVG 檔，在放在網頁中。運用方式就跟 .jpg、.png、.gif 等圖片檔一樣，但不同的是 SVG 檔不會因尺寸的改變而失真，日後要修改時也可直接開啟檔案修改，相當方便。

如何置入 SVG 影像到網頁中?

如同 .jpg、.png、.gif 的方式，SVG 圖檔使用 img 標籤被置入到 HTML5 檔中，如下方所示：

<img src="image.svg" alt="" height="300" />

使用 SVG 畫圖形

要用 SVG 畫出簡單的圖形，首先前端工程師要使用 SVG 標籤製作「畫布」。要賦予其畫布的長寬 (width、height) 屬性，如下例所示：

<svg width="1000" height="1000"></svg>

在此我們先舉「畫圓形」為例，如下所示：

<svg width="2000" height="2000">
   <circle cx="80" cy="80" r="50" fill="magenta" />
</svg>

• - cx 圓心之ｘ軸座標
• - cy 圓心之 y 軸座標
• - r 半徑
• - fill 填滿色彩
• - stroke 圓形外框

結果如下所示： 同理， SVG 也可以用來「畫方形」。標籤中的「circle」要改成「rect」，半徑與圓心的屬性都要換成長與寬，原始碼與結果如下所示： 同理， SVG 標籤改成「line」，x1 與 y1 定義第一點的座標、x2 與 y2 定義第二點的座標，原始碼與結果如下所示： 三邊以上的摺線，前端工程師可用 SVG 「polyline」(多點折線)標籤，並為五點定義座標分別為 10 10, 60 60, 110 10,160 60 與 210 10 原始碼與結果如下所示： SVG 繪製橢圓形 (ellipse) ，標籤屬性的下法與上述的「circle」類似，差別在於水平與垂直的半徑可以分別使用「rx」與「ry」來定義，原始碼與結果如下所示： 三邊以上的形狀，用 SVG 繪製多邊形 (polygon) 的原始碼與結果如下所示：：