@京東設計中心?：很多設計師跟開發都會遇到SVG 圖標模糊的問題，今天我們簡單教你四招，輕松搞定這個問題，有需要的同學趕緊來收 >>>

簡單介紹

隨著高清視網膜屏的出現，網頁設計也需要考慮各種高清屏幕的顯示效果，前端在寫代碼的時候也需要根據屏幕的不同，輸出不同分辨率的icon圖片，真的好多工作量啊~

為了解決屏幕分辨率對圖標影響的問題，SVG格式的icon出現了，簡單的說它是通過矢量路徑把icon變為字體，這樣前端在改變icon大小和顏色的時候，操作起來就簡單高效多啦~

被困擾的小問題

先說明一下~我是一位GUI設計師，在設計網頁的時候，開發童鞋就使用了SVG格式的icon~細心的我發現這個格式的icon最后呈現出來的效果，邊緣會模糊。。。

這可能是一部分開發和視覺設計師都遇到的問題哦~用圖片來說明一下！

對比后，效果相差還是很明顯的，甚至圖標還會變形呢！這對有強迫癥的人來說真的是一件超級虐心的事情呢~

解決辦法

SVG格式是從AI導出的，所以無論視覺是在PS里面制作還是AI里面制作，都要將icon在AI中形成路徑~

問題出在哪里呢？

我們都知道AI是矢量工具，無論你畫什么路徑都不會出現像素那樣的鋸齒，所以在用AI制作像素icon的時候，一定要重新設置首選項，并用網格進行輔助。

STEP 1：單位一定是像素，否則會影響其他選項的單位設置

STEP 2：鍵盤增量調整為0.1像素，方便調整icon位置

STEP 3：網格線間隔設置為1px，次分隔線設置為10意思是最小的網格單位是0.1px，如果你的icon邊緣沒有貼在1、2、3...這樣的整數網格上而是在次分隔線上，就會模糊變形！

STEP 4：從“視圖”選項中選擇“顯示網格”。

還要啰嗦幾句......

最后檢查的時候畫面一定要放大到最大哦~

簡單的小分享，希望可以幫到童鞋們~謝謝啦。

【會營銷的設計師才是好文案】

文案篇：搞定文案的集大成篇！
《年度最佳教程！7招教你寫出互聯網頂尖文案！》

營銷篇：大眾點評的頂尖營銷案例！
《重磅推薦！如何設計傳單才不會被人隨手扔掉？》

設計篇：了解網頁設計的前世今生！
《漲姿勢！寫給網頁設計師的網頁設計簡史》

原文地址：mp.weixin

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量90萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
官方微信：想在手機上、被窩里獲取設計教程和各種意想不到的"福利"嗎？添加優設哥微信號：youshege