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

如何利用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 圓心之x軸座標
  • - cy 圓心之 y 軸座標
  • - r 半徑
  • - fill 填滿色彩
  • - stroke 圓形外框
結果如下所示:
See the Pen svg circle by Tedutw (@Tedutw) on CodePen.
同理, SVG 也可以用來「畫方形」。標籤中的「circle」要改成「rect」,半徑與圓心的屬性都要換成長與寬,原始碼與結果如下所示:
See the Pen svg rect by Tedutw (@Tedutw) on CodePen.
同理, SVG 標籤改成「line」,x1 與 y1 定義第一點的座標、x2 與 y2 定義第二點的座標,原始碼與結果如下所示:
See the Pen svg line by Tedutw (@Tedutw) on CodePen.
三邊以上的摺線,前端工程師可用 SVG 「polyline」(多點折線)標籤,並為五點定義座標分別為 10 10, 60 60, 110 10,160 60 與 210 10 原始碼與結果如下所示:
See the Pen svg polyline by Tedutw (@Tedutw) on CodePen.
SVG 繪製橢圓形 (ellipse) ,標籤屬性的下法與上述的「circle」類似,差別在於水平與垂直的半徑可以分別使用「rx」與「ry」來定義,原始碼與結果如下所示:
See the Pen svg ellipse by Tedutw (@Tedutw) on CodePen.
三邊以上的形狀,用 SVG 繪製多邊形 (polygon) 的原始碼與結果如下所示::
See the Pen svg polygon by Tedutw (@Tedutw) on CodePen. 你也能成為HTML5教學的化妝師

推薦閱讀:
你也能成為HTML5教學的化妝師

從神奇效果見HTML5教學的實力!

HTML5教學基礎語法教學彙整

暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~

挑對Java課程,讓你從零起點到獨當一面的工程師只需六個月!

神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?

中國IT教育領導品牌 達內教育集團第一家海外授權中心

 

    uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()