[網頁教學] 採用svg網頁向量格式解決icon圖片模糊的問題

在製作設計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檔)

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

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

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