CSS中使用矢量圖片能夠大大提高網頁的視覺效果，而且相比于位圖圖片來說，它具有更高的清晰度，在放大或縮小時也不會失真，因此被廣泛應用在網頁設計中。

/*引入矢量圖片*/
.icon{
background-image: url('./icons.svg');
}
/*引入個別圖標*/
.mail{
/*icons.svg中第34個圖標*/
background-position: -34px 0;
/*圖標寬度*/
width: 16px;
/*圖標高度*/
height: 16px;
}

矢量圖片一般都是SVG格式的，可以使用工具將矢量圖形直接轉化成代碼，這樣便可以直接在CSS樣式中調用。使用矢量圖片時還需要注意圖片的大小，可以通過設置尺寸大小來達到最佳顯示效果。

另外，在移動端設備中，矢量圖片也能夠更好的適應屏幕大小，避免了因分辨率不同而產生的變形或模糊問題，因此更能保證用戶體驗。