數據可視化第一步，在HTML中使用SVG作圖
在討論svg標籤之前，我們先來想想img標籤，如果我們要在HTML中引入一張圖片，我們需要做哪些工作？
首先我們定義img標籤，像這樣<img> </img>，然後我們需要使用src屬性，引入圖片地址，至此，一張圖片便進到我們的網頁里了！但是如果圖片過大或者過小怎麼辦？那我們就使用width與height屬性進行限制，如果其他方面不滿意，我們再進一步使用其他屬性進行限制，直至我們滿意為止。
這也是我們使用svg標籤的過程，不過svg標籤的屬性與img標籤的屬性有些不一樣。 說了這麼多我還是沒明白，這樣吧，你畫一條線給我看看！
<svg width="400" height=400> <line x1="10" y2="10" x2="350" y2="350" style="stroke:black; stroke-width:3;"/>< /svg> n
我來解釋一下這小段代碼吧。首先，我們定義一個高400px，寬400px的svg繪製區域，然後使用了線段標籤line ，x1，y1為其實點的坐標，x2，y2為終點的坐標，style中的stroke可譯為「輪廓」，因此整個style可理解為線段顏色設置為黑色，寬度為3。
是不是很簡單？
當然了，svg中的圖形當然不止包括直線（line），還有矩形(rect)，圓形(circle)，橢圓形(ellipse)，多邊形（polygon），折線(polyline)，文字（text），以及最強大的路徑（path）。所有其他圖形可以做的路徑都可以完成。
就像line標籤擁有x1，y1，x2，y2這幾個屬性一樣，其他標籤也有自己的屬性，通過使用他們的屬性便可以製作出自己想要的圖形！
在我們接下來的學習中我們會發現大多數的圖形也都是要藉助path來完成的，那我們先來簡單試用一下path。
例如我們希望用path畫一個圓環。
<svg width="800" height="800"><g transform="translate(400,400)" > <path fill="#00000" d="M6.123233995736766e-15,-100A100,100,0,1,1,-6.123233995736766e-15,100A100,100,0,1,1,6.123233995736766e-15,-100M-1.4695761589768237e-14,-80A80,80,0,1,0,1.4695761589768237e-14,80A80,80,0,1,0,-1.4695761589768237e-14,-80Z"/></g></svg> n
g標籤中的transform屬性使圖形居中，fill屬性為填充顏色，這些都很容易理解，那d呢？那一大坨是什麼？那就是我們要講的關鍵！我們做的線從哪裡來到哪裡去，怎麼走，信息都包含在這裡面了。
M = moveto
L = linetoH = horizontal lineto V = vertical lineto C = curveto S = smooth curvetoQ = quadratic Bézier curve
T = smooth quadratic Bézier curveto A = elliptical Arc Z = closepathM代表這起點，後面跟的坐標（形如x,y）便是起點的坐標。A代表做橢圓弧，此處一共有7個參數(rx ry x-axis-rotation large-arc-flag sweep-flag x y)，代表著橢圓弧的x半徑（rx），y半徑（ry），弧的旋轉方向（x-axis-rotation large-arc-flag），弧的渲染方式（large-arc-flag sweep-flag），以及弧的終點（x y）。
別的都還好理解，渲染方式什麼鬼？那我來稍微解釋一下。
兩個A分別畫出來內外兩個圓弧，Z表示曲線閉合。最終內部被之前說的fill屬性填充為黑色，就表現除了最終的樣子。
雖然看起來很大一坨，但是一分析其實結構非常的明朗。當然，你也許會說，這很繁瑣，而且如果大量作圖的話，肯定會重來重去，這不符合美的標準。事實確實如此，當我們的代碼重複的地方很多，很繁瑣時，我們怎麼辦呢？提取出重複的地方，寫一個API，輸入必要數據（例如上邊的數字），這個API幫我們轉換成適當的數據（幫我們把M，A等這些加進去）輸出出來，便是很好的辦法。D3.JS幫我們做了這些（當然，不止是前邊括弧中的例子那麼多，他能做的比這多很多很多）。
關於html中的svg，詳細的官方文檔看這裡，寫的很詳細，如果有看不懂的我會儘力幫大家解答。http://www.w3.org/TR/SVG11/
註：題圖來源於網上。
推薦閱讀：