首頁 部落格 網頁設計:SVG圖形格式六大優勢
Ryan
Aug 31, 2018
讓公司平均年齡上漲的宅男,經營過動漫社團、當過電玩雜誌特約作者。 興趣是電競與科技,關注新趨勢購物,尤其是冷門商品、或尚未上市的群眾募資商品。 網路行銷一做就是十幾年,認為這個業界需要更開放交流,才能成長與突破。

網頁設計:SVG圖形格式六大優勢

想像一下,透過程式如CSS與JS的技術就能夠改變圖形的樣貌,外觀與色彩,即時的呈現於你的網站上,而且維持一貫的高品質,這樣的夢想其實已經逐漸在網頁設計產業上發酵,因為SVG圖形格式已經成為當今網頁的圖形標準之一。

SVG是一個相當新的圖形標準,目前最大的使用族群為網頁設計族群,所以一般的用戶沒有聽過是很正常的。一般傳統常見的圖片格式,例如GIF、JPG與PNG格式,是以點陣為呈現的基礎,然而SVG卻是以向量的方式呈現。

點陣與向量圖形格式的差異,在於點陣格式是以座標為呈現視覺的基礎,透過無數的座標與色彩資訊,可以呈現出非常豐富的視覺色彩圖片,像是數位相機就是點陣圖形格式的主要族群。然而點陣的圖片經過放大或是縮小,都會損失部份座標的色彩資訊,導致圖片看起來會「劣化」。向量圖形格式的基礎並非座標而是曲線,雖然能夠呈現的色彩不若點陣豐富,但是卻能自由放大縮小且不影響品質。

那麼,為什麼SVG向量圖片格式是網頁設計的新希望?主因在於點陣圖片的問題在智慧手機網頁呈現上,出現了很大的問題。由於智慧手機的顯示品質不斷提昇,用戶能夠看到比電腦更多的圖形細節,若為了呈現完美的圖片效果,勢必得使用高解析度的圖片卻會致使網站速度變差,若是為了提昇手機效率降低圖片品質,網站的視覺效果就會變差,這樣的問題困擾了很多前端設計師,所幸SVG的問世解決了這樣的問題。

SVG六大優點

任意縮放

向量圖形的優勢就是變形與縮放的條件下,皆不會影響視覺品質,這一點是點陣圖片格式無法做到的優勢。有些設計師透過不同解析度的點陣圖片,透過CSS判斷螢幕解析度選擇呈現的圖片,但製作較為費時,SVG的優勢在此就能徹底發揮。

 

彈性運用 

SVG是可以透過編碼的方式呈現,因此可以任意崁在HTML文件內。由於這樣的特性,開啟網站時會將圖形視為DOM(Document Object Model)元件的一部分,瀏覽器會優先處理,對於網頁的速度提昇幫助很大。

取用元件

SVG的外觀可以透過程式控制,控制的方式千變萬化,讓前端設計師揮灑更多創意。舉例來說:你可以透過CSS重複利用SVG的圖片元素於不同的地方,而且你可以只取用一部分的資源。這樣的效益,可以讓你的用戶以為你使用了好幾種設計元素,但其實只用了一種,如此網站有更豐富的呈現方式,使用的資源卻比過去更少。

 

效能提昇

先前提過SVG的格式為向量,所佔用的資料量遠比JPG與PNG點陣圖片來得小,這對於運算力比較弱智慧手機來說是更有利的。此外SVG能夠跨平台使用,於多種標準瀏覽器呈現,點陣與向量格式至今跨平台都做得很好,當然選擇效能高的格式是優先考量的。

 

網站動畫

過去使用Flash的動畫受到了平台的限制,網站的動畫發展受到了打擊。SVG的出現讓網站動畫出現了一線曙光,透過程式控制,設計師可以輕易做出基本的旋轉、縮放、變形、變色效果的SVG動畫,隨著技術日漸成熟,設計師也能製作出複雜的動畫在網頁設計上。


資源豐富

目前越來越多的技術論壇分享SVG的相關圖像成形技術,而商用軟體Illustrator以及免費軟體Inkscape都能設計出絕美的SVG向量圖片,讓向量圖片的品質不輸給點陣圖片。只有極為少數的老舊瀏覽器讀取SVG有問題,絕大多數的新平台都能正確的觀看SVG格式的內容。


參考來源:Linkedin
https://learning.linkedin.com/blog/design-tips/5-reasons-svg-is-the-web-designer-s-new-best-friend

2018網頁設計趨勢
2018網頁設計趨勢
Ryan
Ryan
Dec 15, 2017
常見背景屬性(二)
常見背景屬性(二)
Karen
Karen
Nov 20, 2017
Google發表無限網頁長度的手機搜尋界面
Google發表無限網頁長度的手機搜尋界面
Ryan
Ryan
Apr 30, 2018