[CSS] SVG的使用
使用svg代替iconfont的好處:
iconfont無法顯示復(fù)雜的圖形;svg是矢量圖;svg標(biāo)簽內(nèi)部可以添加title和desc標(biāo)簽,有利于SEO和無障礙閱讀。
svg sprite圖:將若干個svg圖標(biāo)組合到一個文件上,可以減少網(wǎng)絡(luò)請求的次數(shù),通過#獲取指定的圖標(biāo):
<svg class="icon">
<use xlink:href="img/sprite.svg#icon-example"></use>
</svg>
在 CSS 中可以很方便的編輯圖標(biāo)的樣式(大小、顏色):
.icon{
width: 2rem;
height: 2rem;
fill: #999;
}
資源網(wǎng)站:? IcoMoon App
選擇需要的圖標(biāo),然后點擊右下角的Generate SVG & More:
默認(rèn)會生成SVG和PNG,可以點擊左下角的齒輪圖標(biāo)設(shè)置,取消勾選PNG,僅下載svg:

浙公網(wǎng)安備 33010602011771號