CSS矢量圖是Web開發中常用的一種圖形格式。相比于常用的圖像文件格式（如JPEG、PNG、GIF等），矢量圖具備可放大不失真，漸變填充、無鋸齒等優點，因而頗受開發者青睞。下面讓我們來了解一下CSS矢量圖的用法。

.icon {
width: 20px;
height: 20px;
background: url(icon.svg) no-repeat center center;
}

首先，我們需要準備一份矢量圖文件，CSS中的使用方式如上述代碼。我們可以使用background屬性將矢量圖設置為元素背景，同時設置其在水平和垂直方向上居中顯示，從而達到既簡潔實用又美觀的效果。

此外，我們還可以使用SVG（可縮放矢量圖形）標記語言創建矢量圖。以以上代碼為例，通過設置<svg>標簽的width和height屬性，我們可以指定SVG圖像的寬度和高度。接下來，我們通過<circle>標簽在畫布上繪制了一個圓圈，并設置了它的圓心坐標（cx、cy）、半徑（r）、線條寬度（stroke-width）和填充顏色（fill），從而實現所需的繪圖效果。

總之，CSS矢量圖的使用在Web開發中非常廣泛，它不僅能夠優化網站的性能和交互效果，還能夠提升用戶體驗，為用戶帶來更加愉悅的瀏覽體驗。