高清ICON SVG解決方案

在上一篇文章中，咱們講述了字體渲染機制和致使iconfont出現鋸齒的緣由，以及如何才能出繪製高質量SVG ICON，而且提供了一套AI模版供你們參考使用。

下文將講訴前端側咱們如何用SVG來作成高清IOCN，而且良好支持PC下的各個瀏覽器，併兼容IE6+以上的瀏覽器。

從上一篇文章中咱們得知SVG 作的圖標在IE9+的瀏覽器渲染效果至關的差，因此在IE下咱們咱們不使用SVG ICON，咱們能夠將SVG轉成一倍的png圖片來進行替代。首先來簡單的普及一下SVG ICON的幾個使用方法：

第一種Inline SVG

這種方法就是直接把SVG標籤寫入到HTML中去，直接經過修改fill和stroke屬性來控制填充顏色和邊框顏色，可是缺點就是維護性很差，若是一個頁面Icon特別多，可能要寫好幾十個SVG在頁面，複用性差，後期擴展性也不佳。

1 2 3

< svg   width = "74"  height = "74"  viewBox = "0 0 74 74" >      < path  fill = "#444444"  d = "M25.42 27.737v-11.555c0-6.382 5.174-11.555 11.555-11.555s11.555 5.174 11.555 11.555v11.555h4.622v-11.555c0-8.935-7.243-16.178-16.178-16.178s-16.178 7.243-16.178 16.178v11.555h4.622z" ></ path > </ svg >

第二種img/object 標籤

這種方法直接將SVG ICON保存成一個一個單獨文件，經過img或object標籤引用，他的缺點就是請求數增長，每一個圖標都去獨自加載，對服務器負載和頁面高速加載很差。

1	< img  src = "svg/16-16.svg"  alt = "test icon"  />

第三種background and Data URIs

在上一篇文章中我有一種調用方法就是採用 background 去調用SVG文件：

1 2 3

. icon  { backgound-image:  url (test.svg) }

還有若是單獨使用background引用SVG也會和第一種方案同樣形成請求數增長，因此有很多人經過使用base64 編碼來減小HTTP請求：

1 2 3

. icon {     background :  url (data:text/svg+xml;base 64 ,) }

不過不太建議使用base64 編碼，不管性能和維護方面都不是特別好，記得看過一個測試 base64 性能的文章，base64 在移動端渲染時間比正常使用url的渲染時間要慢6倍。

第四種SVG Sprites

目前市面上有不少提供ICON FONT製做的網站，例如：icomoon不止開源，並且功能實在強大，能夠提供輸出SVG Sprites的功能，SVG Sprites它的使用方法其實就跟Png sprites是同樣的，把多個SVG ICON合併到一個SVG文件裏面去，而後經過background-position進行定位，這種方法能夠解決請求數增多的問題。

1 2 3 4 5 6 7 8

. icon  {      width :  16px ;      height :  16px ;      display : inline- block ;      background-repeat :  no-repeat ;      background-image :  url (sprite.svg);       background-position :  0  0 ; }

固然若是你不喜歡用icomoon也能夠用自動化工具生成SVG Sprite例如用：gulp-svgstore、grunt-iconizr、gulp-svg-sprites

第五種SVG Defs/Symbols

這種其實就是在SVG Sprites上面更進一步的使用了，SVG Sprites是須要咱們去經過座標獲取對應位置圖標的，可是SVG Defs/Symbols就更簡單了，直接經過給每一個SVG ICON定義ID，直接調用對應ID便可：

1 2 3 4 5 6 7 8

< svg  xmlns = "http://www.w3.org/2000/svg" >      < symbol  id = "icon1"  viewBox = "0 0 32 32" >          < path  fill = "#444444"  d = "M3 3h1v12h-1v-12z" ></ path >      </ symbol >      < symbol  id = "icon2"  viewBox = "0 0 32 32" >          < path  fill = "#444444"  d = "M3 14h10v1h-10v-1z" ></ path >      </ symbol > </ svg >

將上面代碼保存爲SVG文件後，在HTML咱們經過下面的方式能夠直接調用：

1 2 3 4 5 6

< svg  class = "icon1" >      < use  xlink:href = "/svg/symbol.svg#icon1" ></ use > </ svg > < svg  class = "icon2" >      < use  xlink:href = "/svg/symbol.svg#icon2" ></ use > </ svg >

新的方案：Svg Sprites +Png Sprites + Image-set

因爲咱們知道SVG 在 IE 下的兼容性並很差，因此在高清ICON的適配在第四種方案的基礎上進行優化，首先用icomoon進行下面的步驟操做：

第一步將用AI模板作好的圖標轉換成SVG文件後導入到icomoon中：

第二步：

第三步，設置導出文件前的類名，圖標間距，顏色等等一系列參數，而後下載壓縮包：

第四步，只獲取咱們所須要的文件夾的內容：

第五步，對icomoon生成的樣式sprite.css進行微調整讓其適配全部PC瀏覽器和Retina下的瀏覽器：

最後的效果：

CSS4 Image-set

這裏應該有人會以爲也可使用Media Queries來進行判斷處理在Retinal來加載SVG Sprites，但其實Image-set它和Media Queries有些許，它不須要告訴瀏覽器使用什麼圖像，而是直接提供了圖像讓瀏覽器本身去選擇加載合適的圖片。兼容性方面在Safari6.1開始和Chrome21就開始支持這個屬性了。

總結

SVG目前仍是存在許多問題，Windows下使用IE的兼容性和渲染效果都太差，在PC端測咱們沒法全量使用，因此咱們能夠用上面的這套解決方案解決PC下全部瀏覽器下兼容問題，在Retina下，不論是device =2仍是3均可以兼容，無論將來是否會有更高的devicePixelRatio出來，按照上面的方法都能完美兼容，而且在對應不一樣的devicePixelRatio下瀏覽器會自動選擇加載SVG或者PNG，不會兩張都同時加載。

上一篇文章之因此在火狐圖標出問題那塊講了許久，並拋出更嚴謹的圖標製做方法的主要緣由這個方案須要對合並後的SVG Sprites轉成PNG Sprite圖片，若是SVG ICON作的有問題，那生成的圖片也然出現發虛的狀況，你們看我最後那個效果圖下，PC下全部瀏覽下，中間那個鎖的圖標雖然是用的生成的圖片可是依舊是發虛的和火狐下當時出問題的效果是同樣。