SVG-概述

SVG?

之前在設計網頁切版時，只知道畫完圖形或icon等向量圖形，匯出成SVG放入網頁就對了，隨意放大都不會有馬賽克，也可以加上CSS屬性，而且有時候眼殘不是用繪圖軟體開起來還會有程式碼？一直覺得困惑，但是不了解原因，接下來就一起來探討SVG以及如何更好的運用它!

SVG說明

如我們前言說明的，我們會以設計師的角度來完成30天的鐵人賽～想到點陣及向量圖，就會想到，點陣圖-Photoshop，向量圖-Illustrator，如果開發網頁，應該都對Illustrator和Sketch不陌生吧？我們可以在Illustrator畫logo，在Sketch設計網頁Mockup，要將設計好的圖案在網頁上應用，很適合使用SVG檔。

SVG是可伸縮的向量圖形 ( Scalable Vector Graphic )。
是一種基於可延伸標記式語言(XML)，用於描述二維向量圖形的圖形格式。
由 W3C 制定，是一個開放標準。

點陣圖是由像素構成，如果放太大會出現馬賽克情況，而SVG是由形狀元素構成，放大縮小不會有解析度問題(如上圖)，現在網頁、行動裝置解析度有很多種，排除照片，如果使用向量圖檔會方便許多。(圖片來源：wiki)

點陣圖由像素構成，SVG是由程式碼構成，因此易於修改編輯

<svg>
<rect id="A" x="50" y="50" fill="#FFFFFF" stroke="black" stroke-width="10" width="100" height="75"/>
</svg>

SVG優點

• 檔案小-大部分情況下，SVG的檔案大小比JPG及PNG還小(除了照片)
• 易於修改-因為是基於XML，所以可以直接編輯，易於修改，不像點陣圖要做好多張圖
• 適用任意解析度-因為是向量圖，放大不會有馬賽克問題，可用於任意解析度
• 濾鏡及效果-支援多種濾鏡及特殊效果
• 動態效果-可動態生成圖形或製作動態效果，製作動畫，這就是我們要講的重點～～

SVG缺點

• 細節繁複的圖片，運算速度慢-點陣圖檔案大小是隨著圖片大小而變，向量圖是隨著呈現細節而變，所以如果呈現細節繁複的圖片，大小有可能會遠大於點陣圖，處理運算的速度會非常慢
• 資料採用未壓縮的方式存放-相較於其他的向量圖形格式，同樣的檔案內容會比其他的檔案格式稍大

～不專業學習筆記，如有疑問或是錯誤，歡迎不吝指教～

參考來源：
[1] w3school
[2] SVG WIKI
[3] 設計師對 SVG 應該有的觀念
[4] https://www.oxxostudio.tw/articles/201410/svg-tutorial.html