在製作設計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凱士網頁設計公司,專為中小企業設計、規劃、建置網站,
提供網站建置前後設計規劃諮詢服務。

簡約
設計
讓客戶專注您的產品服務
彈性
管理
透過CMS隨時調整網站架構與內容
維護
諮詢
我們是您長期的網路策略夥伴

REVIEWS

  • Eric是個非常有經驗的專案經理,了解客戶的需求,並能快速釐清卡關障礙並迅速排除、總是從專業角度分析及建議怎麼做會比較好、和客戶一起腦力激盪,如期如質將網站建置專案完成,並提供相當有用的SEO建議及訣竅。結案後的諮詢及微調修改,凱士的專業團隊也總是非常及時給予支援,維護與管理的服務也同樣令人放心!

    HEF, 2017
  • 作為材料界的國際化公司,誌陽需要的不只是內容完整,還需要情境來提供目標客戶知的權益!正由於這個堅持我們找上了CADIIS幫我們完成這些規劃。在互動的過程中可以看出他們的用心,除了提供以往經驗讓我更容易感受外,對於我們不斷提出高門檻的技術問題也能以最快的時間完成使命,如果你沒法感受我的心情,不妨進到我們網站去感受吧!www.allightec.com 好東西就是要跟好朋友分享。

    誌陽科技, 2017
  • 感謝凱士在這段時間的合作與協助,不厭其煩的配合我們的需求,設計出讓我們很滿意的頁面及功能。而且不管什麼問題都非常快速給予專業的建議及答覆,讓我們公司的同事對新的公司網站非常滿意,更稱讚很像國外公司的網站!

    非常謝謝Eric與Candi,在替我們製作新網頁時還需要想一些我們公司因主機不同而需面對的問題,更非常大方的教導一些功能設定的問題,讓我們學到非常多東西。

    德鴻科技, 2017
  • 感謝凱士團隊的專業規劃與設計,針對需求的客製化網站,讓我司能夠更新成簡約的網頁以及自行管理的後端平台。
    過程中次次的反覆溝通、聆聽需求與積極協助,再再地讓人感受到用心,是很不錯的合作經驗唷!

    IMS純慶企業, 2016
  • 能力/品味 是CADIIS的代名詞
    也是我們最後決定合作的關鍵因素
    擁有架構網站技術的團隊 比比皆是
    但一個團隊能夠同時具備 欣賞美學的藝術靈魂 設計師般的崔毛求疵
    讓成果 不再僅是網站 而是一件能觸動人的作品。

    水舞鑽,2016
  • 這是一個很愉快的合作,CADIIS能與客戶一起克服困難並為客戶設想,遇問題能迅速解決,最重要的是耐心指導,而且軟體應用簡單,CADIIS的人員個個都很有禮貌,為來會再繼續合作

    瀚世旅行, 2016
home-award
台灣廣告主協會與動腦雜誌聯合主辦「台灣50家最佳設計公司」票選活動,CADIIS榮獲入選「傑出多媒體設計公司」。
 

 

 

 

有任何網頁設計需求疑問?

 

contact btn.fw