畫出簡單的 SVG 向量圖形

HTML 支援繪製 SVG 向量圖形的功能,究竟要怎麼使用呢?

SVG 向量圖形

SVG(Scalable Vector Graphics)指的是可縮放向量圖形,與 JPG 、 PNG 等點陣圖最主要的差異在於。縮放時不會因為圖形解析度而產生模糊,導致邊界出現鋸齒的窘境,因此常用於品牌 LOGO、圖示 Icon 等等。

通常,我們會透過 Adobe Illustrator 繪製 SVG 圖形,但其實,我們也可以直接在 HTML 中繪製 SVG 元素,再搭配上 CSS 屬性,就可以創作出各式各樣的互動式圖案視覺化圖表,甚至有趣的動畫效果。

這篇文章主要介紹繪製 SVG 基本圖案的語法與屬性,包括 SVG 標籤直線文字圓形橢圓矩形以及多邊形,請配合 CodePen DEMO 服用本文。

SVG 標籤與座標系統

在 HTML 中, <svg> 表示 SVG 元素,我們可以把 <svg> 的範圍想像成是繪製向量圖案的畫布大小,而每一張 <svg> 畫布都擁有自己的座標系統,用來定位裡面各種圖形的位置。

<svg> 元素的座標原點 (0, 0) 座落元素的左上角,向左方正射出 X 軸,向下方正射出 Y 軸,與 CSS 的 position 屬性定位邏輯相同。

實務上,我們會在 <svg> 原入中設定 viewbox 屬性,來改變 SVG 元素的可視範圍。可以把 viewbox 想像成一個觀景窗(視盒),設定觀景窗的中心點以及大小,就會決定我們觀察 SVG 元素的位置以及大小。

語法:<svg>
屬性:

  • viewbox="min-x min-y width height"
    • min-x:視盒原點 X 座標(第一個值)
    • min-y:視盒原點 Y 座標(第二個值)
    • width:視盒寬度(第三個值)
    • height:視盒高度(第四個值)

這部分範例可以參考 CodePen DEMO 會比較清楚。


直線(Line)

語法:<line>
屬性:

  • x1:起點 X 座標
  • y1:起點 Y 座標
  • x2:終點 X 座標
  • y2:終點 Y 座標

範例:

1
2
3
4
<svg id="pic2" viewbox="-100 -100 200 200">
<line x1="-45" y1="-45" x2="45" y2="45"></line>
<line x1="-45" y1="45" x2="45" y2="-45"></line>
</svg>

搭配 CSS 的 strokestroke-width 屬性調整 <line> 的顏色與寬度。當然,也可以加上動畫:

1
2
3
4
5
6
7
8
9
10
#pic2{
stroke: tomato;
stroke-width: 10px;
transition: all 1s;

&:hover{
stroke: purple;
stroke-width: 10px;
}
}


圓形(Circle)

語法:<circle>
屬性:

  • cx:圓心 X 座標
  • cy:圓心 Y 座標
  • r:半徑長度

範例:

1
2
3
<svg id="pic3" viewbox="-100 -100 200 200">
<circle cx="0" cy="0" r="10"></circle>
</svg>

搭配 CSS 做成動畫(屬性 r 可以寫在 CSS 裡面):

1
2
3
4
5
6
7
8
9
10
11
12
#pic3 circle{
fill: black;
stroke: transparent;
transition: all 1s;

&:hover{
fill: transparent;
stroke: black;
stroke-width: 7px;
r: 50;
}
}


矩形(Rectangle)

語法:<rect>
屬性:

  • x:原點 X 座標
  • y:原點 Y 座標
  • width:矩形寬度
  • height:矩形高度

補充:其實, fillstrokestroke-width 這些屬性也可以加在 HTML 上
範例:

1
2
3
<svg viewbox="-100 -100 200 200">
<rect x="-50" y="-50" width="100" height="100" fill="maroon"></rect>
</svg>


橢圓(Ellipse)

語法:<ellipse>
屬性:

  • cx:橢圓圓心 X 座標
  • cy:橢圓圓心 Y 座標
  • rx:橢圓 X 軸半徑
  • ry:橢圓 Y 軸半徑

範例:

1
2
3
<svg viewbox="-100 -100 200 200">
<ellipse cx="0" cy="0" rx="60" ry="30" fill="chocolate" stroke="steelblue" stroke-width="1"></ellipse>
</svg>


折線(Polyline)

語法:<polyline>
屬性:

  • points="x1,y1 x2,y2 x3,y3 ...":節點座標的集合(節點座標不需要用 ; 隔開

補充: <polyline> 通常會加上 fill="none"
範例:

1
2
3
<svg viewbox="-100 -100 200 200">
<polyline points="-60,47 -30,55 0,-2 30,-21 60,17 90,29" fill="none" stroke="hotpink" stroke-width="3px"></polyline>
</svg>


文字(Text)

語法:<text>
屬性:

  • x: X 軸起點
  • y: Y 軸起點

範例:

1
2
3
<svg viewbox="-100 -100 200 200">
<text x="-100" y="0" fill="darkred">Use SVG to make an icon!</text>
</svg>


參考資料

  1. W3C:SVG Tutorial
  2. MDN:SVG Tutorial
  3. SVG 研究之路 (1) - 初探 SVG
JS 新手地下城試煉攻略:B1-九九乘法表 JavaScipt 陣列方法的 20 道陰影

評論

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×