在製作設計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 rwd, web design, svg, scalable, vector, graphics, icon svg rwd, web design, svg, scalable, vector, graphics, icon

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

 

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

svg rwd, web design, svg, scalable, vector, graphics, iconsvg rwd, web design, svg, scalable, vector, graphics, icon

 

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

qrcode rwd, web design, svg, scalable, vector, graphics, icon

 

最新文章

 

想跟我們談談你的網頁設計構想嗎?

 

 

網頁設計洽詢 >  或撥 04-2221-0688