在製作設計RWD響應式網站時,會發現用jpg或png製作logo圖檔,到了手機版都是模糊的,雖然可以用CSS直接將較大尺寸的logo圖檔縮小,讓圖片不致於失真,但使用svg網頁向量圖會是更好的方法,可預見svg圖片將會在網路上越來越普及。

 

SVG簡介

SVG,可縮放向量圖形(Scalable Vector Graphics,簡稱SVG)是W3C所制定的開放性網路標準之一。SVG圖片格式可讓網頁設計師在網頁中以向量格式顯示圖片,例如:矩形、圓、橢圓、多邊形、直線、任意曲線等。設計師可在Illustrator將ai檔直接轉存成svg檔,如同使用jpg/gif/png等點陣圖的方式運用在網頁上,影像不會因為圖檔尺寸的改變而失真。自IE9之後,網路上開始支援向量圖片svg格式,這讓網頁設計在圖片的呈現上邁入了一個新的境界。

 

網頁設計上採用SVG圖片的優點:

  1. 可解決網站logo或icon在行動版網站圖片模糊的問題
  2. 不會因為圖片放大縮小而失真,可運用於RWD響應式網頁背景圖
  3. 製作方便,可用Illustrator繪製圖檔後,直接轉存成svg檔

 

png與 svg圖片實際比較:

*請分別用電腦及手機瀏覽這2張圖片(左:png檔、右:svg檔)

 svg svg

在電腦上看起來,這兩個圖片沒有太大差異。但在手機上則會發現,jpg圖片邊緣較為模糊,svg則可維持清楚銳利的邊緣。

 

下面直接將圖片尺寸拉大看一下

svgsvg

 

你也可以用QRcode連到這一頁看看。

qrcode

 

ABOUT CADIIS

CADIIS凱士網頁設計公司專精於RWD網頁設計、形象網站設計、企業網站建置等各項網頁設計服務,提供台北、台中、台南、高雄、海外等地網站設計相關服務。

 

進一步了解