MOOC(磨客思) Cousera -- Data Visualization 伊利諾香檳分校課程心得 第一週 Part B

     因為影片並沒有很詳細的介紹<svg>這個標籤就直接使用了，所以我去查了一些跟<svg>相關的網站來進行學習。其中包含了影片中所提到的w3cschool 。
   
      SVG 的英文全名是(SVG, Scalable Vector Graphics).我的理解是這樣的一個tag 可以用來插入向量繪圖的物件，比如說現在開啟記事本將底下的文字內容存成html 檔。html的框架我就不在這裡討論了，裡面也是很有學問的。

Fig 1. code 的內容

   在輸入了以上的文字內容後會出現底下，的圖案，而這個圖形就是所謂的svg的檔案，本身是屬於向量繪圖的檔案，這點值得留意。另外，像是pdf、png這類型的檔案也都屬於向量圖。

Fig 2. 輸出的結果




<svg>有不少可以進行圖形物件的設置方式，比如長方形、橢圓、多邊形等等

Rectangle <rect>

Circle <circle>

Ellipse <ellipse>

Line <line>

Polyline <polyline>

Polygon <polygon>

Path <path>

這裡直接用長方形來進行舉例，比較有意思的事情是，如果你有學過css的排序語言的話，你就可以對圖形進行不同的表現如圖：

 而輸出的結果可以進行比較，底下兩個圖分別是針對其邊線進行利用css的語法調整opacity 也就是透明度的語法。

 

這裏介紹多邊形的用法，其中一個語法便是points

points

x,y座標位置，x1,y1 x2,y2, x3,y3...

底下我們就來試做一個星星吧～

我想另一個值得介紹的標籤就是<path>

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Bézier curve
• T = smooth quadratic Bézier curveto
• A = elliptical Arc
• Z = closepath

 基本上能夠我認為比較常用的應該就是這幾個了，不過當然這邊只是進行簡單的圖形繪畫，要真的畫出很厲害的圖，真的還是需要花點時間的。

 

像是w3cschool裡面就畫出了一個用svg畫出來的logo我突然覺得這個<svg>真是太神啦！


fig 3.從https://www.w3schools.com/html/html5_svg.asp處理完的圖形

Rectangle <rect>

Circle <circle>

Ellipse <ellipse>

Line <line>

Polyline <polyline>

Polygon <polygon>

Path <path>

points

x,y座標位置，x1,y1 x2,y2, x3,y3...

雖然<svg>並不是這個data visualization 的主要介紹，但還是相當有趣，我想對於一些對網頁前端開發的朋友也可以學習一下。

參考學習網站：https://www.w3schools.com/graphics/svg_intro.asp