iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 15
0

SVG-概述

SVG?

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

SVG說明

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

https://ithelp.ithome.com.tw/upload/images/20181030/20111500tAyUZarVp9.jpg

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

https://ithelp.ithome.com.tw/upload/images/20181030/20111500lQd266v3Iw.jpg
點陣圖是由像素構成,如果放太大會出現馬賽克情況,而SVG是由形狀元素構成,放大縮小不會有解析度問題(如上圖),現在網頁、行動裝置解析度有很多種,排除照片,如果使用向量圖檔會方便許多。(圖片來源:wiki)

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

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

https://ithelp.ithome.com.tw/upload/images/20181030/201115003uHVYrxwdX.png

SVG優點

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

SVG缺點

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

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

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


上一篇
Animate.css大全介紹
下一篇
SVG-layer
系列文
30天讓設計師搞定CSS/SVG動畫30

尚未有邦友留言

立即登入留言