當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML/CSS——网页SVG ICON(小图标)解决方案

發布時間：2024/10/5 HTML 55 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML/CSS——网页SVG ICON(小图标)解决方案小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、基本概念

SVG：

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

二、SVG 的歷史和優勢

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

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

與其他圖像格式相比，使用 SVG 的優勢在于：

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

SVG 的主要競爭者是 Flash。

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

三、方法

第一種Inline SVG

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

第二種Img/Object 標簽

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

第三種Background And Data URIs

采用background去調用SVG文件：

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

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

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

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

第四種SVG Sprites

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

.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是需要我們去通過坐標獲取對應位置圖標的，但是SVG Defs/Symbols就更簡單了，直接通過給每個SVG ICON定義ID，直接調用對應ID即可：

將上面代碼保存為SVG文件后，在HTML我們通過下面的方式可以直接調用：

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

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

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

第二步：

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

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

第五步，對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，不會兩張都同時加載。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Navicat——MySQL之delim
下一篇： HTML——ASP的 Response.