一、基本概念

SVG：

• SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
• SVG 用來定義用于網(wǎng)絡的基于矢量的圖形
• SVG 使用 XML 格式定義圖形
• SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有所損失
• SVG 是萬維網(wǎng)聯(lián)盟的標準
• SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體

二、SVG 的歷史和優(yōu)勢

在 2003 年一月，SVG 1.1 被確立為 W3C 標準。

參與定義 SVG 的組織有：太陽微系統(tǒng)、Adobe、蘋果公司、IBM 以及柯達。

與其他圖像格式相比，使用 SVG 的優(yōu)勢在于：

• SVG 可被非常多的工具讀取和修改（比如記事本）
• SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
• SVG 是可伸縮的
• SVG 圖像可在任何的分辨率下被高質(zhì)量地打印
• SVG 可在圖像質(zhì)量不下降的情況下被放大
• SVG 圖像中的文本是可選的，同時也是可搜索的（很適合制作地圖）
• SVG 可以與 Java 技術(shù)一起運行
• SVG 是開放的標準
• SVG 文件是純粹的 XML

SVG 的主要競爭者是 Flash。

與 Flash 相比，SVG 最大的優(yōu)勢是與其他標準（比如 XSL 和 DOM）相兼容。而 Flash 則是未開源的私有技術(shù)。

三、方法

第一種Inline SVG

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

<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標簽引用，他的缺點就是請求數(shù)增加，每個圖標都去獨自加載，對服務器負載和頁面高速加載不好。

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

第三種Background And Data URIs

采用background去調(diào)用SVG文件：

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

還有如果單獨使用background引用SVG也會和第一種方案一樣造成請求數(shù)增加，所以有不少人通過使用base64 編碼來減少HTTP請求：

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

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

第四種SVG Sprites

目前市面上有很多提供ICON FONT制作的網(wǎng)站，例如：icomoon?不止開源，而且功能實在強大，可以提供輸出SVG Sprites的功能，SVG Sprites它的使用方法其實就跟Png sprites是一樣的，把多個SVG ICON合并到一個SVG文件里面去，然后通過background-position進行定位，這種方法可以解決請求數(shù)增多的問題。

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

當然如果你不喜歡用icommon也可以用自動化工具生成SVG Sprite例如用：gulp-svgstore、grunt-iconizr、gulp-svg-sprites

第五種SVG Defs/Symbols

這種其實就是在SVG Sprites上面更進一步的使用了，SVG Sprites是需要我們?nèi)ネㄟ^坐標獲取對應位置圖標的，但是SVG Defs/Symbols就更簡單了，直接通過給每個SVG ICON定義ID，直接調(diào)用對應ID即可：

<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我們通過下面的方式可以直接調(diào)用：

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

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

由于我們知道SVG在IE下的兼容性并不好，所以在高清ICON的適配在第四種方案的基礎上進行優(yōu)化，首先用icommon進行下面的步驟操作：

第一步將用AI模板做好的圖標轉(zhuǎn)換成SVG文件后導入到icommon中：

第二步：

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

第四步，只獲取我們所需要的文件夾的內(nèi)容：

第五步，對icomoon生成的樣式sprite.css進行微調(diào)整讓其適配所有PC瀏覽器和Retina下的瀏覽器：

最后的效果：

CSS4 Image-Set

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

總結(jié)

SVG目前還是存在許多問題，Windows下使用IE的兼容性和渲染效果都太差，在PC側(cè)我們無法全量使用，所以我們可以用上面的這套解決方案解決PC下所有瀏覽器下兼容問題，在Retina下，不管是device =2還是3都可以兼容，不管未來是否會有更高的devicePixelRatio出來，按照上面的方法都能完美兼容，并且在對應不同的devicePixelRatio下瀏覽器會自動選擇加載SVG或者PNG，不會兩張都同時加載。

總結(jié)

以上是生活随笔為你收集整理的HTML/CSS——网页SVG ICON(小图标)解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。