數據可視化第一步，SVG【小概念】

我們先來問自己第一個問題，SVG是什麼

SVG,字面意思為縮放矢量圖像（Scalable Vector Graphics）。其實在這裡有兩層意思，廣義上指矢量圖像，是相對於平常所見的點陣圖圖像而言的，點陣圖圖像是我們日常所使用的圖片，jpg、png等格式圖片都屬於此列。另一方面指矢量圖形格式。矢量圖形不只有SVG一種格式，還有CGM、SVG、AI等等其他格式。

好，我們已經知道這是相對於點陣圖的一種圖像，那它有什麼用，我有好好的點陣圖圖像不用幹嘛用你？

nn

點陣圖圖像以像素塊表示圖形，矢量圖像以點與線表示圖形。所以當圖片放大到一定成度時，點陣圖圖形會不可避免的出現醜陋的大像素塊，圖形完全被破壞。而矢量圖形則不會，不管多大還是一樣清楚，細節不會被破壞，而且矢量圖需要的儲存空間極小。但是矢量圖形也有缺點，對於過於複雜的圖形不容易表示，例如你要做一個複雜的動漫CG，如果要使用矢量圖形，那工作量……我不敢想。

我們假設，第一個圖為png格式圖片，大小26kb；第二個圖為svg格式圖片，大小2kb。點擊相應圖片放大，大到一定程度你就會發現第一個圖像邊緣開始模糊，而第二個圖像邊緣依舊清晰。

說了半天，重點來了

既然你有這樣的好處和這樣的壞處，那我拿來做數據可視化的柱狀圖，折線圖，各種點線幾何圖像豈不美哉？而且體積又小，我用在網站上那不是完美契合？W3C給了我們這個機會！在html5已經定義了SVG標籤，只要像使用其他html標籤一樣使用<svg>就可以了！而且現代瀏覽器都支持！是不是很方便呢？

nn

其他參考：Scalable Vector Graphics——維基百科

備註：題圖來自上邊的維基百科。

下一篇文章我們就來自仔細探討，如何在HTML中表示SVG圖像。