svg作為H5時代下的矢量圖，在沒有小圖標(biāo)上運(yùn)用SVG，相比用png，體積和清晰度方面更有優(yōu)勢，本文介紹直接在網(wǎng)頁中用data:image/svg+xml方法嵌入svg圖片代碼，需借助AI軟件！

先看代碼：

<style>
    .ecomcn {
        width: 20px; height: 20px;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200.34 200.34"><polygon fill="#cc0000" points="200.34 12.39 187.95 0 100.17 87.78 12.39 0 0 12.39 87.78 100.17 0 187.95 12.39 200.34 100.17 112.56 187.95 200.34 200.34 187.95 112.56 100.17 200.34 12.39"/></svg>') no-repeat center; background-size: 100%;
    }
</style>
svg代碼嵌入效果：
<div class="ecomcn"></div>

分析這里的圖片代碼：

其中 viewBox="0 0 200.34 200.34" 與 <polygon fill="#cc0000" points="200.34 12.39 187.95 0 100.17 87.78 12.39 0 0 12.39 87.78 100.17 0 187.95 12.39 200.34 100.17 112.56 187.95 200.34 200.34 187.95 112.56 100.17 200.34 12.39"/> 來自于ai文件（文件-導(dǎo)出-導(dǎo)出為-選擇svg-導(dǎo)出），左下角點(diǎn)擊“顯示代碼”；fill="#cc0000" 是后加代碼，可以設(shè)置svg為一個自定義顏色的單色圖片。（下圖為從AI中得到的svg圖片代碼）

拷貝從AI中得到的代碼片段替換即可！

Ps.圖形不宜太復(fù)雜，AI文件內(nèi)元素建議聯(lián)集處理（路徑查找器-聯(lián)集），以壓縮文件體積。注意一定要加引號 'data:image …'。此方法暫不支持IE ^^