身為一個網頁前端工程學徒，不免俗的會看到幾種圖片的副檔名，最常見的大概就是 jpg, png, svg 這三種了吧！說到 jpg, png 這兩種還算熟悉，畢竟我們一班看到的圖片大部分都是這兩種結尾的，但是 svg 是什麼就讓我霧颯颯的了！那反正都要來查查看，不如就直接寫成文章吧
SVG 是什麼？
SVG 全名是 Scalable Vector Graphics，中文就不翻譯了，反正也不會記得。他的特性呢就是他是向量圖形，而不是像 jpg, png 是像素圖型，所以 svg 圖片就會有不會被特定解析度限制的特色！而這個特色就讓我們這些每天面對不同螢幕解析度的前端工程師有著非常大的幫助！
SVG 和點陣圖哪裡不一樣？
先來說說點陣圖（jpg, png, gif) 是怎麼畫圖的，點陣圖的做法就是把一張畫布氛圍非常多的小方格，然後幫每一格方格都放入顏色，最後由這些有顏色的方格排列組合就變成我們想要的圖案！但是這樣有什麼缺點呢？就是當我們把我們的畫布放大的時候，格子就會跟著放大，而當格子大到一定程度的時候，就會變成像馬賽克那個樣子，圓弧線變得有稜有角的，就是我們所謂的解析度不夠的問題發生！
而 SVG 不一樣的地方在於，他並沒有把話不變成一格一格的小格子，而是直接把圖形化出來，這裡需要一個圓，需要佔比多大的圓，他就直接畫成一個那麼大的圓形，所以當畫面變大的時候，他依然是一個圓，依然佔整張畫布的特定部分，所以就不會造成因為畫面解析度變大而變成馬賽克的樣子。所以總歸用一句抽象但是又蠻對的話說就是：
SVG 是把圖片畫出來，而其他點陣圖則是把圖片拼出來
SVG 好棒棒 or 不棒棒？
那現在就讓我們列點說說看 SVG 到底有哪些優缺點吧～
優點：
- 可以無限放大而不會出現解析度不足問題
- 檔案大小比較小
- 可以分開獲取圖檔中的文字資料
- 可以輕易畫成動畫
缺點：
- 設計的時候比較麻煩
- 過於老舊的瀏覽器不會支援
做個總結：
今天寫完這篇文章，算是對於原本不懂的 svg 有了一些初步的了解，在前端工程師的角度來看的話，svg 的使用是真的蠻方便的，至少可以避免掉幫每一張圖片做 RWD 的時間，而且輕量化的圖片也可以在每次 request 的等待時間變短。但是對於設計來說其實就不知道了哈哈！希望你們看完這篇文章也可以和我一樣對 svg 有一個基本的了解啦！