為何網頁設計需要SVG?

本文參考著名設計網站Creative Bloq 博客文章 (Roberts, 2018)，和中文讀者分享網頁設計的技術知識。Creative Bloq 雲集世界各地的頂尖設計高手，原文作者 Steven Roberts是英國UX設計師。

SVG (Scalable Vector Graphics, 中文：可縮放向量圖形)以點、線、面去紀錄圖案，而不是如PNG、JPG等點陣的方法，大家只要用過Adobe Illustrator (AI)，就會明白箇中的分別。無論如何放大，向量圖都不會出現格仔或模糊。隨著桌面和手機的瀏覽器 (Web browser)全面支援SVG，香港網頁設計公司越來越多使用這種向量圖格式。本文將會列出五個主要原因：為何網頁設計應該使用SVG。

延伸閱讀：2019網站開發新趨勢

響應式網頁設計

2019網頁設計仍然是手機優先，講究響應式網頁設計 (Responsive Web Design, RWD)。因為SVG以向量格式儲存圖像，所以不用擔心解像度 (Image resolution)是否合適，即是同一個影像在手機還是32吋大電視都不會起狗牙。舉一個很簡單的例子，網頁文字全部都是向量格式，所以無論字放大幾多倍都不會變得模糊，而這是百份百符合RWD的網頁設計原則。

Back to Top

支援程式修改

由於SVG以程式方法處圖象，它是可被瀏覽器的DOM (Document Object Model)描述。一個淺白的說法就是瀏覽器明白SVG是甚麼的圖像，從而可修改它。舉個例，本來SVG儲存了一個紅色的圓形，只要收到指示，就可以將它變成為藍色的正方形。類似的概念還有：Google理解網站上的文字較網站上的相片容易；用 Word更改文字會較Photoshop更改海報容易，等等。網站程式開發上，我們只要利用CSS及JavaScript就可以輕鬆做到網頁互動。一言之，editable也。

Back to Top

網頁風格及動畫

只要跟足w3c的指示，我們可以簡單改變網頁上SVG的風格，例如顏色、填滿度、透明度等等，進階的還有邊界格式、框架、暗影等。另外很久以前，網頁設計師仍有使用Flash去作網頁動畫，可是蘋果手機根本不支援Flash，而GIF又令檔案較大而且效果不理想。現在SVG動畫就是一個可行的方案，同時亦有很多網頁設計公司選擇使用CSS Animation，這裡有更多的參考例子。

延伸閱讀：2019七個現代網頁設計的趨勢

Back to Top

互動式網頁

上文已提到SVG是可被瀏覽器閱讀，從而進行修改，所以只要透過程式，用家就可以和網頁上的SVG互動。例如Cursor在某圖案上時就會啟動動畫，提示用家下一步應該要做甚麼。現代網頁設計強調用戶體驗 (User experience, UX)，而互動性就能明顯提升UX，令用家方便和容易使用。和從前的Flash不同，這些互動程式不用在桌面或手機瀏覽器另裝插件或軟件才能使用，這可減少互動的安全性問題。這裡有個例子。

Back to Top

更快的網頁

SVG最重要的優勢就是細小的檔案，這在互動式網站中更明顯。以MB計的PNG檔案，如果以SVG方式處理，File Size可能低以數十KB。細小的檔案令到下載時間大幅減少，而且瀏覽器在處理SVG時，可能較PNG使用更少的運算能力，這對手機來說是十分重要的。我們經常說五秒法則，指用家打開網頁後五秒都沒事發生，就會跳到其他網站。試想想，一張PNG多花兩秒下載和半秒處理，正是這2.5秒，就讓潛在顧客白白流失了，所以很多香港網頁公司都越來越重視網速問題。

延伸閱讀：關於SEO一定要知的九件事

Back to Top

總結

網頁設計已經跳離了平面多年，單以Photoshop概念去理解網頁實在乏善足陳，隨著人們對UX的要求日益提高，靜態網站已不能滿足今天的用家。pnetform作為香港網頁設計公司，自然希望與時並進，為業界及客戶介紹更多世界性的網頁設計新潮流和趨勢，提升整體技術水平。

延伸閱讀：七個你應該搵香港網頁設計公司的原因

Back to Top