SVG 研究之路 (1) - 初探 SVG
SVG（Scalable Vector Graphics）為一種可縮放向量圖形，是基於 XML ，用於描述二維向量圖形的一種圖形格式，而 SVG 也是由 W3C 所制定的開放標準，老早就成為網頁標準，只是一直以來因為瀏覽器的不支援，導致無法廣泛被利用，雖然我自己在兩年前就開始玩 SVG，不過也因為瀏覽器的緣故玩一玩就荒廢了 ( 當然連手機瀏覽器都不支援 )，近年來瀏覽器等級的大幅提升， SVG 又開始變得火熱起來，又燃起了我心中的那團火呀！
SVG 和其他格式的差異
以往我們在製作網頁的圖片都會使用 jpg、png 或 gif 格式，無形中往往增加了不少下載的負擔，在 CSS 技術進步之後，取而代之的就出現許多 sprites 的技術，我自己也是這門技術的愛用者，雖然對於單純的網頁瀏覽已經很足夠，不過若是要進階控制圖形的細節，卻往往會需要額外畫上不少圖形 ( 例如一張圖，滑鼠移上去某個區域會變色，就必須要畫兩張圖，變色前和變色後 )，這時候就立馬看出 SVG 的優勢了！
這是一張普通的 png 圖檔，滑鼠移上去沒有任何反應，我如果要讓他有變化，我必須要再重畫一張，再利用hover的方式來變換背景或圖片之類，此外，這張圖檔基本上就只能這麼大，如果要放大就會產生鋸齒或模糊，縮小的時候在不同的瀏覽器演算法下，也會產生鋸齒或模糊。
這是一張 SVG 的向量圖，大家可以把滑鼠移到上面去，就會發現移到不同的區域就會變化不同的顏色，而這僅僅只是利用一張 SVG 和一些 CSS 就可以達成，而且不管如何縮放，這張圖都不會模糊也不會有鋸齒，實在是相當的方便。
什麼時候該用 SVG
雖然 SVG 是如此的便利，但還是要補充說明一點，根據我十多年來設計的背景和經驗，「向量」與「點陣」這兩種圖形，各有各自的好處，如果你要使用向量圖來表現細節非常繁雜的圖片，整張向量圖的大小有可能會遠大於點陣圖，處理和運算的速度也會非常慢 ( 可以想像幾千個數學式同時進行，跟我只要單純呈現表現幾千個點，速度就差多了 )，況且有時候你就是希望有點陣的風格，這就是向量圖做不到的地方，但向量圖所具備的優勢也是點陣圖所無法達成，可以縮放自如的圖片，可以由程式控制的細節...等。
因此，如何在點陣和向量之間取得一個完美的平衡，就大大考驗著設計師的功力！最後，對於設計師來說，也不用擔心不會寫 SVG 怎麼辦，你只要打開 Illustrator ，就可以把向量圖轉換成 SVG，再進去改程式碼就可以囉！ ( 如果你不會用 Illustrator，那我想你應該就不配稱作設計師了ㄎㄎ ) 由下面這張圖可以看出，我們把上面那張 SVG 用 Illustrator 打開，就可以看出各個群組與向量是如何繪製，對於設計師來說，這就是我們的強項了，對吧！
以下提供一些 SVG 的基本網站，大家有興趣可以自己點進去看看。